update,

03_source/mobile/src/App.tsx

@@ -65,7 +65,8 @@ import paths from './paths';
 import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
 //
-import DemoReactShop from './pages/DemoReactShop';
+// TODO: resume DemoReactShop
+// import DemoReactShop from './pages/DemoReactShop';
 import DemoWeatherApp from './pages/DemoWeatherApp';
 import DemoClubHouse from './pages/DemoClubHouse';
 import DemoScoreBoard from './pages/DemoScoreBoard';
@@ -233,7 +234,10 @@ const IonicApp: React.FC<IonicAppProps> = ({
             <Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
             <Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
             <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
-            <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} />
+
+            {/* TODO: resume DemoReactShop */}
+            {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
+
             <Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
             <Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
             <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />

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

@@ -1,13 +1,42 @@
-import { IonBadge, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonNote, IonPage, IonRadio, IonTitle, IonToggle, IonToolbar } from '@ionic/react';
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonRadio,
+  IonTitle,
+  IonToggle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Tab1.css';
+import { chevronBackOutline } from 'ionicons/icons';
 
 const Tab1: React.FC = () => {
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonTitle>Tab 1</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
@@ -17,9 +46,7 @@ const Tab1: React.FC = () => {
           </IonToolbar>
         </IonHeader>
 
-        <IonButton color="alans-color">
-          Button
-        </IonButton>
+        <IonButton color="alans-color">Button</IonButton>
 
         <IonItem>
           <IonLabel>Toggle</IonLabel>

03_source/mobile/src/pages/DemoReactShop/Favourites.jsx

@@ -16,9 +16,9 @@ import {
 import { heartOutline } from 'ionicons/icons';
 import { useStoreState } from 'pullstate';
 import { useState } from 'react';
-import { ProductModal } from '../TestComponents/ProductModal';
-import { FavouritesStore } from '../store';
-import { getFavourites } from '../store/Selectors';
+import { ProductModal } from './components/ProductModal';
+import { FavouritesStore } from './store';
+import { getFavourites } from './store/Selectors';
 
 const Favourites = () => {
   const favourites = useStoreState(FavouritesStore, getFavourites);

03_source/mobile/src/pages/DemoReactShop/ProductType.jsx

@@ -23,8 +23,8 @@ import { chevronBack, filter } from 'ionicons/icons';
 import { useRef } from 'react';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
-import { FilterModal } from '../TestComponents/FilterModal';
-import { ProductModal } from '../TestComponents/ProductModal';
+import { FilterModal } from './components/FilterModal';
+import { ProductModal } from './components/ProductModal';
 import { capitalize, productInfo } from '../utils';
 
 const ProductType = () => {