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 textareaRef = useRef(null);
-  const sideRef = useRef();
+  const sideRef = useRef(null);
-  const sendRef = useRef();
+  const sendRef = useRef(null);
-  const replyToAnimationRef = useRef();
+  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"
             ),
         },
     {
@@ -169,7 +169,7 @@ const Chat = () => {
       : 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';
+// TODO: remove obsoleted DemoWeatherApp
-import DemoScoreBoard from './pages/DemoScoreBoard';
+// import DemoWeatherApp from './pages/DemoWeatherApp';
-import DemoQuoteApp from './pages/DemoQuoteApp';
+
-import DemoQrScanner from './pages/DemoQrScanner';
 // 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 DemoReactMarvelApp from './pages/DemoReactMarvelApp';
-import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
+// import DemoReactOnboardingUI from './pages/DemoReactOnboardingUI';
-import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
+// import DemoReactTabsMenusCustom from './pages/DemoReactTabsMenusCustom';
-import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
+// import DemoReactThemeSwitcher from './pages/DemoReactThemeSwitcher';
-import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
+// import DemoSkeletonText from './pages/DemoSkeletonText';
-import DemoReactPollApp from './pages/DemoReactPollApp';
+// import DemoStickyBottomSheetExample from './pages/DemoStickyBottomSheetExample';
-import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
+// import DemoStorageExample from './pages/DemoStorageExample';
-import Demo2FaExample from './pages/Demo2FaExample';
+// import DemoSwiperjsTutorial from './pages/DemoSwiperjsTutorial';
-import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
+// TODO: SCSS of this directory will alter the main page
-import DemoBankingUi from './pages/DemoBankingUi';
+import AppDemoRoute from './routes/DemoRoute';
-import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
+import Settings from './pages/Settings';
-import DemoColorTutorial from './pages/DemoColorTutorial';
 
 setupIonicReact();
 
@@ -122,14 +107,7 @@ interface DispatchProps {
 
 interface IonicAppProps extends StateProps, DispatchProps {}
 
-const IonicApp: React.FC<IonicAppProps> = ({
+const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
-  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 />} />
+            {/* TODO: need update to @capacitor/barcode-scanner */}
-            {/*  */}
+            {/* <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQrCode />} /> */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-
-            <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: resume DemoReactShop */}
             {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
 
-            <Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
+            {/* have problemx` */}
-            <Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
-            <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
+
-            <Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
+            {/* TODO: scss will alter the main page,   */}
-            <Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
+            {/* <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} /> */}
-            <Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
+
-            <Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
+            {/* 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.SETTINGS} component={Settings} />
-      <Route exact={true} path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
+      <Route exact={true} path={PATHS.CHANGE_LANGUAGE} component={ChangeLanguage} />
-      <Route exact={true} path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
+      <Route exact={true} path={PATHS.SERVICE_AGREEMENT} component={ServiceAgreement} />
-      <Route exact={true} path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
+      <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/DemoReactTabsMenusCustom/AppPages/Tab1.jsx

@@ -1,96 +0,0 @@
-import {
-  IonButton,
-  IonButtons,
-  IonCol,
-  IonContent,
-  IonHeader,
-  IonIcon,
-  IonPage,
-  IonRow,
-  IonTitle,
-  IonToolbar,
-  useIonRouter,
-} from '@ionic/react';
-
-import { Geolocation } from '@capacitor/geolocation';
-import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
-import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../TestComponents/CurrentWeather';
-
-function Tab1() {
-  const router = useIonRouter();
-
-  const [currentWeather, setCurrentWeather] = useState(false);
-
-  useEffect(() => {
-    getCurrentPosition();
-  }, []);
-
-  const getCurrentPosition = async () => {
-    setCurrentWeather(false);
-    const coordinates = await Geolocation.getCurrentPosition();
-    getAddress(coordinates.coords);
-  };
-
-  const getAddress = async (coords) => {
-    const query = `${coords.latitude},${coords.longitude}`;
-    const response = await fetch(
-      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
-    );
-
-    const data = await response.json();
-    console.log(data);
-    setCurrentWeather(data);
-  };
-
-  // const router = useIonRouter();
-  function handleBackClick() {
-    router.goBack();
-  }
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>My Weather</IonTitle>
-
-          <IonButtons slot="end">
-            <IonButton onClick={() => getCurrentPosition()}>
-              <IonIcon icon={refreshOutline} color="primary" />
-            </IonButton>
-          </IonButtons>
-
-          <IonButtons slot="start">
-            <IonButton onClick={() => handleBackClick()}>
-              <IonIcon icon={chevronBackOutline} color="primary" />
-            </IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Dashboard</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
-          <IonCol size="12">
-            <h4>Here's your location based weather</h4>
-          </IonCol>
-        </IonRow>
-
-        <div style={{ marginTop: '-1.5rem' }}>
-          {currentWeather ? (
-            <CurrentWeather currentWeather={currentWeather} />
-          ) : (
-            <SkeletonDashboard />
-          )}
-        </div>
-      </IonContent>
-    </IonPage>
-  );
-}
-
-export default Tab1;

03_source/mobile/src/pages/DemoReactTabsMenusCustom/AppPages/Tab1.tsx

@@ -18,7 +18,7 @@ import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
 import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab1() {
+function Tab1(): React.JSX.Element {
   const router = useIonRouter();
 
   const [currentWeather, setCurrentWeather] = useState(false);

03_source/mobile/src/pages/DemoReactTabsMenusCustom/AppPages/Tab2.jsx

@@ -1,81 +0,0 @@
-import {
-  IonButton,
-  IonCol,
-  IonContent,
-  IonHeader,
-  IonPage,
-  IonRow,
-  IonSearchbar,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/react';
-import { useState } from 'react';
-import { CurrentWeather } from '../TestComponents/CurrentWeather';
-
-function Tab2() {
-  const [search, setSearch] = useState('');
-  const [currentWeather, setCurrentWeather] = useState(false);
-
-  const performSearch = async () => {
-    getAddress(search);
-  };
-
-  const getAddress = async (city) => {
-    const response = await fetch(
-      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
-    );
-    const data = await response.json();
-
-    if (data && data.current && data.location) {
-      setCurrentWeather(data);
-    }
-  };
-
-  return (
-    <IonPage>
-      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Search</IonTitle>
-        </IonToolbar>
-      </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">Search</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-
-        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
-          <IonCol size="7">
-            <IonSearchbar
-              placeholder="Try 'London'"
-              animated
-              value={search}
-              onIonChange={(e) => setSearch(e.target.value)}
-            />
-          </IonCol>
-
-          <IonCol size="5">
-            <IonButton
-              expand="block"
-              className="ion-margin-start ion-margin-end"
-              onClick={performSearch}
-            >
-              Search
-            </IonButton>
-          </IonCol>
-        </IonRow>
-
-        <div style={{ marginTop: '-0.8rem' }}>
-          {currentWeather ? (
-            <CurrentWeather currentWeather={currentWeather} />
-          ) : (
-            <h3 className="ion-text-center">Your search result will appear here</h3>
-          )}
-        </div>
-      </IonContent>
-    </IonPage>
-  );
-}
-
-export default Tab2;

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

@@ -12,7 +12,7 @@ import {
 import { useState } from 'react';
 import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
-function Tab2() {
+function Tab2(): React.JSX.Element {
   const [search, setSearch] = useState('');
   const [currentWeather, setCurrentWeather] = useState(false);
 

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

@@ -2,8 +2,31 @@ 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 }) => {
+interface WeatherPropertyProps {
-  const [property, setProperty] = useState(false);
+  type: 'wind' | 'feelsLike' | 'indexUV' | 'pressure';
+  currentWeather: {
+    current: {
+      wind_mph: number;
+      feelslike_c: number;
+      uv: number;
+      pressure_mb: number;
+    };
+  };
+}
+
+interface PropertyType {
+  isIcon: boolean;
+  icon: string;
+  alt: string;
+  label: string;
+  value: string;
+}
+
+export const WeatherProperty = ({
+  type,
+  currentWeather,
+}: WeatherPropertyProps): React.JSX.Element => {
+  const [property, setProperty] = useState<PropertyType | false>(false);
 
   const properties = {
     wind: {

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

@@ -1,7 +1,24 @@
 import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
 import { WeatherProperty } from './WeatherProperty';
 
-export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
+interface CurrentWeatherProps {
+  currentWeather: {
+    location: {
+      region: string;
+      country: string;
+      localtime: string;
+    };
+    current: {
+      condition: {
+        icon: string;
+        text: string;
+      };
+      temp_c: number;
+    };
+  };
+}
+
+export const CurrentWeather = ({ currentWeather }: CurrentWeatherProps): React.JSX.Element => (
   <IonGrid>
     <IonCard>
       <IonCardContent className="ion-text-center">

03_source/mobile/src/pages/DemoReactTabsMenusCustom/components/Modal.tsx

@@ -0,0 +1,59 @@
+import {
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonModal,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonContent,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+} from '@ionic/react';
+import { chevronBack } from 'ionicons/icons';
+
+interface ModalProps {
+  showModal: boolean;
+  close: (value: boolean) => void;
+  modalOptions: {
+    text?: string;
+    name?: string;
+    icon?: string;
+  };
+}
+
+export const Modal = (props: ModalProps): React.JSX.Element => (
+  <IonModal isOpen={props.showModal}>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>
+          {props.modalOptions.text ? props.modalOptions.text : props.modalOptions.name}
+        </IonTitle>
+        <IonButtons slot="start">
+          <IonButton onClick={() => props.close(false)}>
+            <IonIcon size="large" icon={chevronBack} style={{ marginLeft: '-0.7rem' }} />
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    <IonContent fullscreen>
+      <IonGrid>
+        <IonRow className="ion-text-center ion-margin-top">
+          <IonCol size="12">
+            <IonIcon style={{ fontSize: '5rem' }} icon={props.modalOptions.icon} />
+          </IonCol>
+        </IonRow>
+
+        {props.modalOptions.name && (
+          <IonRow className="ion-text-center">
+            <IonCol size="12">
+              <h3>{props.modalOptions.name}</h3>
+            </IonCol>
+          </IonRow>
+        )}
+      </IonGrid>
+    </IonContent>
+  </IonModal>
+);

03_source/mobile/src/pages/DemoReactTabsMenusCustom/components/PageHeader.tsx

@@ -0,0 +1,17 @@
+import { IonRow, IonCol, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+interface PageHeaderProps {
+  pageName: string;
+  count: number;
+}
+
+export const PageHeader = (props: PageHeaderProps): React.JSX.Element => (
+  <IonRow className="ion-text-center ion-margin-top">
+    <IonCol size="12">
+      <IonCardTitle>Tab Menu with Side Menu</IonCardTitle>
+      <IonCardSubtitle className="ion-margin-top">
+        {props.pageName} page with {props.count} side menu options
+      </IonCardSubtitle>
+    </IonCol>
+  </IonRow>
+);

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

@@ -19,7 +19,11 @@ function DemoReactTabsMenusCustom() {
           <Tab2 />
         </Route>
 
-        <Redirect exact path="/demo-react-tabs-menus-custom" to="/demo-react-tabs-menus-custom/tab1" />
+        <Redirect
+          exact
+          path="/demo-react-tabs-menus-custom"
+          to="/demo-react-tabs-menus-custom/tab1"
+        />
       </IonRouterOutlet>
 
       {/*  */}

03_source/mobile/src/pages/DemoReactTabsMenusCustom/main/CustomPage.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { IonHeader, IonContent, IonToolbar, IonTitle, IonButtons, IonMenuButton, IonBackButton, IonIcon, IonSearchbar } from '@ionic/react';
+import { chevronBack } from 'ionicons/icons';
+
+const CustomPage = (props) => {
+
+	const mainContent = props.children;
+	const { 
+            name, 
+            sideMenu = false, 
+            sideMenuPosition = "end", 
+            backButton = false,
+            backButtonIcon = chevronBack,
+            backButtonText = " ", 
+            backButtonPath,
+            actionButton = false,
+            actionButtonPosition,
+            actionButtonIcon,
+            actionButtonIconSize,
+            actionButtonClickEvent,
+            contentClass,
+            searchbar = false,
+            searchbarEvent,
+            showLargeHeader = true
+	} = props;
+    
+    return (
+        <>
+            <IonHeader translucent={ true }>
+                <IonToolbar>
+					<IonTitle>{ name }</IonTitle>
+
+                    { backButton &&
+                        <IonButtons slot="start">
+                            <IonBackButton icon={ backButtonIcon } text={ backButtonText } defaultHref={ backButtonPath } />   
+                        </IonButtons>
+					}
+
+					{ (actionButton && actionButtonIcon) &&
+                        <IonButtons slot={ actionButtonPosition }>
+                            <IonIcon style={{ fontSize: actionButtonIconSize }} icon={ actionButtonIcon } onClick={ actionButtonClickEvent }></IonIcon>
+                        </IonButtons>
+                    }
+
+                    { sideMenu &&
+                        <IonButtons slot={ sideMenuPosition }>
+                            <IonMenuButton />
+                        </IonButtons>
+					}
+                </IonToolbar>
+            </IonHeader>
+
+            <IonContent className={ contentClass } fullscreen>
+                
+                { showLargeHeader &&
+                    <IonHeader collapse="condense">
+                        <IonToolbar>
+                            <IonTitle slot="start" size="large">{ name }</IonTitle>
+                            { searchbar && <IonSearchbar style={{ marginTop: "-0.2rem", width: "50%", float: "right" }} onKeyUp={ e => searchbarEvent(e) } onChange={ e => searchbarEvent(e) } /> }
+                        </IonToolbar>
+                    </IonHeader>
+                }
+                { mainContent }
+            </IonContent>
+        </>
+    );
+}
+
+export default CustomPage;

03_source/mobile/src/pages/DemoReactTabsMenusCustom/main/PageSideMenus.tsx

@@ -0,0 +1,34 @@
+import { archiveOutline, beerOutline, cogOutline, eyeOutline, golfOutline, logOutOutline, mailOutline, mailUnreadOutline, mapOutline, personOutline, pulseOutline, refreshOutline, restaurantOutline, settingsOutline } from "ionicons/icons";
+import { buildSideMenuObject } from "./Utils";
+
+export const tab1SideMenu = [
+
+    buildSideMenuObject(false, "Inbox", "Navigates to Inbox page", mailOutline, "/tabs/tab2"),
+    buildSideMenuObject(false, "Places", "Navigates to Places page", mapOutline, "/tabs/tab3"),
+    buildSideMenuObject(true),
+    buildSideMenuObject(false, "Account Settings", null, settingsOutline, null),
+    buildSideMenuObject(false, "Settings Sub Page", "Opens settings sub page", cogOutline, "/settings"),
+    buildSideMenuObject(false, "Privacy", null, eyeOutline, null),
+    buildSideMenuObject(false, "Logout", null, logOutOutline, null)
+];
+
+export const tab2SideMenu = [
+
+    buildSideMenuObject(false, "Profile", "Navigates to Profile page", personOutline, "/tabs/tab1"),
+    buildSideMenuObject(false, "Places", "Navigates to Places page", mapOutline, "/tabs/tab3"),
+    buildSideMenuObject(true),
+    buildSideMenuObject(false, "Unread", null, mailUnreadOutline, null),
+    buildSideMenuObject(false, "Archived", null, archiveOutline, null),
+    buildSideMenuObject(false, "Timestamp style", "Changes the style of the timestamp", refreshOutline, null)
+];
+
+export const tab3SideMenu = [
+
+    buildSideMenuObject(false, "Profile", "Navigates to Profile page", personOutline, "/tabs/tab1"),
+    buildSideMenuObject(false, "Inbox", "Navigates to Inbox page", mailOutline, "/tabs/tab2"),
+    buildSideMenuObject(true),
+    buildSideMenuObject(false, "Pubs", null, beerOutline, null),
+    buildSideMenuObject(false, "Restaurants", null, restaurantOutline, null),
+    buildSideMenuObject(false, "Golf Courses", null, golfOutline, null),
+    buildSideMenuObject(false, "Hospitals", null, pulseOutline, null)
+];