update,

01_Requirements/REQ0050/references/ionic-react-whatsapp-clone-main/src/pages/Chat.js

@@ -77,12 +77,12 @@ const Chat = () => {
   const [toastMessage, setToastMessage] = useState("");
 
   //  Refs
-  const contentRef = useRef();
+  const contentRef = useRef(null);
   const swiperRefs = useRef([]);
-  const textareaRef = useRef();
-  const sideRef = useRef();
-  const sendRef = useRef();
-  const replyToAnimationRef = useRef();
+  const textareaRef = useRef(null);
+  const sideRef = useRef(null);
+  const sendRef = useRef(null);
+  const replyToAnimationRef = useRef(null);
 
   const actionSheetButtons = [
     {
@@ -104,7 +104,7 @@ const Chat = () => {
           icon: alertOutline,
           handler: () =>
             toaster(
-              "I haven't implemented unsend :) Simple store update though",
+              "I haven't implemented unsend :) Simple store update though"
             ),
         },
     {
@@ -165,11 +165,11 @@ const Chat = () => {
     const chatMessageID = elementID.includes("chatText")
       ? parseInt(elementID.replace("chatText_", ""))
       : elementID.includes("chatTime")
-        ? parseInt(elementID.replace("chatTime_", ""))
-        : parseInt(elementID.replace("chatBubble_", ""));
+      ? parseInt(elementID.replace("chatTime_", ""))
+      : parseInt(elementID.replace("chatBubble_", ""));
 
     const chatMessage = chat.filter(
-      (message) => parseInt(message.id) === parseInt(chatMessageID),
+      (message) => parseInt(message.id) === parseInt(chatMessageID)
     )[0];
 
     setActionMessage(chatMessage);
@@ -278,7 +278,7 @@ const Chat = () => {
         replyToMessage,
         replyToMessage ? replyToMessage.id : false,
         image,
-        imagePath,
+        imagePath
       );
       setMessage("");
 
@@ -329,7 +329,7 @@ const Chat = () => {
               fill="clear"
               onClick={() =>
                 toaster(
-                  "As this is a UI only, video calling wouldn't work here.",
+                  "As this is a UI only, video calling wouldn't work here."
                 )
               }
             >
@@ -352,7 +352,7 @@ const Chat = () => {
         {chat.map((message, index) => {
           const repliedMessage = chat.filter(
             (subMessage) =>
-              parseInt(subMessage.id) === parseInt(message.replyID),
+              parseInt(subMessage.id) === parseInt(message.replyID)
           )[0];
 
           return (
@@ -360,7 +360,9 @@ const Chat = () => {
               ref={(ref) => (swiperRefs.current[index] = ref)}
               id={`chatBubble_${message.id}`}
               key={index}
-              className={`chat-bubble ${message.sent ? "bubble-sent" : "bubble-received"}`}
+              className={`chat-bubble ${
+                message.sent ? "bubble-sent" : "bubble-received"
+              }`}
               {...longPressEvent}
             >
               <div id={`chatText_${message.id}`}>

01_Requirements/REQ0050/references/ionic-react-whatsapp-clone-main/src/pages/Chats.js

@@ -22,7 +22,7 @@ import { useRef } from "react";
 import ContactModal from "../components/ContactModal";
 
 const Chats = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const contacts = ContactStore.useState(getContacts);
   const latestChats = ChatStore.useState(getChats);
 
@@ -43,7 +43,7 @@ const Chats = () => {
         contacts
           .filter((c) => c.id === chat.contact_id)[0]
           .name.toLowerCase()
-          .includes(searchTermLower),
+          .includes(searchTermLower)
       );
       setResults(newResults);
     } else {

03_source/mobile/.prettierrc

@@ -3,5 +3,28 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
-  "printWidth": 100
-}
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": "src/App.tsx",
+      "options": {
+        "printWidth": 160
+      }
+    },
+    {
+      "files": "src/routes/*",
+      "options": {
+        "printWidth": 160
+      }
+    },
+    {
+      "files": [
+        "*.html",
+        "legacy/**/*.js"
+      ],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

03_source/mobile/package.json

@@ -18,6 +18,7 @@
     "@hookform/resolvers": "^4.1.3",
     "@ionic/react": "^8.5.0",
     "@ionic/react-router": "^8.5.0",
+    "@ionic/storage": "^4.0.0",
     "@mdx-js/react": "^3.1.0",
     "@react-hook/window-size": "^3.1.1",
     "@types/leaflet": "^1.9.17",
@@ -29,10 +30,12 @@
     "pigeon-maps": "^0.22.1",
     "pullstate": "^1",
     "react": "19.0.0",
+    "react-canvas-draw": "^1.2.1",
     "react-color": "^2.19.3",
     "react-confetti": "^6.4.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.55.0",
+    "react-iconly": "^2.2.10",
     "react-leaflet": "^5.0.0",
     "react-markdown": "^10.1.0",
     "react-qr-code": "^2.0.15",

03_source/mobile/public/assets/DemoReactAddToCart/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoReactLogin/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoReactProfileDashboardUi/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/blue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "blue",
+	"tab_bar_background_color": "blue",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/coffeebrown.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#5f361e",
+	"tab_bar_background_color": "#5f361e",
+    "toolbar_color": "#d1bfb5",
+	"tab_bar_color": "#886551",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#5f361e",
+    "light_color": "#886551",
+    
+    "main_color_tint": "#855a41",
+    "main_color_shade": "#57331e",
+
+    "light_color_tint": "#9c7d6b",
+    "light_color_shade": "#61412f"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/earthytones.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c4b0c4",
+	"tab_bar_background_color": "#c4b0c4",
+    "toolbar_color": "#5c4153",
+	"tab_bar_color": "#917788",
+    "tab_bar_activated_color": "#5c4153",
+    
+    "main_color": "#5c4153",
+    "light_color": "#917788",
+    
+    "main_color_tint": "#6b5463",
+    "main_color_shade": "#4d3545",
+
+    "light_color_tint": "#a893a1",
+    "light_color_shade": "#74606d"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/fireyred.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c93608",
+	"tab_bar_background_color": "#c93608",
+    "toolbar_color": "",
+	"tab_bar_color": "#852506",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#c93608",
+    "light_color": "#c95834",
+    
+    "main_color_tint": "#aa614a",
+    "main_color_shade": "#692611",
+
+    "light_color_tint": "#d67151",
+    "light_color_shade": "#a85439"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/green.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "green",
+	"tab_bar_background_color": "green",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/leafygreen.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#336b36",
+	"tab_bar_background_color": "#336b36",
+    "toolbar_color": "white",
+	"tab_bar_color": "#1c421d",
+    "tab_bar_activated_color": "white",
+    
+    "main_color": "#336b36",
+    "light_color": "#517953",
+    
+    "main_color_tint": "#497a4b",
+    "main_color_shade": "#305832",
+
+    "light_color_tint": "#738574",
+    "light_color_shade": "#485849"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/moodyblue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#7baec7",
+	"tab_bar_background_color": "#7baec7",
+    "toolbar_color": "",
+	"tab_bar_color": "#49758b",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#7baec7",
+    "light_color": "#90bbcf",
+    
+    "main_color_tint": "#96c0d5",
+    "main_color_shade": "#6b93a7",
+
+    "light_color_tint": "#c3e2f1",
+    "light_color_shade": "#89aec0"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/peelyorange.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#fd8f38",
+	"tab_bar_background_color": "#fd8f38",
+    "toolbar_color": "#815208",
+	"tab_bar_color": "#ffb67c",
+    "tab_bar_activated_color": "#815208",
+    
+    "main_color": "#e49200",
+    "light_color": "#ffb67c",
+    
+    "main_color_tint": "#e6ae4b",
+    "main_color_shade": "#b4780c",
+
+    "light_color_tint": "#fad4b6",
+    "light_color_shade": "#ff9c4e"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/red.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "red",
+	"tab_bar_background_color": "red",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/blue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "blue",
+	"tab_bar_background_color": "blue",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/coffeebrown.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#5f361e",
+	"tab_bar_background_color": "#5f361e",
+    "toolbar_color": "#d1bfb5",
+	"tab_bar_color": "#886551",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#5f361e",
+    "light_color": "#886551",
+    
+    "main_color_tint": "#855a41",
+    "main_color_shade": "#57331e",
+
+    "light_color_tint": "#9c7d6b",
+    "light_color_shade": "#61412f"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/earthytones.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c4b0c4",
+	"tab_bar_background_color": "#c4b0c4",
+    "toolbar_color": "#5c4153",
+	"tab_bar_color": "#917788",
+    "tab_bar_activated_color": "#5c4153",
+    
+    "main_color": "#5c4153",
+    "light_color": "#917788",
+    
+    "main_color_tint": "#6b5463",
+    "main_color_shade": "#4d3545",
+
+    "light_color_tint": "#a893a1",
+    "light_color_shade": "#74606d"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/fireyred.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c93608",
+	"tab_bar_background_color": "#c93608",
+    "toolbar_color": "",
+	"tab_bar_color": "#852506",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#c93608",
+    "light_color": "#c95834",
+    
+    "main_color_tint": "#aa614a",
+    "main_color_shade": "#692611",
+
+    "light_color_tint": "#d67151",
+    "light_color_shade": "#a85439"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/green.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "green",
+	"tab_bar_background_color": "green",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/leafygreen.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#336b36",
+	"tab_bar_background_color": "#336b36",
+    "toolbar_color": "white",
+	"tab_bar_color": "#1c421d",
+    "tab_bar_activated_color": "white",
+    
+    "main_color": "#336b36",
+    "light_color": "#517953",
+    
+    "main_color_tint": "#497a4b",
+    "main_color_shade": "#305832",
+
+    "light_color_tint": "#738574",
+    "light_color_shade": "#485849"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/moodyblue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#7baec7",
+	"tab_bar_background_color": "#7baec7",
+    "toolbar_color": "",
+	"tab_bar_color": "#49758b",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#7baec7",
+    "light_color": "#90bbcf",
+    
+    "main_color_tint": "#96c0d5",
+    "main_color_shade": "#6b93a7",
+
+    "light_color_tint": "#c3e2f1",
+    "light_color_shade": "#89aec0"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/peelyorange.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#fd8f38",
+	"tab_bar_background_color": "#fd8f38",
+    "toolbar_color": "#815208",
+	"tab_bar_color": "#ffb67c",
+    "tab_bar_activated_color": "#815208",
+    
+    "main_color": "#e49200",
+    "light_color": "#ffb67c",
+    
+    "main_color_tint": "#e6ae4b",
+    "main_color_shade": "#b4780c",
+
+    "light_color_tint": "#fad4b6",
+    "light_color_shade": "#ff9c4e"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/red.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "red",
+	"tab_bar_background_color": "red",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoSkeletonText/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/src/App.tsx

@@ -54,49 +54,34 @@ import Tutorial from './pages/Tutorial';
 import HomeOrTutorial from './components/HomeOrTutorial';
 import { Schedule } from './models/Schedule';
 import RedirectToLogin from './components/RedirectToLogin';
-import EventDetail from './pages/EventDetail';
-import EventList from './pages/EventList';
-import MemberProfile from './pages/MemberProfile';
-import Settings from './pages/Settings';
-import NotImplemented from './pages/NotImplemented';
-import ChangeLanguage from './pages/ChangeLanguage';
-import ServiceAgreement from './pages/ServiceAgreement';
-import paths from './paths';
-import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
 //
 // TODO: resume DemoReactShop
 // import DemoReactShop from './pages/DemoReactShop';
-import DemoWeatherApp from './pages/DemoWeatherApp';
-import DemoClubHouse from './pages/DemoClubHouse';
-import DemoScoreBoard from './pages/DemoScoreBoard';
-import DemoQuoteApp from './pages/DemoQuoteApp';
-import DemoQrScanner from './pages/DemoQrScanner';
+
+// TODO: remove obsoleted DemoWeatherApp
+// import DemoWeatherApp from './pages/DemoWeatherApp';
+
 // DemoShopAppUi
-import DemoShopAppUi from './pages/DemoShopAppUi';
 // DemoDictionaryApp
-import DemoDictionaryApp from './pages/DemoDictionaryApp';
 // demo-recipe-app
-import DemoRecipeApp from './pages/DemoRecipeApp';
 
 // DemoSlidingProfile
-import DemoSlidingProfile from './pages/DemoSlidingProfile';
 
 // DemoQuizApp
-import DemoQuizApp from './pages/DemoQuizApp';
-import DemoBlogPostUi from './pages/DemoBlogPostUi';
-import DemoReactTravelApp from './pages/DemoReactTravelApp';
-import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
-import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
-import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
-import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
-import DemoReactPollApp from './pages/DemoReactPollApp';
-import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
-import Demo2FaExample from './pages/Demo2FaExample';
-import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
-import DemoBankingUi from './pages/DemoBankingUi';
-import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
-import DemoColorTutorial from './pages/DemoColorTutorial';
+
+//
+// import DemoReactMarvelApp from './pages/DemoReactMarvelApp';
+// import DemoReactOnboardingUI from './pages/DemoReactOnboardingUI';
+// import DemoReactTabsMenusCustom from './pages/DemoReactTabsMenusCustom';
+// import DemoReactThemeSwitcher from './pages/DemoReactThemeSwitcher';
+// import DemoSkeletonText from './pages/DemoSkeletonText';
+// import DemoStickyBottomSheetExample from './pages/DemoStickyBottomSheetExample';
+// import DemoStorageExample from './pages/DemoStorageExample';
+// import DemoSwiperjsTutorial from './pages/DemoSwiperjsTutorial';
+// TODO: SCSS of this directory will alter the main page
+import AppDemoRoute from './routes/DemoRoute';
+import Settings from './pages/Settings';
 
 setupIonicReact();
 
@@ -122,14 +107,7 @@ interface DispatchProps {
 
 interface IonicAppProps extends StateProps, DispatchProps {}
 
-const IonicApp: React.FC<IonicAppProps> = ({
-  darkMode,
-  schedule,
-  setIsLoggedIn,
-  setUsername,
-  loadConfData,
-  loadUserData,
-}) => {
+const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
   useEffect(() => {
     loadUserData();
     loadConfData();
@@ -153,98 +131,28 @@ const IonicApp: React.FC<IonicAppProps> = ({
             <AppRoute />
 
             <Route path="/tabs" render={() => <MainTabs />} />
-            <Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
+
+            <AppDemoRoute />
+
             {/*  */}
 
-            <Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-
-            <Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
-            <Route
-              path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
-              render={() => <DemoCapacitorGoogleMapsTutorial />}
-            />
-
-            <Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />
-
-            {/*
-              <Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
-              <Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
-              <Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
-              <Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
-              <Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
-              <Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
-              <Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
-              <Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
-              <Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
-              <Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
-              <Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
-              <Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
-              <Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
-              <Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
-              <Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
-              <Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
-              <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
-              <Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
-              <Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
-              <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
-              <Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
-              <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
-              <Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
-              <Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
-              <Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
-              <Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
-              <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
-              <Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
-              <Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
-              <Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
-              <Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
-              <Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
-               */}
-
-            <Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />
-
-            {/* have problemx` */}
-            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
-
-            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
-
-            <Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
-            <Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
-            <Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
-            <Route
-              path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
-              render={() => <DemoPinterestFloatingTabBar />}
-            />
-            <Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
-            <Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
-            <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 />} />
+            {/* TODO: need update to @capacitor/barcode-scanner */}
+            {/* <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQrCode />} /> */}
 
             {/* 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 />} />
-            <Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
-            <Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
-            <Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
-            <Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
+            {/* have problemx` */}
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
+
+            {/* TODO: scss will alter the main page,   */}
+            {/* <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} /> */}
+
+            {/* TODO: update ionslide */}
+            {/* <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} /> */}
+
+            {/* TODO: place a whatsapp clone */}
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
 
             <Route path="/account" component={Account} />
             <Route path="/login" component={Login} />
@@ -253,6 +161,7 @@ const IonicApp: React.FC<IonicAppProps> = ({
             <Route path="/signup" component={Signup} />
             <Route path="/support" component={Support} />
             <Route path="/tutorial" component={Tutorial} />
+            <Route path="/settings" component={Settings} />
 
             <Route
               path="/logout"

03_source/mobile/src/AppRoute.tsx

@@ -6,7 +6,7 @@ import { Route } from 'react-router';
 import NotImplemented from './pages/NotImplemented';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
-import paths from './paths';
+import PATHS from './PATHS';
 import Settings from './pages/Settings';
 import ChangeLanguage from './pages/ChangeLanguage';
 import ServiceAgreement from './pages/ServiceAgreement';
@@ -28,10 +28,10 @@ const AppRoute: React.FC = () => {
       {/* <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} /> */}
 
       {/*  */}
-      <Route exact={true} path={paths.SETTINGS} component={Settings} />
-      <Route exact={true} path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
-      <Route exact={true} path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
-      <Route exact={true} path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
+      <Route exact={true} path={PATHS.SETTINGS} component={Settings} />
+      <Route exact={true} path={PATHS.CHANGE_LANGUAGE} component={ChangeLanguage} />
+      <Route exact={true} path={PATHS.SERVICE_AGREEMENT} component={ServiceAgreement} />
+      <Route exact={true} path={PATHS.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
     </>
   );
 };

03_source/mobile/src/PATHS.ts

@@ -0,0 +1,81 @@
+const PATHS = {
+  NOT_IMPLEMENTED: '/not_implemented',
+  SETTINGS: '/settings',
+  CHANGE_LANGUAGE: '/change_language',
+  SERVICE_AGREEMENT: '/service_agreement',
+  PRIVACY_AGREEMENT: '/privacy_agreement',
+  SIGN_IN: '/mylogin',
+  //
+  ORDER_DETAIL: '/order_detail/:id',
+  getOrderDetail: (id: string) => `/order_detail/${id}`,
+  //
+  TAB_NOT_IMPLEMENTED: '/tabs/not_implemented',
+  EVENT_LIST: `/tabs/events`,
+  MESSAGE_LIST: `/tabs/messages`,
+  NEARBY_LIST: '/tabs/nearby',
+  ORDERS_LIST: '/tabs/orders',
+  FAVOURITES_LIST: `/tabs/favourites`,
+  PROFILE: '/tabs/my_profile',
+
+  //
+  // DEMO_WEATHER_APP: '/demo-weather-app',
+  DEMO_WEATHER_APP_UI: '/demo-weather-app-ui',
+  //
+
+  DEMO_2FA_EXAMPLE: '/demo-2fa-example',
+  DEMO_ACCORDION_TUTORIAL: '/demo-accordion-tutorial',
+  DEMO_BANKING_UI: '/demo-banking-ui',
+  DEMO_BLOG_POST_UI: '/demo-blog-post-ui',
+  DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL: '/demo-capacitor-google-maps-tutorial',
+  DEMO_CLUB_HOUSE: '/demo-club-house',
+  DEMO_COLOR_TUTORIAL: '/demo-color-tutorial',
+  DEMO_DICTIONARY_APP: '/demo-dictionary-app',
+  DEMO_ECOMMERCE_EXAMPLE: '/demo-ecommerce-example',
+  DEMO_FACEBOOK_CLONE: '/demo-facebook-clone',
+  DEMO_FAST_FOOD_APP: '/demo-fast-food-app',
+  DEMO_FLOATING_TABS: '/demo-floating-tabs',
+  DEMO_INSTAGRAM_CLONE: '/demo-instagram-clone',
+  DEMO_KANBAN_BOARD: '/demo-kanban-board',
+  DEMO_ORDERING_APP: '/demo-ordering-app',
+  DEMO_PAGE: '/tabs/demo-list',
+  DEMO_PINTEREST_FLOATING_TAB_BAR: '/demo-pinterest-floating-tab-bar',
+  DEMO_PROFILE_EXAMPLE: '/demo-profile-example',
+  DEMO_PULLSTATE_TUTORIAL: '/demo-pullstate-tutorial',
+  DEMO_QUIZ_APP: '/demo-quiz-app',
+  DEMO_QUOTE_APP: '/demo-quote-app',
+  DEMO_REACT_ADD_TO_CART: '/demo-react-add-to-cart',
+  DEMO_REACT_CALCULATOR: '/demo-react-calculator',
+  DEMO_REACT_DRAWING_CANVAS: '/demo-react-drawing-canvas',
+  DEMO_REACT_HOOK_FORM_EXAMPLE: '/demo-react-hook-form-example',
+  DEMO_REACT_ITEM_LIST: '/demo-react-item-list',
+  DEMO_REACT_LIFECYCLES: '/demo-react-lifecycles',
+  DEMO_REACT_LOGIN: '/demo-react-login',
+  DEMO_REACT_MARVEL_APP: '/demo-react-marvel-app',
+  DEMO_REACT_MOVIE_APP_WITH_ALGOLIA: '/demo-react-movie-app-with-algolia',
+  DEMO_REACT_NOTES: '/demo-react-notes',
+  DEMO_REACT_ONBOARDING_UI: '/demo-react-onboarding-ui',
+  DEMO_REACT_OVERLAY_HOOKS: '/demo-react-overlay-hooks',
+  DEMO_REACT_POLL_APP: '/demo-react-poll-app',
+  DEMO_REACT_PROFILE_DASHBOARD_UI: '/demo-react-profile-dashboard-ui',
+
+  DEMO_REACT_QR_CODE: '/demo-react-qr-code',
+  DEMO_QR_SCANNER: '/demo-qr-scanner',
+
+  DEMO_REACT_QUOTES: '/demo-react-quotes',
+  DEMO_REACT_SHOP_UI: '/demo-react-shop-ui',
+  DEMO_REACT_SHOP: '/demo-react-shop',
+  DEMO_REACT_SWITCH_TABS: '/demo-react-switch-tabs',
+  DEMO_REACT_TABS_MENUS_CUSTOM: '/demo-react-tabs-menus-custom',
+  DEMO_REACT_THEME_SWITCHER: '/demo-react-theme-switcher',
+  DEMO_REACT_TRAVEL_APP: '/demo-react-travel-app',
+  DEMO_REACT_WHATSAPP_CLONE: '/demo-react-whatsapp-clone',
+  DEMO_RECIPE_APP: '/demo-recipe-app',
+  DEMO_RESTAURANT_FINDER: '/demo-restaurant-finder',
+  DEMO_SCORE_BOARD: '/demo-score-board',
+  DEMO_SHOP_APP_UI: '/demo-shop-app-ui',
+  DEMO_SKELETON_TEXT: '/demo-skeleton-text',
+  DEMO_SLIDING_PROFILE: '/demo-sliding-profile',
+  DEMO_STICKY_BOTTOM_SHEET_EXAMPLE: '/demo-sticky-bottom-sheet-example',
+  DEMO_STORAGE_EXAMPLE: '/demo-storage-example',
+};
+export default PATHS;

03_source/mobile/src/TabAppRoute.tsx

@@ -2,7 +2,7 @@ import { Route } from 'react-router';
 import NotImplemented from './pages/NotImplemented';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
-import paths from './paths';
+import PATHS from './PATHS';
 import MembersNearByList from './pages/MembersNearByList';
 import OrderList from './pages/OrderList';
 import MessageList from './pages/MessageList';
@@ -17,25 +17,25 @@ import DemoList from './pages/DemoList';
 const TabAppRoute: React.FC = () => {
   return (
     <>
-      <Route path={paths.TAB_NOT_IMPLEMENTED} component={NotImplemented} />
+      <Route path={PATHS.TAB_NOT_IMPLEMENTED} component={NotImplemented} />
 
       {/*  */}
-      <Route path={paths.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
+      <Route path={PATHS.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.ORDERS_LIST} render={() => <OrderList />} exact={true} />
+      <Route path={PATHS.ORDERS_LIST} render={() => <OrderList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
+      <Route path={PATHS.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
+      <Route path={PATHS.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
 
       {/*  */}
-      <Route path={paths.EVENT_LIST} render={() => <EventList />} exact={true} />
+      <Route path={PATHS.EVENT_LIST} render={() => <EventList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.PROFILE} render={() => <MyProfile />} exact={true} />
+      <Route path={PATHS.PROFILE} render={() => <MyProfile />} exact={true} />
 
       {/*  */}
       <Route path="/tabs/demo-list" render={() => <DemoList />} exact={true} />

03_source/mobile/src/context/jwt/utils.tsx

@@ -3,7 +3,7 @@
 import axios from '../../lib/axios';
 
 import { JWT_STORAGE_KEY } from './constant.js';
-import paths from '../../paths.js';
+import PATHS from '../../PATHS.js';
 
 // ----------------------------------------------------------------------
 
@@ -60,7 +60,7 @@ export function tokenExpired(exp: number) {
     try {
       alert('Token expired!');
       sessionStorage.removeItem(JWT_STORAGE_KEY);
-      window.location.href = paths.SIGN_IN;
+      window.location.href = PATHS.SIGN_IN;
     } catch (error) {
       console.error('Error during token expiration:', error);
       throw error;

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

@@ -1,62 +0,0 @@
-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);
-
-  const properties = {
-    wind: {
-      isIcon: false,
-      icon: '/assets/WeatherDemo/wind.png',
-      alt: 'wind',
-      label: 'Wind',
-      value: `${currentWeather.current.wind_mph}mph`,
-    },
-    feelsLike: {
-      isIcon: true,
-      icon: thermometerOutline,
-      alt: 'feels like',
-      label: 'Feels like',
-      value: `${currentWeather.current.feelslike_c}°C`,
-    },
-    indexUV: {
-      isIcon: true,
-      icon: sunnyOutline,
-      alt: 'index uv',
-      label: 'Index UV',
-      value: currentWeather.current.uv,
-    },
-    pressure: {
-      isIcon: true,
-      icon: pulseOutline,
-      alt: 'pressure',
-      label: 'Pressure',
-      value: `${currentWeather.current.pressure_mb} mbar`,
-    },
-  };
-
-  useEffect(() => {
-    setProperty(properties[type]);
-  }, [type]);
-
-  return (
-    <IonCol size="6">
-      <IonRow className="ion-justify-content-center ion-align-items-center">
-        <IonCol size="3">
-          {!property.isIcon && (
-            <img alt={property.alt} src={property.icon} height="32" width="32" />
-          )}
-          {property.isIcon && (
-            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
-          )}
-        </IonCol>
-
-        <IonCol size="9">
-          <IonCardSubtitle>{property.label}</IonCardSubtitle>
-          <IonNote>{property.value}</IonNote>
-        </IonCol>
-      </IonRow>
-    </IonCol>
-  );
-};

03_source/mobile/src/pages/DemoReactQrCode/TestComponents/CurrentWeather/index.tsx

@@ -1,48 +0,0 @@
-import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
-import { WeatherProperty } from './WeatherProperty';
-
-export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            {currentWeather.location.region},{' '}
-            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <img
-            alt="condition"
-            src={currentWeather.current.condition.icon.replace('//', 'https://')}
-          />
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          {currentWeather.current.temp_c}&#8451;
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <WeatherProperty type="wind" currentWeather={currentWeather} />
-            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
-            <WeatherProperty type="pressure" currentWeather={currentWeather} />
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);

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

@@ -1,117 +0,0 @@
-import {
-  IonCard,
-  IonCardContent,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonCol,
-  IonGrid,
-  IonIcon,
-  IonNote,
-  IonRow,
-  IonSkeletonText,
-  IonText,
-  IonThumbnail,
-} from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-
-export const SkeletonDashboard = () => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <IonThumbnail>
-            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
-          </IonThumbnail>
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Wind</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Feels like</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Index UV</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Pressure</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);

03_source/mobile/src/pages/DemoReactQrCode/components/CurrentWeather/WeatherProperty.tsx

@@ -1,62 +0,0 @@
-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);
-
-  const properties = {
-    wind: {
-      isIcon: false,
-      icon: '/assets/WeatherDemo/wind.png',
-      alt: 'wind',
-      label: 'Wind',
-      value: `${currentWeather.current.wind_mph}mph`,
-    },
-    feelsLike: {
-      isIcon: true,
-      icon: thermometerOutline,
-      alt: 'feels like',
-      label: 'Feels like',
-      value: `${currentWeather.current.feelslike_c}°C`,
-    },
-    indexUV: {
-      isIcon: true,
-      icon: sunnyOutline,
-      alt: 'index uv',
-      label: 'Index UV',
-      value: currentWeather.current.uv,
-    },
-    pressure: {
-      isIcon: true,
-      icon: pulseOutline,
-      alt: 'pressure',
-      label: 'Pressure',
-      value: `${currentWeather.current.pressure_mb} mbar`,
-    },
-  };
-
-  useEffect(() => {
-    setProperty(properties[type]);
-  }, [type]);
-
-  return (
-    <IonCol size="6">
-      <IonRow className="ion-justify-content-center ion-align-items-center">
-        <IonCol size="3">
-          {!property.isIcon && (
-            <img alt={property.alt} src={property.icon} height="32" width="32" />
-          )}
-          {property.isIcon && (
-            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
-          )}
-        </IonCol>
-
-        <IonCol size="9">
-          <IonCardSubtitle>{property.label}</IonCardSubtitle>
-          <IonNote>{property.value}</IonNote>
-        </IonCol>
-      </IonRow>
-    </IonCol>
-  );
-};

03_source/mobile/src/pages/DemoReactQrCode/components/CurrentWeather/index.tsx

@@ -1,48 +0,0 @@
-import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
-import { WeatherProperty } from './WeatherProperty';
-
-export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            {currentWeather.location.region},{' '}
-            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <img
-            alt="condition"
-            src={currentWeather.current.condition.icon.replace('//', 'https://')}
-          />
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          {currentWeather.current.temp_c}&#8451;
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <WeatherProperty type="wind" currentWeather={currentWeather} />
-            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
-            <WeatherProperty type="pressure" currentWeather={currentWeather} />
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);

03_source/mobile/src/pages/DemoReactQrCode/components/CustomFab.jsx

@@ -1,27 +0,0 @@
-import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
-import { addOutline, cameraOutline, qrCodeOutline } from 'ionicons/icons';
-
-export const CustomFab = ({ start }) => {
-  return (
-    <IonFab
-      vertical="bottom"
-      horizontal="end"
-      slot="fixed"
-      className="ion-padding-bottom ion-padding-end"
-    >
-      <IonFabButton>
-        <IonIcon icon={qrCodeOutline} />
-      </IonFabButton>
-
-      <IonFabList side="top" className="ion-padding-bottom">
-        <IonFabButton color="primary" onClick={start}>
-          <IonIcon icon={cameraOutline} />
-        </IonFabButton>
-
-        <IonFabButton color="primary" routerLink="/demo-qr-scanner/manual">
-          <IonIcon icon={addOutline} />
-        </IonFabButton>
-      </IonFabList>
-    </IonFab>
-  );
-};

03_source/mobile/src/pages/DemoReactQrCode/components/NoQRCodes.jsx

@@ -1,15 +0,0 @@
-import { IonCol, IonRow, IonText } from '@ionic/react';
-
-export const NoQRCodes = () => (
-  <IonRow className="ion-text-center ion-justify-content-center">
-    <IonCol size="9">
-      <h3>It looks like you don't have any QR codes stored.</h3>
-      <img src="/assets/icon2.png" alt="icon" />
-
-      <p>
-        Click the <IonText color="primary">button</IonText> in the bottom right to scan a code or
-        generate a code.
-      </p>
-    </IonCol>
-  </IonRow>
-);

03_source/mobile/src/pages/DemoReactQrCode/components/QRCodeScannedModal.jsx

@@ -1,106 +0,0 @@
-import {
-  IonButton,
-  IonButtons,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardTitle,
-  IonCol,
-  IonContent,
-  IonGrid,
-  IonHeader,
-  IonIcon,
-  IonNote,
-  IonPage,
-  IonRow,
-  IonTitle,
-  IonToolbar,
-  useIonToast,
-} from '@ionic/react';
-import QRCode from 'react-qr-code';
-import { addQRCode } from '../store/QRStore';
-
-import useSound from 'use-sound';
-import closeSound from '../sounds/close.wav';
-import { reloadOutline } from 'ionicons/icons';
-
-export const QRCodeScannedModal = ({ dismiss, code, set, scan }) => {
-  const [play] = useSound(closeSound);
-  const [showToast] = useIonToast();
-
-  const handleDismiss = () => {
-    dismiss();
-    play();
-  };
-
-  const handleScanAgain = () => {
-    handleDismiss();
-
-    setTimeout(() => {
-      scan();
-    }, 10);
-  };
-
-  const handleAdd = async () => {
-    addQRCode(code.text ? code.text : code, true);
-    showToast({
-      header: 'Success!',
-      message: 'QR Code stored successfully.',
-      duration: 3000,
-      color: 'primary',
-    });
-
-    handleDismiss();
-  };
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>View QR Code</IonTitle>
-          <IonButtons slot="end">
-            <IonButton onClick={handleDismiss}>Close</IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
-
-      <IonContent>
-        <IonGrid className="ion-padding-top ion-margin-top">
-          <IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
-            <IonCol size="12">
-              <QRCode value={code.text ? code.text : code} />
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol size="12">
-              <IonCard>
-                <IonCardHeader>
-                  <IonCardTitle>QR Code data</IonCardTitle>
-                  <IonNote>This is what the code represents</IonNote>
-                </IonCardHeader>
-                <IonCardContent>
-                  <p>{code.text ? code.text : code}</p>
-                </IonCardContent>
-              </IonCard>
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol size="6">
-              <IonButton expand="block" fill="outline" onClick={handleScanAgain}>
-                <IonIcon icon={reloadOutline} />
-                &nbsp; Scan again
-              </IonButton>
-            </IonCol>
-            <IonCol size="6">
-              <IonButton expand="block" onClick={handleAdd}>
-                Store &rarr;
-              </IonButton>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonContent>
-    </IonPage>
-  );
-};

03_source/mobile/src/pages/DemoReactQrCode/components/QRWebModal.jsx

@@ -1,45 +0,0 @@
-import {
-  IonButton,
-  IonButtons,
-  IonCol,
-  IonContent,
-  IonGrid,
-  IonHeader,
-  IonPage,
-  IonRow,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/react';
-// import QrReader from "react-qr-reader";
-
-export const QRWebModal = ({ dismiss, set, scan, error }) => {
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Scan QR Code</IonTitle>
-          <IonButtons slot="end">
-            <IonButton onClick={dismiss}>Close</IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
-
-      <IonContent>
-        <IonGrid className="ion-padding-top ion-margin-top">
-          <IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
-            <IonCol size="12">
-              {/*
-              <QrReader
-                  delay={ 500 }
-                  onError={ error }
-                  onScan={ scan }
-                  style={{ width: "100%", height: "100%" }}
-                />
-                */}
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonContent>
-    </IonPage>
-  );
-};

03_source/mobile/src/pages/DemoReactQrCode/components/SkeletonDashboard/index.tsx

@@ -1,117 +0,0 @@
-import {
-  IonCard,
-  IonCardContent,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonCol,
-  IonGrid,
-  IonIcon,
-  IonNote,
-  IonRow,
-  IonSkeletonText,
-  IonText,
-  IonThumbnail,
-} from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-
-export const SkeletonDashboard = () => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <IonThumbnail>
-            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
-          </IonThumbnail>
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Wind</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Feels like</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Index UV</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Pressure</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);

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

@@ -1,32 +0,0 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-
-import { cloudOutline, searchOutline } from 'ionicons/icons';
-import { Route, Redirect } from 'react-router';
-
-// import Tab1 from './AppPages/Tab1';
-// import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
-
-function DemoWeatherAppUi() {
-  return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Route exact path="/demo-react-qr-code/home">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-react-qr-code/manual">
-          <Tab2 />
-        </Route>
-
-        <Route exact path="/demo-react-qr-code/camera">
-          <Tab3 />
-        </Route>
-
-        <Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/home" />
-      </IonRouterOutlet>
-    </IonTabs>
-  );
-}
-
-export default DemoWeatherAppUi;

03_source/mobile/src/pages/DemoReactQrCode/pages/Tab1.jsx

@@ -1,114 +0,0 @@
-import { BarcodeScanner } from '@ionic-native/barcode-scanner';
-import { IonContent, IonGrid, IonHeader, IonPage, IonTitle, IonToolbar, useIonModal, getPlatforms } from '@ionic/react';
-import { useStoreState } from 'pullstate';
-import { useState } from 'react';
-import { useRef } from 'react';
-import useSound from 'use-sound';
-import { CustomFab } from '../components/CustomFab';
-import { NoQRCodes } from '../components/NoQRCodes';
-import { QRCodeList } from '../components/QRCodeList';
-import { QRCodeScannedModal } from '../components/QRCodeScannedModal';
-import { QRStore } from '../store';
-import { getCodes } from '../store/Selectors';
-import './Tab1.css';
-
-import openSound from "../sounds/open.wav";
-import { QRWebModal } from '../components/QRWebModal';
-
-const Tab1 = () => {
-
-  const pageRef = useRef();
-  const codes = useStoreState(QRStore, getCodes);
-  const [ play ] = useSound(openSound);
-
-  const [ QRData, setQRData ] = useState(false);
-
-  const handleScan = data => {
-    
-    if (data) {
-
-      setQRData(data);
-      play();
-      handleSuccess(data);
-    }
-  }
-  
-  const handleError = err => {
-    
-    console.error(err)
-  }
-
-  const start = async () => {
-
-    const platforms = getPlatforms();
-    const isWeb = (platforms.includes("desktop") || platforms.includes("mobileweb") || platforms.includes("pwa"));
-
-    if (!isWeb) {
-      
-      const data = await BarcodeScanner.scan();
-
-      if (data) {
-        handleSuccess(data);
-      }
-    } else {
-
-      presentWebModal({
-
-        presentingElement: pageRef.current
-      });
-    }
-  }
-
-  const handleSuccess = data => {
-
-    setQRData(data);
-    console.log(data);
-    dismissWebModal();
-    
-    play();
-    present({
-
-      presentingElement: pageRef.current
-    });
-  }
-
-  const [ present, dismiss ] = useIonModal(QRCodeScannedModal, {
-
-    dismiss: () => dismiss(),
-    code: QRData,
-    set: () => setQRData(),
-    scan: () => start()
-  });
-
-  const [ presentWebModal, dismissWebModal ] = useIonModal(QRWebModal, {
-
-    dismiss: () => dismissWebModal(),
-    set: () => setQRData(),
-    scan: handleScan,
-    error: handleError
-  });
-
-  return (
-    <IonPage ref={ pageRef }>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>QR Codes</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">QR Codes</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <IonGrid>
-          { codes.length < 1 && <NoQRCodes /> }
-          { codes.length > 0 && <QRCodeList codes={ codes } pageRef={ pageRef } /> }
-        </IonGrid>
-        <CustomFab start={ start } />
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Tab1;

03_source/mobile/src/pages/DemoReactQrCode/pages/Tab2.jsx

@@ -1,105 +0,0 @@
-import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonNote, IonPage, IonRow, IonTextarea, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
-import './Tab2.css';
-
-import QRCode from "react-qr-code";
-import { useState } from 'react';
-import { addQRCode } from '../store/QRStore';
-
-const Tab2 = () => {
-
-  const [ data, setData ] = useState("");
-  const [ showToast ] = useIonToast();
-
-  const handleAdd = async () => {
-
-    if (data === "") {
-
-      showToast({
-
-        header: "Error!",
-        message: "Please enter some data to store.",
-        duration: 3000,
-        color: "danger"
-      });
-    } else {
-
-      addQRCode(data);
-      showToast({
-
-        header: "Success!",
-        message: "QR Code stored successfully.",
-        duration: 3000,
-        color: "primary"
-      });
-
-      setData("");
-    }
-  }
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton text="QR Codes" />
-          </IonButtons>
-          <IonTitle>Generate QR Code</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Generate QR Code</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonGrid>
-
-          <IonRow>
-            <IonCol size="12">
-              <IonItem lines="none">
-                <IonLabel className="ion-text-wrap">
-                  <h1>You can generate a QR code to store or share with friends.</h1>
-                  <p>You'll see a live preview of the QR Code</p>
-                </IonLabel>
-              </IonItem>
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol size="12">
-              <IonItem>
-                <IonLabel position="stacked">Data to store</IonLabel>
-                <IonTextarea rows="3" placeholder="Enter a URL or secret information" type="text" inputmode="text" value={ data } onIonChange={ e => setData(e.target.value) } />
-              </IonItem>
-            </IonCol>
-          </IonRow>
-
-          <IonRow className="ion-text-center ion-margin-top">
-            <IonCol size="12">
-              { data !== "" ? <QRCode value={ data } /> : <img src="/assets/placeholder2.png" alt="placeholder qr" height="256" /> }
-            </IonCol>
-          </IonRow>
-
-          <IonRow className="ion-text-center ion-justify-content-center">
-            <IonCol size="10">
-              <IonItem lines="none">
-                <IonLabel className="ion-text-wrap ion-text-center">
-                  <p>When you're ready, you can store the generated QR Code</p>
-                </IonLabel>
-              </IonItem>
-            </IonCol>
-          </IonRow>
-
-          <IonRow>
-            <IonCol size="12">
-              <IonButton expand="block" onClick={ handleAdd }>Store &rarr;</IonButton>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Tab2;

03_source/mobile/src/pages/DemoReactQrCode/pages/Tab3.jsx

@@ -1,102 +0,0 @@
-import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonNote, IonPage, IonRow, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
-import './Tab3.css';
-import { useState } from 'react';
-
-import { BarcodeScanner } from "@ionic-native/barcode-scanner";
-import QRCode from 'react-qr-code';
-import { addQRCode } from '../store/QRStore';
-import { reloadOutline } from 'ionicons/icons';
-
-const Tab3 = () => {
-
-  const [ QRData, setQRData ] = useState(false);
-
-  const start = async () => {
-
-    const data = await BarcodeScanner.scan();
-    setQRData(data);
-  }
-
-  const [ showToast ] = useIonToast();
-
-  const handleAdd = async () => {
-
-      addQRCode(QRData.text, true);
-      showToast({
-
-        header: "Success!",
-        message: "QR Code stored successfully.",
-        duration: 3000,
-        color: "primary"
-      });
-
-      setQRData(false);
-  }
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton text="QR Codes" />
-          </IonButtons>
-          <IonTitle>Scan QR Code</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Scan QR Code</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonGrid>
-          { !QRData &&
-            <IonRow>
-              <IonCol size="12">
-                <IonButton expand="block" onClick={ start }>Scan &rarr;</IonButton>
-              </IonCol>
-            </IonRow>
-          }
-
-          { QRData && 
-            <>
-              <IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
-                <IonCol size="12">
-                  <QRCode value={ QRData.text } />
-                </IonCol>
-              </IonRow>
-
-              <IonRow>
-                <IonCol size="12">
-                  <IonCard>
-                    <IonCardHeader>
-                      <IonCardTitle>QR Code data</IonCardTitle>
-                      <IonNote>This is what the code represents</IonNote>
-                    </IonCardHeader>
-                    <IonCardContent>
-                      <p>{ QRData.text }</p>
-                    </IonCardContent>
-                  </IonCard>
-                </IonCol>
-              </IonRow>
-
-              <IonRow>
-                <IonCol size="6">
-                  <IonButton expand="block" fill="outline" onClick={ start }>
-                    <IonIcon icon={ reloadOutline } />&nbsp;
-                    Scan again</IonButton>
-                </IonCol>
-                <IonCol size="6">
-                  <IonButton expand="block" onClick={ handleAdd }>Store &rarr;</IonButton>
-                </IonCol>
-              </IonRow>
-            </>
-          }
-        </IonGrid>
-      </IonContent>
-    </IonPage>
-  );
-};
-
-export default Tab3;

03_source/mobile/src/pages/DemoReactQrCode/store/QRStore.js

@@ -1,19 +0,0 @@
-import { Store } from 'pullstate';
-
-const QRStore = new Store({
-  codes: [],
-});
-
-export default QRStore;
-
-export const addQRCode = (data, scanned = false) => {
-  QRStore.update((s) => {
-    s.codes = [...s.codes, { id: new Date(), data, scanned }];
-  });
-};
-
-export const removeQRCode = (id) => {
-  QRStore.update((s) => {
-    s.codes = s.codes.filter((code) => code.id !== id);
-  });
-};

03_source/mobile/src/pages/DemoReactQrCode/store/Selectors.js

@@ -1,6 +0,0 @@
-import { createSelector } from 'reselect';
-
-const getState = (state) => state;
-
-//  General getters
-export const getCodes = createSelector(getState, (state) => state.codes);

03_source/mobile/src/pages/DemoReactQrCode/store/index.js

@@ -1 +0,0 @@
-export { default as QRStore } from './QRStore';

03_source/mobile/src/pages/DemoReactQrCode/style.scss

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

03_source/mobile/src/pages/DemoReactQrCode/theme/custom-tab-bar.scss

@@ -1,30 +0,0 @@
-:root {
-
-    /* --ion-background-color: white; */
-    --ion-tab-bar-color: rgb(76, 112, 141);
-    --ion-tab-bar-color-selected: white;
-}
-
-ion-tab-bar {
-
-	--background: rgb(1, 72, 131);
-	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
-	border-radius: 50px !important;
-
-	height: 50px;
-	width: 40%;
-	padding-top: 5px;
-	padding-bottom: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-
-	bottom: 24px;
-	position: relative;
-	margin: 0 auto !important;
-	border-top: none;
-}
-
-ion-tab-button {
-
-    border-radius: 16px !important;
-}

03_source/mobile/src/pages/DemoReactShopUi/components/AddToCartButton.jsx

@@ -0,0 +1,58 @@
+import { CreateAnimation, IonButton, IonIcon } from "@ionic/react";
+import { cartOutline } from "ionicons/icons";
+import { useRef, useState } from "react";
+import { addToCart } from "../store/CartStore";
+
+export const AddToCartButton = ({product}) => {
+
+	const animationRef = useRef();
+	const [hidden, setHidden] = useState(true);
+
+	const floatStyle = {
+
+		display: hidden ? "none" : "",
+		position: "absolute"
+	};
+
+	const floatGrowAnimation = {
+
+		property: "transform",
+		fromValue: "translateY(0) scale(1)",
+		toValue: "translateY(-55px) scale(1.5)"
+	};
+
+	const colorAnimation = {
+
+		property: "color",
+		fromValue: "green",
+		toValue: "green"
+	};
+
+	const mainAnimation = {
+
+		duration: 1500,
+		iterations: "1",
+		fromTo: [ floatGrowAnimation, colorAnimation ],
+		easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)"
+	};
+
+	const handleAddToCart = async product => {
+
+		setHidden(false);
+		await animationRef.current.animation.play();
+		setHidden(true);
+		addToCart(product);
+	}
+
+	return (
+
+		<IonButton color="dark" expand="full" onClick={() => handleAddToCart(product)}>
+			<IonIcon icon={cartOutline} />&nbsp;
+			Add to Cart
+
+			<CreateAnimation ref={animationRef} {...mainAnimation}>
+				<IonIcon icon={cartOutline} size="large" style={floatStyle} />
+			</CreateAnimation>
+		</IonButton>
+	);
+}

03_source/mobile/src/pages/DemoReactShopUi/components/Breadcrumbs.jsx

@@ -0,0 +1,23 @@
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from "@ionic/react";
+import { fastFoodOutline } from "ionicons/icons";
+import { useState } from "react";
+
+export const Breadcrumbs = () => {
+
+  const [maxItems, setMaxItems] = useState(2);
+
+  const handleClick = () => {
+
+    setMaxItems(undefined);
+  }
+
+	return (
+
+    <IonBreadcrumbs maxItems={maxItems} onIonCollapsedClick={handleClick}>
+      <IonBreadcrumb color="medium">Page 1</IonBreadcrumb>
+      <IonBreadcrumb color="medium">Page 2</IonBreadcrumb>
+      <IonBreadcrumb color="medium">Page 3</IonBreadcrumb>
+      <IonBreadcrumb>Page 4</IonBreadcrumb>
+    </IonBreadcrumbs>
+	);
+}

03_source/mobile/src/pages/DemoReactShopUi/components/CartModal.jsx

@@ -0,0 +1,82 @@
+import { useStoreState } from "pullstate";
+import { useEffect, useState } from "react";
+import { CartStore } from "../store";
+import { addToCart } from "../store/CartStore";
+import { getCart } from "../store/Selectors";
+
+const { IonPage, IonHeader, IonToolbar, IonTitle, IonButtons, IonIcon, IonContent, IonGrid, IonRow, IonItem, IonLabel, IonText, IonThumbnail, IonFooter, IonCol, IonButton, IonItemSliding, IonItemOptions, IonItemOption } = require("@ionic/react");
+const { close } = require("ionicons/icons");
+
+export const CartModal = props => {
+
+	const cart = useStoreState(CartStore, getCart);
+  const [totalPrice, setTotalPrice] = useState(0);
+
+  useEffect(() => {
+
+    let total = 0;
+    cart.forEach(item => total += parseInt(item.price.replace("£", "")));
+    setTotalPrice(total);
+  }, [cart]);
+
+	return (
+		<IonPage>
+			<IonHeader>
+				<IonToolbar>
+					<IonTitle>Cart</IonTitle>
+					<IonButtons slot="end" onClick={props.close}>
+						<IonIcon icon={close} size="large" />
+					</IonButtons>
+				</IonToolbar>
+			</IonHeader>
+			<IonContent>
+
+				<IonGrid>
+					<IonRow style={{borderBottom: "1px solid black"}} className="ion-margin-bottom">
+						<IonItem lines="none">
+							<IonLabel>
+								<h1>{cart.length} products in your cart</h1>
+								<IonText color="medium">
+									<h2>Review products and checkout</h2>
+								</IonText>
+							</IonLabel>
+						</IonItem>
+					</IonRow>
+				</IonGrid>
+
+				{cart.map((item, index) => (
+					<IonItemSliding>
+						<IonItem key={index} lines="none" className="ion-padding-end" style={{paddingTop: "0.75rem", paddingBottom: "0.75rem"}}>
+							<IonThumbnail>
+								<img src={item.image} alt="item" />
+							</IonThumbnail>
+							<IonLabel className="ion-padding-start ion-text-wrap">
+								<h2>{item.title}</h2>
+								<p>{item.price}</p>
+							</IonLabel>
+						</IonItem>
+
+						<IonItemOptions side="end">
+							<IonItemOption color="danger" onClick={() => addToCart(item)}>
+								Remove
+							</IonItemOption>
+						</IonItemOptions>
+					</IonItemSliding>
+				))}
+			</IonContent>
+
+			<IonFooter className="ion-padding-bottom ion-padding-start ion-padding-end" style={{paddingBottom: "3rem"}}>
+				<IonRow className="ion-justify-content-between">
+					<IonCol size="8">
+						<h1>Total</h1>
+					</IonCol>
+
+					<IonCol size="4">
+						<h1>£{totalPrice.toFixed(2)}</h1>
+					</IonCol>
+				</IonRow>
+				<IonButton expand="block" color="dark">Checkout &rarr;</IonButton>
+			</IonFooter>
+		</IonPage>
+	);
+}

03_source/mobile/src/pages/DemoReactShopUi/components/FilterModal.jsx

@@ -0,0 +1,36 @@
+import { IonButton, IonCol, IonContent, IonGrid, IonHeader, IonRow, IonTitle, IonToolbar } from "@ionic/react";
+
+export const FilterModal = ({productsRef, filterCriteria, setFilterCriteria, dismiss, filters}) => {
+
+    const filterProducts = async filter => {
+
+      await productsRef.current.classList.add("animate__fadeOutLeft");
+
+      setTimeout(() => {
+        productsRef.current.classList.remove("animate__fadeOutLeft");
+        productsRef.current.classList.add("animate__fadeInRight");
+        setFilterCriteria(filter);
+      }, 500);
+      dismiss();
+    }
+
+    return (
+
+      <IonContent>
+      <IonHeader>
+        <IonToolbar color="none" style={{"--border-style": "none"}}>
+          <IonTitle className="ion-margin-top">Filter</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+        <IonGrid>
+          <IonRow>
+              {filters.map(f => (
+                <IonCol key={f} size="3">
+                  <IonButton expand="full" color={filterCriteria === f ? "dark" : "light"} onClick={() => filterProducts(f)}>{f}</IonButton>
+                </IonCol>
+              ))}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    );
+  }

03_source/mobile/src/pages/DemoReactShopUi/components/ProductModal.css

@@ -0,0 +1,88 @@
+ion-card {
+  margin: 0;
+	/* margin-top: var(--ion-safe-area-top); */
+	z-index: -1;
+
+  border-radius: 0px;
+
+  background-size: cover;
+	background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: none;
+  aspect-ratio: 1 / 1;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  ion-card::before {
+    float: left;
+    padding-top: 100%;
+    content: '';
+  }
+
+  ion-card::after {
+    display: block;
+    content: '';
+    clear: both;
+  }
+}
+
+ion-card-header {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); */
+	background: rgba(0, 0, 0, 0.5)
+}
+
+ion-card-title,
+ion-card-subtitle {
+  color: white;
+}
+
+ion-card-header ion-card-title {
+  
+  margin: 0 0 6px 0;
+  font-size: 22px;
+}
+
+ion-card-header ion-card-subtitle {
+  
+  text-transform: none;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+ion-card-content {
+  height: calc(60px + var(--ion-safe-area-top));
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+#close-button {
+  position: fixed;
+
+  top: max(var(--ion-safe-area-top), 16px);
+  right: 8px;
+}
+
+#fave-button {
+  position: fixed;
+
+  top: max(var(--ion-safe-area-top), 16px);
+	left: 8px;
+}
+
+#product-view-buttons {
+
+	z-index: 10;
+	background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(82, 82, 82, 0.9) 100%) !important;
+	position: absolute;
+	width: 100%;
+	height: 4rem;
+}
+
+.sticky-bottom {
+
+  position: fixed;
+  bottom: 0;
+}

03_source/mobile/src/pages/DemoReactShopUi/components/ProductModal.jsx

@@ -0,0 +1,76 @@
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonFooter, IonIcon, IonLabel, IonNote, IonRow, IonText, IonToolbar } from "@ionic/react";
+import { closeCircle, heart, heartOutline } from "ionicons/icons";
+import { useStoreState } from "pullstate";
+import { useRef } from "react";
+
+import { checkFavourites } from "../store/Selectors";
+import { addToFavourites } from "../store/FavouritesStore";
+import { FavouritesStore } from "../store";
+
+import "./ProductModal.css";
+import { ProductReviews } from "./ProductReviews";
+import { ProductSpecificationsAccordion } from "./ProductSpecificationsAccordion";
+import { AddToCartButton } from "./AddToCartButton";
+
+export const ProductModal = props => {
+
+	const { dismiss, category = false, product } = props;
+	const isFavourite = useStoreState(FavouritesStore, checkFavourites(product));
+	const contentRef = useRef(null);
+
+	return (
+		<>
+			<IonContent ref={contentRef}>
+				<IonButtons id="product-view-buttons">
+					<IonButton color="light" onClick={dismiss} id="close-button">
+						<IonIcon icon={closeCircle} size="large" />
+					</IonButton>
+
+					<IonButton color="danger" onClick={() => addToFavourites(product, category)} id="fave-button">
+						<IonIcon icon={isFavourite ? heart : heartOutline} size="large" />
+					</IonButton>
+				</IonButtons>
+
+				<IonCard style={{backgroundImage: `url('${product.image}')`}}>
+					<IonCardHeader>
+						<IonCardTitle>{product.title}</IonCardTitle>
+						<IonCardSubtitle>{product.price}</IonCardSubtitle>
+					</IonCardHeader>
+				</IonCard>
+
+				<div className="ion-padding">
+
+					<IonRow className="ion-align-items-center">
+						<IonCol>
+							<IonText size="large" className="page-title">
+								<IonNote>shop</IonNote>
+								<IonLabel>{category ? category : "Favourite"}</IonLabel>
+							</IonText>
+						</IonCol>
+
+						<ProductReviews reviews={product.reviews} />
+					</IonRow>
+					<h2>Product Description</h2>
+					<IonText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit felis, molestie id venenatis at, commodo ac tortor. Pellentesque tempus aliquet purus, sed vulputate elit tempus ut.</IonText>
+
+					<h2>Product Specifications</h2>
+					<ProductSpecificationsAccordion contentRef={contentRef} type={category} />
+				</div>
+			</IonContent>
+
+			<IonFooter collapse="fade">
+				<IonToolbar>
+					<IonRow className="ion-justify-content-between ion-align-items-center">
+						<IonCol size="3">
+							<IonButton expand="full" color="light">{product.price}</IonButton>
+						</IonCol>
+
+						<IonCol size="8" className="ion-text-right">
+							<AddToCartButton product={product} />
+						</IonCol>
+					</IonRow>
+				</IonToolbar>
+			</IonFooter>
+		</>
+	);
+}

03_source/mobile/src/pages/DemoReactShopUi/components/ProductReviews.jsx

@@ -0,0 +1,23 @@
+import { IonCol, IonIcon, IonNote } from "@ionic/react";
+import { star } from "ionicons/icons";
+import { useEffect, useState } from "react";
+import { randomCount } from "../utils";
+
+export const ProductReviews = () => {
+
+	//	This count could come from the product (if real data was fed)
+	const [reviewCount, setReviewCount] = useState(0);
+
+	useEffect(() => {
+
+		setReviewCount(randomCount());
+	}, []);
+
+	return (
+		<IonCol className="ion-text-right">
+			<IonIcon color="warning" icon={star} />
+			&nbsp;&nbsp;
+			<IonNote>{reviewCount} review{reviewCount > 1 && "s"}</IonNote>
+		</IonCol>
+	);
+}

03_source/mobile/src/pages/DemoReactShopUi/components/ProductSpecificationsAccordion.jsx

@@ -0,0 +1,58 @@
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonList, IonNote } from "@ionic/react";
+import { useRef } from "react";
+import { productSpecs } from "../utils";
+
+export const ProductSpecificationsAccordion = ({type, contentRef}) => {
+
+	const accordionGroupRef = useRef(null);
+
+	const log = () => {
+
+		const selectedAccordion = accordionGroupRef.current.value;
+
+		if (selectedAccordion) {
+
+			setTimeout(() => contentRef.current.scrollToBottom(400), 200);
+		}
+	}
+
+	return (
+		<IonAccordionGroup ref={accordionGroupRef} onIonChange={log}>
+			{Object.keys(productSpecs).map((spec, index) => {
+
+				const {header, options, wrapText = false, noteColor = false} = productSpecs[spec];
+
+				return (
+
+					<IonAccordion key={`accordion_${header}_${index}`}>
+						<IonItem slot="header" className="ion-no-padding">
+							<IonLabel>{header}</IonLabel>
+						</IonItem>
+
+
+						<IonList slot="content" className="ion-no-padding">
+							{options.map((option, index2) => {
+
+								const {label, value} = option;
+
+								return (
+
+									<IonItem key={`accordion_${header}_${option}_${index2}`} className="ion-no-padding">
+										<IonLabel>
+											<h3>{label}</h3>
+										</IonLabel>
+										<IonLabel className={wrapText && "ion-text-wrap"}>
+											<IonNote color={noteColor ? (value ? "success" : "danger") : "medium"}>
+												{noteColor ? (value ? "In stock" : "Out of stock") : value}
+											</IonNote>
+										</IonLabel>
+									</IonItem>
+								);
+							})}
+						</IonList>
+					</IonAccordion>
+				);
+			})}
+		</IonAccordionGroup>
+	);
+}

03_source/mobile/src/pages/DemoReactShopUi/pages/Categories.jsx

@@ -0,0 +1,45 @@
+import { IonButton, IonContent, IonHeader, IonLabel, IonNote, IonPage, IonRouterLink, IonRow, IonTitle, IonToolbar } from '@ionic/react';
+import { capitalize, productInfo } from '../utils';
+
+import styles from "./Categories.module.scss";
+
+const Categories = () => {
+
+  const categories = Object.keys(productInfo);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Ionic Shop</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+          <IonTitle size="large" className="page-title">
+              <IonLabel>ionic</IonLabel>
+              <IonNote>shop</IonNote>
+            </IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow>
+          {categories.map(category => (
+
+            <IonRouterLink routerLink={`/categories/${category.toLowerCase()}`}>
+              <div className={styles.categoryContainer}>
+                <img src={productInfo[category].coverImage} alt="cover" />
+                <p>{capitalize(category)}</p>
+              </div>
+            </IonRouterLink>
+
+            // <IonButton key={c} routerLink={`/categories/${c.toLowerCase()}`}>{capitalize(c)}</IonButton>
+          ))}
+        </IonRow>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Categories;

03_source/mobile/src/pages/DemoReactShopUi/pages/Categories.module.scss

@@ -0,0 +1,20 @@
+.categoryContainer {
+  
+  display: flex;
+  color: white;
+}
+
+.categoryContainer p {
+
+  display: flex;
+  justify-items: center;
+  justify-content: center;
+  position: absolute;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 50%;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin: 0 auto;
+  font-size: 2rem;
+}

03_source/mobile/src/pages/DemoReactShopUi/pages/Category.jsx

@@ -0,0 +1,54 @@
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonLabel, IonNote, IonPage, IonRouterLink, IonRow, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';
+import { chevronBack } from 'ionicons/icons';
+import { useParams } from 'react-router';
+import { capitalize, productInfo } from '../utils';
+
+import styles from "./Categories.module.scss";
+
+const Category = () => {
+
+  const router = useIonRouter();
+  const { category } = useParams();
+  const productTypes = Object.keys(productInfo[category].productTypes);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+
+        <IonButtons slot="start">
+          <IonButton className="custom-back" onClick={() => router.goBack()}>
+            <IonIcon icon={chevronBack} />
+            <IonLabel>Back</IonLabel>
+          </IonButton>
+        </IonButtons>
+          <IonTitle>{category}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large" className="page-title">
+              <IonNote>shop</IonNote>
+              <IonLabel>{category}</IonLabel>
+            </IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow>
+          {productTypes.map(product => (
+
+            <IonRouterLink key={`${category}_${product}`} routerLink={`/categories/${category}/${product.toLowerCase().replaceAll(" ", "_")}`}>
+              <div className={styles.categoryContainer}>
+                <img src={productInfo[category].productTypes[product].coverImage} alt="cover" />
+                <p>{capitalize(product)}</p>
+              </div>
+            </IonRouterLink>
+          ))}
+        </IonRow>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Category;