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/DemoSkeletonText/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/DemoSkeletonText/components/Posts.tsx

@@ -1,11 +1,17 @@
 import { IonImg, IonItem, IonLabel, IonList, IonLoading, IonThumbnail } from '@ionic/react';
 import { SkeletonPosts } from './SkeletonPosts';
 
-export const Posts = ({ posts, useSkeleton }): React.JSX.Element => (
+export const Posts = ({
+  posts,
+  useSkeleton,
+}: {
+  posts: any;
+  useSkeleton: boolean;
+}): React.JSX.Element => (
   <>
     {posts.length > 0 ? (
       <IonList>
-        {posts.map((post, index) => {
+        {posts.map((post: any, index: number) => {
           return (
             <IonItem key={index}>
               <IonThumbnail slot="start">

03_source/mobile/src/pages/DemoSkeletonText/components/SkeletonPosts.tsx

@@ -1,10 +1,4 @@
-import {
-  IonItem,
-  IonLabel,
-  IonList,
-  IonSkeletonText,
-  IonThumbnail,
-} from "@ionic/react";
+import { IonItem, IonLabel, IonList, IonSkeletonText, IonThumbnail } from '@ionic/react';
 
 export const SkeletonPosts = (): JSX.Element => {
   const postAmount = 10;
@@ -19,13 +13,13 @@ export const SkeletonPosts = (): JSX.Element => {
             </IonThumbnail>
             <IonLabel>
               <h3>
-                <IonSkeletonText animated style={{ width: "50%" }} />
+                <IonSkeletonText animated style={{ width: '50%' }} />
               </h3>
               <p>
-                <IonSkeletonText animated style={{ width: "100%" }} />
+                <IonSkeletonText animated style={{ width: '100%' }} />
               </p>
               <p>
-                <IonSkeletonText animated style={{ width: "30%" }} />
+                <IonSkeletonText animated style={{ width: '30%' }} />
               </p>
             </IonLabel>
           </IonItem>

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

@@ -9,15 +9,13 @@ import Home from './pages/Home';
 
 function DemoSkeletonText() {
   return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Route exact path="/demo-skeleton-text/home">
-          <Home />
-        </Route>
+    <IonRouterOutlet>
+      <Route exact path="/demo-skeleton-text/home">
+        <Home />
+      </Route>
 
-        <Redirect exact path="/demo-skeleton-text" to="/demo-skeleton-text/home" />
-      </IonRouterOutlet>
-    </IonTabs>
+      <Redirect exact path="/demo-skeleton-text" to="/demo-skeleton-text/home" />
+    </IonRouterOutlet>
   );
 }