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/DemoFloatingTabs/AppPages/Tab1.tsx

@@ -18,10 +18,10 @@ import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
 import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab1() {
+const Tab1: React.FC = () => {
   const router = useIonRouter();
 
-  const [currentWeather, setCurrentWeather] = useState(false);
+  const [currentWeather, setCurrentWeather] = useState<any>(false);
 
   useEffect(() => {
     getCurrentPosition();
@@ -33,13 +33,13 @@ function Tab1() {
     getAddress(coordinates.coords);
   };
 
-  const getAddress = async (coords) => {
+  const getAddress = async (coords: any) => {
     const query = `${coords.latitude},${coords.longitude}`;
     const response = await fetch(
       `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
     );
 
-    const data = await response.json();
+    const data: any = await response.json();
     console.log(data);
     setCurrentWeather(data);
   };
@@ -91,6 +91,6 @@ function Tab1() {
       </IonContent>
     </IonPage>
   );
-}
+};
 
 export default Tab1;

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

@@ -12,19 +12,19 @@ import {
 import { useState } from 'react';
 import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab2() {
-  const [search, setSearch] = useState('');
-  const [currentWeather, setCurrentWeather] = useState(false);
+const Tab2: React.FC = () => {
+  const [search, setSearch] = useState<string>('');
+  const [currentWeather, setCurrentWeather] = useState<any>(false);
 
   const performSearch = async () => {
     getAddress(search);
   };
 
-  const getAddress = async (city) => {
+  const getAddress = async (city: string) => {
     const response = await fetch(
       `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
     );
-    const data = await response.json();
+    const data: any = await response.json();
 
     if (data && data.current && data.location) {
       setCurrentWeather(data);
@@ -51,7 +51,7 @@ function Tab2() {
               placeholder="Try 'London'"
               animated
               value={search}
-              onIonChange={(e) => setSearch(e.target.value)}
+              onIonChange={(e: any) => setSearch(e.target.value)}
             />
           </IonCol>
 
@@ -76,6 +76,6 @@ function Tab2() {
       </IonContent>
     </IonPage>
   );
-}
+};
 
 export default Tab2;

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

@@ -2,8 +2,14 @@ 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 [property, setProperty] = useState<any>(false);
 
   const properties = {
     wind: {
@@ -37,7 +43,7 @@ export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWe
   };
 
   useEffect(() => {
-    setProperty(properties[type]);
+    setProperty(properties[type as keyof typeof properties]);
   }, [type]);
 
   return (

03_source/mobile/src/pages/DemoFloatingTabs/TestComponents/SkeletonDashboard/index.tsx

@@ -14,7 +14,7 @@ import {
 } from '@ionic/react';
 import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
 
-export const SkeletonDashboard = () => (
+export const SkeletonDashboard: React.FC = () => (
   <IonGrid>
     <IonCard>
       <IonCardContent className="ion-text-center">

03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx

@@ -1,6 +1,6 @@
 import './ExploreContainer.scss';
 
-const ExploreContainer = ({ name }) => {
+const ExploreContainer: React.FC<{ name: string }> = ({ name }) => {
   return (
     <div className="container">
       <strong>{name}</strong>

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

@@ -10,7 +10,7 @@ import Tab3 from './pages/Tab3';
 import './theme/style.scss';
 import './theme/floating-tab-bar.scss';
 
-function DemoFloatingTabs() {
+const DemoFloatingTabs: React.FC = () => {
   return (
     <IonTabs className="demo-floating-tabs">
       <IonRouterOutlet>
@@ -41,6 +41,6 @@ function DemoFloatingTabs() {
       </IonTabBar>
     </IonTabs>
   );
-}
+};
 
 export default DemoFloatingTabs;

03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx

@@ -28,7 +28,7 @@ const Tab1 = (): React.JSX.Element => {
           <IonTitle>Floating Tab Bar</IonTitle>
 
           <IonButtons slot="start">
-            <IonButton onClick={() => handleBackClick()}>
+            <IonButton shape="round" onClick={() => handleBackClick()}>
               <IonIcon icon={chevronBackOutline} color="primary" />
             </IonButton>
           </IonButtons>