Update requirement files with new feature templates and fix backend API error message, along with mobile project config updates and documentation improvements

03_source/mobile/src/pages/DemoReactCalculator/AppPages/Tab1.tsx

@@ -33,7 +33,7 @@ function Tab1() {
     getAddress(coordinates.coords);
   };
 
-  const getAddress = async (coords) => {
+  const getAddress = async (coords: { latitude: number; longitude: number }) => {
     const query = `${coords.latitude},${coords.longitude}`;
     const response = await fetch(
       `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`

03_source/mobile/src/pages/DemoReactCalculator/AppPages/Tab2.tsx

@@ -20,7 +20,7 @@ function Tab2() {
     getAddress(search);
   };
 
-  const getAddress = async (city) => {
+  const getAddress = async (city: any) => {
     const response = await fetch(
       `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
     );
@@ -51,7 +51,7 @@ function Tab2() {
               placeholder="Try 'London'"
               animated
               value={search}
-              onIonChange={(e) => setSearch(e.target.value)}
+              onIonChange={(e: CustomEvent) => setSearch((e.target as HTMLInputElement).value)}
             />
           </IonCol>
 

03_source/mobile/src/pages/DemoReactCalculator/TestComponents/CurrentWeather/WeatherProperty.tsx

@@ -2,9 +2,13 @@ import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react'
 import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
 import { useEffect, useState } from 'react';
 
-export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
-  const [property, setProperty] = useState(false);
-
+export const WeatherProperty = ({
+  type,
+  currentWeather,
+}: {
+  type: string;
+  currentWeather: any;
+}) => {
   const properties = {
     wind: {
       isIcon: false,
@@ -36,10 +40,27 @@ export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWe
     },
   };
 
+  const [property, setProperty] = useState<typeof properties.wind>();
+
   useEffect(() => {
-    setProperty(properties[type]);
+    switch (type) {
+      case 'wind':
+        setProperty(properties.wind);
+        break;
+      case 'feelsLike':
+        setProperty(properties.feelsLike);
+        break;
+      case 'pressure':
+        setProperty(properties.pressure);
+        break;
+      case 'indexUV':
+        setProperty(properties.indexUV);
+        break;
+    }
   }, [type]);
 
+  if (!property) return <>loading</>;
+
   return (
     <IonCol size="6">
       <IonRow className="ion-justify-content-center ion-align-items-center">

03_source/mobile/src/pages/DemoReactCalculator/components/Button.tsx

@@ -1,7 +1,7 @@
 import { IonCol } from '@ionic/react';
 import styles from './Button.module.scss';
 
-const Button = (props): React.JSX.Element => {
+const Button = (props: any): React.JSX.Element => {
   const { value, special, clickEvent } = props;
 
   return (

03_source/mobile/src/pages/DemoReactCalculator/components/ButtonRow.tsx

@@ -2,7 +2,7 @@ import { IonRow } from '@ionic/react';
 import styles from './ButtonRow.module.scss';
 import React from 'react';
 
-const ButtonRow = (props): React.JSX.Element => {
+const ButtonRow = (props: any): React.JSX.Element => {
   return <IonRow className={styles.buttonRow}>{props.children}</IonRow>;
 };
 

03_source/mobile/src/pages/DemoReactCalculator/index.tsx

@@ -8,7 +8,7 @@ import Home from './pages/Home';
 
 function DemoReactCalculator(): React.JSX.Element {
   return (
-    <IonTabs className="demo-react-calculator">
+    <div className="demo-react-calculator">
       <IonRouterOutlet>
         <Route exact path="/demo-react-calculator/home">
           <Home />
@@ -16,7 +16,7 @@ function DemoReactCalculator(): React.JSX.Element {
 
         <Redirect exact path="/demo-react-calculator" to="/demo-react-calculator/home" />
       </IonRouterOutlet>
-    </IonTabs>
+    </div>
   );
 }
 

03_source/mobile/src/pages/DemoReactCalculator/pages/Home.tsx

@@ -32,7 +32,7 @@ const Home = (): React.JSX.Element => {
   const [sum, setSum] = useState('0');
   const [sumHistory, setSumHistory] = useState('Ionic Calculator');
 
-  const handleClick = (e, operator) => {
+  const handleClick = (e: any, operator: any) => {
     const tempSumHistory = sumHistory.replace('Ionic Calculator', '');
 
     if (operator === '=') {
@@ -84,7 +84,7 @@ const Home = (): React.JSX.Element => {
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
-            <IonButton onClick={() => handleBackClick()}>
+            <IonButton shape="round" onClick={() => handleBackClick()}>
               <IonIcon icon={chevronBackOutline} color="primary" />
             </IonButton>
           </IonButtons>

03_source/mobile/src/pages/DemoReactCalculator/utils/Buttons.ts

@@ -1,4 +1,7 @@
-export const buttons = [
+export const buttons: {
+  value: string;
+  special: boolean;
+}[][] = [
   [
     { value: 'C', special: true },
     { value: '(', special: true },