<iman> update all promotion add zustand

3 files changed, 36 insertions, 17 deletions

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index 9b1a30a4..a21ba188 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,16 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
 import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import useDevice from '@/core/hooks/useDevice';
-import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner'
+import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
+import usePromoStore from './promoStore'; // Adjust the path accordingly
 
 const PromoList = ({ selectedPromo }) => {
-  const [title, setTitle] = useState('');
-  const [slug, setSlug] = useState('');
-  const [promoItems, setPromoItems] = useState([]);
-  const [promoData, setPromoData] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const {
+    title,
+    slug,
+    promoItems,
+    promoData,
+    isLoading,
+    setTitle,
+    setSlug,
+    setPromoItems,
+    setPromoData,
+    setIsLoading,
+  } = usePromoStore();
+
   const { isMobile } = useDevice();
 
   useEffect(() => {
@@ -24,7 +33,7 @@ const PromoList = ({ selectedPromo }) => {
       setTitle('Gratis Merchandise Spesial Indoteknik');
       setSlug('merchandise');
     }
-  }, [selectedPromo]);
+  }, [selectedPromo, setTitle, setSlug]);
 
   useEffect(() => {
     const fetchPromotions = async () => {
@@ -33,11 +42,6 @@ const PromoList = ({ selectedPromo }) => {
         const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 50);
         setPromoItems(items);
 
-        console.log("selectedPromo",selectedPromo)
-        console.log("slug",slug)
-        console.log("items",items)
-        console.log("promoItems",promoItems)
-
         const promoDataPromises = items.map(async (item) => {
           try {
             const response = await fetchPromoItemsSolr(`id:${item.id}`, 0, 10);
@@ -64,17 +68,16 @@ const PromoList = ({ selectedPromo }) => {
       setPromoData([]);
       fetchPromotions();
     }
-  }, [slug]);
+  }, [slug, setPromoItems, setPromoData, setIsLoading]);
 
   return (
     <div className='h-[420px]'>
-      <h1 className='text-h-sm md:text-h-lg  font-semibold py-4'>{title}</h1>
+      <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
       {isLoading ? (
         <div className="loading-spinner flex justify-center">
           <LogoSpinner width={48} height={48} />
         </div>
       ) : (
-        
         <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode>
           {promoData?.map((promotion) => (
             <SwiperSlide key={promotion.id}>
diff --git a/src-migrate/modules/promo/components/promoStore.js b/src-migrate/modules/promo/components/promoStore.js
new file mode 100644
index 00000000..c232de00
--- /dev/null
+++ b/src-migrate/modules/promo/components/promoStore.js
@@ -0,0 +1,16 @@
+import create from 'zustand';
+
+const usePromoStore = create((set) => ({
+  title: '',
+  slug: '',
+  promoItems: [],
+  promoData: [],
+  isLoading: true,
+  setTitle: (title) => set({ title }),
+  setSlug: (slug) => set({ slug }),
+  setPromoItems: (promoItems) => set({ promoItems }),
+  setPromoData: (promoData) => set({ promoData }),
+  setIsLoading: (isLoading) => set({ isLoading }),
+}));
+
+export default usePromoStore;
diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx
index d1d6d70a..7c4df2c1 100644
--- a/src-migrate/pages/shop/promo/index.tsx
+++ b/src-migrate/pages/shop/promo/index.tsx
@@ -29,7 +29,7 @@ const PromoPage = () => {
       <LazyLoadComponent>
         <FlashSale />
       </LazyLoadComponent>
-
+      <h1 className='h-4'></h1>
       <LazyLoadComponent>
         <Voucher />
       </LazyLoadComponent>