From 19af60c4109daf40d6f677612e4ae2f293b5ca47 Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Sun, 8 Jun 2025 19:07:48 +0800
Subject: [PATCH] update demo-react-shop,

---
 .../src/pages/DemoReactShop/MainTabs.tsx      | 12 +--
 .../src/pages/DemoReactShop/ProductType.jsx   |  2 +-
 .../components/AddToCartButton.jsx            | 94 +++++++++----------
 .../mobile/src/pages/DemoReactShop/index.tsx  |  2 +-
 4 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx b/03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx
index 1ebadec..76d66d8 100644
--- a/03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx
+++ b/03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx
@@ -15,7 +15,7 @@ import MembersNearByList from '../MembersNearByList';
 import OrderList from '../OrderList';
 import MyProfile from '../MyProfile';
 import MessageList from '../MessageList';
-import paths from '../../paths';
+import PATHS from '../../PATHS';
 import Favourites from '../Favourites';
 import TabAppRoute from '../../TabAppRoute';
 
@@ -53,23 +53,23 @@ const MainTabs: React.FC<MainTabsProps> = () => {
         </IonTabButton>
         */}
 
-        <IonTabButton tab="events" href={paths.EVENT_LIST}>
+        <IonTabButton tab="events" href={PATHS.EVENT_LIST}>
           <IonIcon icon={calendar} />
           <IonLabel>Event</IonLabel>
         </IonTabButton>
-        <IonTabButton tab="nearby" href={paths.NEARBY_LIST}>
+        <IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
           <IonIcon icon={people} />
           <IonLabel>Nearby</IonLabel>
         </IonTabButton>
-        <IonTabButton tab="orders" href={paths.ORDERS_LIST}>
+        <IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
           <IonIcon icon={location} />
           <IonLabel>Order</IonLabel>
         </IonTabButton>
-        <IonTabButton tab="message" href={paths.MESSAGE_LIST}>
+        <IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
           <IonIcon icon={informationCircle} />
           <IonLabel>Message</IonLabel>
         </IonTabButton>
-        <IonTabButton tab="my_profile" href={paths.PROFILE}>
+        <IonTabButton tab="my_profile" href={PATHS.PROFILE}>
           <IonIcon icon={informationCircle} />
           <IonLabel>Profile</IonLabel>
         </IonTabButton>
diff --git a/03_source/mobile/src/pages/DemoReactShop/ProductType.jsx b/03_source/mobile/src/pages/DemoReactShop/ProductType.jsx
index a0b425c..e2bccd0 100644
--- a/03_source/mobile/src/pages/DemoReactShop/ProductType.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/ProductType.jsx
@@ -30,7 +30,7 @@ import { capitalize, productInfo } from '../utils';
 const ProductType = () => {
   const router = useIonRouter();
   const { category, type } = useParams();
-  const productsRef = useRef();
+  const productsRef = useRef(null);
 
   const [products, setProducts] = useState([]);
   const [filteredProducts, setFilteredProducts] = useState([]);
diff --git a/03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx b/03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx
index 33810a5..8a86ec1 100644
--- a/03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx
@@ -1,58 +1,50 @@
-import { CreateAnimation, IonButton, IonIcon } from "@ionic/react";
-import { cartOutline } from "ionicons/icons";
-import { useRef, useState } from "react";
-import { addToCart } from "../store/CartStore";
+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}) => {
+export const AddToCartButton = ({ product }) => {
+  const animationRef = useRef(null);
+  const [hidden, setHidden] = useState(true);
 
-	const animationRef = useRef();
-	const [hidden, setHidden] = useState(true);
+  const floatStyle = {
+    display: hidden ? 'none' : '',
+    position: 'absolute',
+  };
 
-	const floatStyle = {
+  const floatGrowAnimation = {
+    property: 'transform',
+    fromValue: 'translateY(0) scale(1)',
+    toValue: 'translateY(-55px) scale(1.5)',
+  };
 
-		display: hidden ? "none" : "",
-		position: "absolute"
-	};
+  const colorAnimation = {
+    property: 'color',
+    fromValue: 'green',
+    toValue: 'green',
+  };
 
-	const floatGrowAnimation = {
+  const mainAnimation = {
+    duration: 1500,
+    iterations: '1',
+    fromTo: [floatGrowAnimation, colorAnimation],
+    easing: 'cubic-bezier(0.25, 0.7, 0.25, 0.7)',
+  };
 
-		property: "transform",
-		fromValue: "translateY(0) scale(1)",
-		toValue: "translateY(-55px) scale(1.5)"
-	};
+  const handleAddToCart = async (product) => {
+    setHidden(false);
+    await animationRef.current.animation.play();
+    setHidden(true);
+    addToCart(product);
+  };
 
-	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>
-	);
-}
\ No newline at end of file
+  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>
+  );
+};
diff --git a/03_source/mobile/src/pages/DemoReactShop/index.tsx b/03_source/mobile/src/pages/DemoReactShop/index.tsx
index de5618a..71c1604 100644
--- a/03_source/mobile/src/pages/DemoReactShop/index.tsx
+++ b/03_source/mobile/src/pages/DemoReactShop/index.tsx
@@ -18,7 +18,7 @@ import SpeakerDetail from '../SpeakerDetail';
 import SessionDetail from '../SessionDetail';
 import MapView from '../MapView';
 import About from '../About';
-import paths from '../../paths';
+import PATHS from '../../PATHS';
 import TabAppRoute from '../../TabAppRoute';
 import { CartStore } from './store';
 import { getCartCount } from './store/Selectors';