ionic-framework | powerful cross-platform UI toolkit | iOS library

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

{
  "name": "Uncaught ReferenceError",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.29.2"
  }
}

{
    "list" : [ {}  ]
}

<IonApp>      
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          
          <IonRouterOutlet id="main">
            <Route path="/" exact>
              <Redirect to="/lectures" />
            </Route>
            <Route path="/lectures" exact component={Home}></Route>
            <Route path="/lectures/:name" exact>
              <Lecture />
            </Route>
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

const Page: React.FC = () => {

  const [lecturaIndex, setLecturaIndex] = useState<number>(0);
  const [btnLinks, setBtnLinks] = useState<{next?: string , prev?: string }>({});

 useIonViewDidEnter(()=>{
    // Gets page params and use them to find current item in data json
    let current;
    current = lectures.list.find(lecture => lecture.title === match.params.name); 
    setLecturaIndex(current.id);
   // Set next and prev buttons url for routerLink
    setBtnLinks({
      next: current.id < 13 ? `/lectures/${languages.list[current.id+1].title}` : '/lectures', 
      prev: current.id > 0 ? `/lectures/${languages.list[current.id-1].title}` : '/lectures'
    });
   // function that Enables/disables navigation buttons depending on current index. ie: if i=0; can't go back
    indexCheck(current);
  })

// THESE ARE NEVER TRIGGERED WHEN GOING TO NEXT PARAM (/lectures/:param)
useIonViewWillLeave(()=>{
    console.log('will leave lecture');
  })

  useIonViewDidLeave(()=>{
    console.log('did leave lecture');
  })
  return(
    <IonPage>
      <IonContent>        
        <IonButton          
          disabled={nextBtnDisable}           
          routerLink={btnLinks.next}
          routerDirection="back"      
          >
        NEXT
        </IonButton>
      </IonContent>
    </IonPage>
  )
}

  async pickerTwoColumns(obj: objectTwoColumns ) {
    this.clearObject(obj.firstColumnOptions);
    this.clearObject(obj.secondColumnOptions);
    let options: PickerOptions = {
      //cssClass: 'picker',
      backdropDismiss: false,
      buttons: [
        // {
        //   text: 'Annuler',
        //   role: 'cancel'
        // },
        {
          text: 'Valider',
          handler: () => {
            return true;
          }
        }
      ],
      columns:[
        {
        name:obj.firstColumnName,
        selectedIndex: obj.firstColumnIndex,
        suffix: obj.firstColumnSuffix,
        options: obj.firstColumnOptions,
        columnWidth: '5',
        suffixWidth: '1',
        prefixWidth: '10',


      },
      {
        name:obj.secondColumnName,
        selectedIndex: obj.secondColumnIndex,
        suffix: obj.secondColumnSuffix,
        options: obj.secondColumnOptions,
        columnWidth: '10',
        suffixWidth: '5',
        prefixWidth: '100',
      },
    ]
    };

    let picker = await this.pickerController.create(options);
    picker.columns[0].options.forEach(element => {
      delete element.selected;
      delete element.duration;
      delete element.transform;
    });

    // https://github.com/ionic-team/ionic-framework/issues/17664
    picker.present();
    picker.onDidDismiss().then(async data => {
      let firstColumn = await picker.getColumn(obj.firstColumnName);
      let secondColumn = await picker.getColumn(obj.secondColumnName);
      obj.firstColumnTextValue = firstColumn.options[firstColumn.selectedIndex].text;
      obj.secondColumnTextValue  = secondColumn.options[secondColumn.selectedIndex].text;
      
      obj.firstColumnIndex = firstColumn.selectedIndex;
      obj.secondColumnIndex = secondColumn.selectedIndex;

      //this.checkIfValidateOk();
      
    })
    
    console.log(obj);
    
  }

  async sizePicker() {

    await this.helpService.pickerTwoColumns(this.sizePickerObject).catch(resData => {
      console.log(resData);
    })
  }

"@ionic-native/core": "^5.0.0",
"@ionic/angular": "^5.0.0",

private bindEvents(el: JSX.Element): void {
    if (el.props.children) { //Checking if the element actually has children
        const children = this.toArray(el.props.children); //If it has only 1 child, it is an object, so this just converts it to an array

        children.forEach((c: any) => {
            if (!c.props) return; //Ignore if it has no props

            const propNames = this.toArray(Object.keys(c.props)); //Get the key names of the props of the child
            const el = $(`.${c.props.className}`); //Find the element in the DOM using the class name of the child

            propNames.forEach(p => { //Binds the actuall events to the child.
                if (Events[p] !== undefined) {
                    el.on(Events[p], c.props[p]); //`c.props[p]` is the handler part of the event
                }
            });
        });
    }
}

appendSlide(slides: JSX.Element | JSX.Element[]): void {
    if (this.slideRef.current === null) return;

    this.slideRef.current.getSwiper().then(sw => {
        slides = this.toArray(slides);

        slides.forEach(s => {
            sw.appendSlide(ReactDOMServer.renderToString(s));

            this.bindEvents(s);
        });
    });
}

x.appendSlide(<IonSlide>
    <div onClick={() => console.log("Clicked!")}</div>Click me!</IonSlide>

interface Props {
    test: string,
}

const TestSlide: React.FC<Props> = (props) => {

    return (
        <IonSlide>
            <div>
               {props.string}
            </div>
        </IonSlide>
    );
}

props: {test: "..."}

{
  type: 'IonSlide',
  props: {
    children: [{
      type: 'div',
      props: {
        children: ["..."],
      },
    }
  },
}

header("Access-Control-Allow-Origin: *");
$strStudents = '{
  "students": [
  {
    "id": 1,
    "name": "Enola Rowe",
    "class": "tony@mcu.com",
    "address": "131 Oswaldo Street"
  },{
    "id": 2,
    "name": "Timmothy Lueilwitz",
    "age": "15",
    "address": "37137 Abbigail Lock"
  },{
    "id": 3,
    "name": "Madilyn Pacocha",
    "age": "14",
    "address": "094 Morris Plains"
  },{
    "id": 4,
    "name": "Harley Cremin",
    "age": "17",
    "address": "14855 Cathy Square"
  },{
    "id": 5,
    "name": "Juana Ziemann",
    "age": "16",
    "address": "612 Dayana Stream"
  }
  ]
}';
return $strStudents;
?>

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

  export class ApiService {
  base_path = 'http://mywebsite.com/App';
  
  constructor(private http: HttpClient) { }

  // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
       // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occured: ', error.error.message);
      ;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` + `Body was: ${error.error} `);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  }

  // Create a new item
  createItem(item): Observable<Student> {
    return this.http.post<Student>(this.base_path, JSON.stringify(item), this.httpOptions)
    .pipe(retry(2), catchError(this.handleError));
  }

  // Get a Student's data by ID
  getItem(id): Observable<Student> {
    return this.http.get<Student>(this.base_path + '/' + id, this.httpOptions)
    .pipe(retry(2), catchError(this.handleError));
  }

  // Get a list of Students
  getList(): Observable<Student> {
    return this.http.get<Student>(this.base_path)
    .pipe(retry(2), catchError(this.handleError));
  }

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button class="tab-btn" tab="home">
      <ion-icon name="{{ homeIcon }}"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button class="tab-btn" tab="price">
      <ion-icon name="{{ priceIcon }}"></ion-icon>
      <ion-label>Price Search</ion-label>
    </ion-tab-button>
<ion-tabs>

export class TabsPage {
  public homeIcon = 'home';
  private homeFilled = 'home';
  private homeOutline = 'home-outline'
  public priceIcon = 'search-outline';
  private priceFilled = 'search';
  private priceOutline = 'search-outline';

  ionTabsDidChange() {
    let selectedTabName = getSelected();
    // Stuff to switch icon from filled to outline and vice versa
  }

}