update adding demo app,

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

@@ -0,0 +1,129 @@
+// REQ0116/main-tab
+
+import React, { useRef, useState } from 'react';
+import {
+  IonTabs,
+  IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonIcon,
+  IonLabel,
+  IonModal,
+} from '@ionic/react';
+import { Route, Redirect } from 'react-router';
+import { calendar, location, informationCircle, people } from 'ionicons/icons';
+import SchedulePage from '../SchedulePage';
+import SpeakerList from '../SpeakerList';
+import SpeakerDetail from '../SpeakerDetail';
+import SessionDetail from '../SessionDetail';
+import MapView from '../MapView';
+import About from '../About';
+import paths from '../../paths';
+import TabAppRoute from '../../TabAppRoute';
+import { CartStore } from './store';
+import { getCartCount } from './store/Selectors';
+import { CartModal } from './components/CartModal';
+
+interface MainTabsProps {}
+
+const DemoReactShop: React.FC<MainTabsProps> = () => {
+  const cartCount = useStoreState(CartStore, getCartCount);
+  const [selected, setSelected] = useState('tab0');
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  const handleClick = (tab) => {
+    tab === 'tabCart' ? setOpen(true) : setSelected(tab);
+  };
+
+  return (
+    <IonTabs>
+      <IonRouterOutlet ref={ref}>
+        {ReactShopPages.map((page, index) => (
+          <Route
+            key={`route_${index}`}
+            exact={true}
+            path={`/demo-react-shop${page.href}`}
+            component={page.component}
+          />
+        ))}
+
+        {/*
+        <Route exact path="/demo-react-shop">
+          <Redirect to={ReactShopPages.filter((p) => p.default)[0].href} />
+        </Route>
+        */}
+        <Redirect exact path="/demo-react-shop" to="/demo-react-shop/categories" />
+      </IonRouterOutlet>
+      {/*  */}
+
+      <IonTabBar slot="bottom">
+        {ReactShopPages.map((page, index) => {
+          const isSelected = selected === `tab${index}`;
+
+          if (page.isTab) {
+            return (
+              <IonTabButton
+                key={`tab${index}`}
+                tab={`tab${index}`}
+                href={`/demo-react-shop${page.href}`}
+              >
+                <IonIcon icon={page.icon} />
+                {isSelected && <div className="tab-dot" />}
+              </IonTabButton>
+            );
+          } else return null;
+        })}
+
+        <IonTabButton tab="tabCart">
+          <IonIcon icon={cartOutline} />
+          <div className="cart-count">{cartCount}</div>
+        </IonTabButton>
+      </IonTabBar>
+
+      {/* <IonModal presentingElement={ref.current} isOpen={open} onDidDismiss={() => setOpen(false)}> */}
+      {/* <CartModal close={() => setOpen(false)} /> */}
+      {/* </IonModal> */}
+    </IonTabs>
+  );
+};
+
+export default DemoReactShop;
+
+import { cartOutline, heartOutline, homeOutline, shirtOutline } from 'ionicons/icons';
+
+import Categories from './Categories';
+import Favourites from './Favourites';
+import ProductType from './ProductType';
+import Category from './Category';
+import { useStoreState } from 'pullstate';
+
+export const ReactShopPages = [
+  {
+    href: '/categories',
+    icon: shirtOutline,
+    component: Categories,
+    default: true,
+    isTab: true,
+  },
+  {
+    href: '/categories/:category/:type',
+    component: ProductType,
+    default: false,
+    isTab: false,
+  },
+  {
+    href: '/categories/:category',
+    icon: shirtOutline,
+    component: Category,
+    default: true,
+    isTab: false,
+  },
+  {
+    href: '/favourites',
+    icon: heartOutline,
+    component: Favourites,
+    default: false,
+    isTab: true,
+  },
+];