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/DemoFacebookClone/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,7 +33,7 @@ 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}`
@@ -91,6 +91,6 @@ function Tab1() {
       </IonContent>
     </IonPage>
   );
-}
+};
 
 export default Tab1;

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

@@ -12,15 +12,15 @@ 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: 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: any) => setSearch(e.target.value)}
             />
           </IonCol>
 
@@ -76,6 +76,6 @@ function Tab2() {
       </IonContent>
     </IonPage>
   );
-}
+};
 
 export default Tab2;

03_source/mobile/src/pages/DemoFacebookClone/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/DemoFacebookClone/components/Post.tsx

@@ -21,7 +21,19 @@ import {
 import '../pages/Tab2.css';
 import React from 'react';
 
-const Post = (props): React.JSX.Element => {
+interface PostProps {
+  post: {
+    avatar: string;
+    name: string;
+    time: string;
+    sponsored?: boolean;
+    message: string;
+    image?: string;
+    views?: string;
+  };
+}
+
+const Post: React.FC<PostProps> = (props) => {
   const { post } = props;
 
   return (

03_source/mobile/src/pages/DemoFacebookClone/components/Tabs.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from '@ionic/react';
 import { Redirect, Route } from 'react-router-dom';
 import Tab1 from '../pages/Tab1';
@@ -6,13 +7,15 @@ import Tab2 from '../pages/Tab2';
 import Tab3 from '../pages/Tab3';
 import { chatboxOutline, cogOutline, personOutline } from 'ionicons/icons';
 
-const Tabs = (props): React.JSX.Element => {
+interface TabsProps {}
+
+const Tabs: React.FC<TabsProps> = () => {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/tabs/tab1" render={(props) => <Tab1 {...props} />} />
-        <Route exact path="/tabs/tab2" render={(props) => <Tab2 {...props} />} />
-        <Route exact path="/tabs/tab3" render={(props) => <Tab3 {...props} />} />
+        <Route exact path="/tabs/tab1" component={Tab1} />
+        <Route exact path="/tabs/tab2" component={Tab2} />
+        <Route exact path="/tabs/tab3" component={Tab3} />
       </IonRouterOutlet>
 
       <IonTabBar slot="bottom">

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

@@ -13,7 +13,7 @@ import Tabs from './components/Tabs';
 
 import './style.scss';
 
-function DemoFacebookClone() {
+const DemoFacebookClone: React.FC = () => {
   return (
     <IonRouterOutlet>
       <Route path="/demo-facebook-clone/tabs" render={() => <Tabs />} />
@@ -22,6 +22,6 @@ function DemoFacebookClone() {
       <Redirect exact path="/demo-facebook-clone" to="/demo-facebook-clone/timeline" />
     </IonRouterOutlet>
   );
-}
+};
 
 export default DemoFacebookClone;

03_source/mobile/src/pages/DemoFacebookClone/main/messages.ts

@@ -1,4 +1,11 @@
-export const messages = [
+export const messages: {
+  name: string;
+  avatar: string;
+  message: string;
+  online: boolean;
+  last_message_sent: number;
+  new_message_count: number;
+}[] = [
   {
     name: 'Ionic Framework',
     avatar: 'https://pbs.twimg.com/profile_images/1148952014036054016/xxv7lLvp_400x400.jpg',
@@ -73,7 +80,16 @@ export const messages = [
   },
 ];
 
-export const posts = [
+export const posts: {
+  name: string;
+  sponsored: boolean;
+  time: string;
+  avatar: string;
+  message: string;
+  views: string;
+  online: boolean;
+  image?: string;
+}[] = [
   {
     name: 'Max Lynch',
     sponsored: false,

03_source/mobile/src/pages/DemoFacebookClone/pages/MessageItem.tsx

@@ -1,7 +1,17 @@
 import { IonAvatar, IonBadge, IonImg, IonItem, IonLabel } from '@ionic/react';
 import React from 'react';
 
-const MessageItem = (props): React.JSX.Element => {
+interface MessageItemProps {
+  message: {
+    avatar: string;
+    online: boolean;
+    name: string;
+    last_message_sent: number;
+    new_message_count: number;
+  };
+}
+
+const MessageItem: React.FC<MessageItemProps> = (props) => {
   return (
     <IonItem lines="none" className="message-item">
       <IonAvatar className="avatar">

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

@@ -23,7 +23,7 @@ import { messages } from '../main/messages';
 import MessageItem from './MessageItem';
 import './Tab1.css';
 
-const Tab1 = () => {
+const Tab1: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
@@ -55,7 +55,7 @@ const Tab1 = () => {
         </IonHeader>
 
         <IonList>
-          {messages.map((message, index) => {
+          {messages.map((message: any, index: number) => {
             return <MessageItem message={message} />;
           })}
         </IonList>

03_source/mobile/src/pages/DemoFacebookClone/pages/Tab2.tsx

@@ -68,6 +68,12 @@ const Tab2 = (): React.JSX.Element => {
             <IonText color="primary" className="toolbar-title">
               ionicbook
             </IonText>
+
+            <IonButtons slot="start">
+              <IonButton shape="round" onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
           </IonButtons>
 
           <IonButtons slot="end" className="toolbar-icons">
@@ -151,7 +157,7 @@ const Tab2 = (): React.JSX.Element => {
           </IonCol>
 
           <div className="rooms-people-container">
-            {messages.map((message, index) => {
+            {messages.map((message: any, index: number) => {
               if (index > 1) {
                 return (
                   <div>
@@ -231,7 +237,7 @@ const Tab2 = (): React.JSX.Element => {
           </IonCol>
         </IonRow>
 
-        {posts.map((post, index) => {
+        {posts.map((post: any, index: number) => {
           return <Post post={post} />;
         })}
       </IonContent>