From 4a5391def4c5d2e8991643287d40e3c3b53980be Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 5 Nov 2024 15:49:45 +0700
Subject: <iman> add redis

---
 src/lib/home/components/CategoryDynamic.jsx | 247 +++++++++++-----------------
 1 file changed, 97 insertions(+), 150 deletions(-)

(limited to 'src/lib/home/components/CategoryDynamic.jsx')

diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index e62575f7..cc4f42b7 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -1,81 +1,33 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import {
-  fetchCategoryManagementSolr,
-  fetchCategoryManagementVersion,
-} from '../api/categoryManagementApi';
+import React, { useEffect, useState } from 'react';
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+import { Skeleton } from '@chakra-ui/react';
 import NextImage from 'next/image';
 import Link from 'next/link';
 import { createSlug } from '@/core/utils/slug';
-import { Skeleton } from '@chakra-ui/react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper';
 
-const saveToLocalStorage = (key, data, version) => {
-  const now = new Date();
-  const item = {
-    value: data,
-    version: version,
-    lastFetchedTime: now.getTime(),
-  };
-  localStorage.setItem(key, JSON.stringify(item));
-};
-
-const getFromLocalStorage = (key) => {
-  const itemStr = localStorage.getItem(key);
-  if (!itemStr) return null;
-
-  const item = JSON.parse(itemStr);
-  return item;
-};
-
-const getElapsedTime = (lastFetchedTime) => {
-  const now = new Date();
-  return now.getTime() - lastFetchedTime;
-};
-
 const CategoryDynamic = () => {
   const [categoryManagement, setCategoryManagement] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const loadBrand = useCallback(async () => {
-    const cachedData = getFromLocalStorage('homepage_categoryDynamic');
-
-    if (cachedData) {
-      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
-      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);
-
-      if (elapsedTime < 24 * 60 * 60 * 1000) {
-        setCategoryManagement(cachedData.value);
-        return;
-      }
-    }
+  const [isLoading, setIsLoading] = useState(true);
 
-    const latestVersion = await fetchCategoryManagementVersion();
-    if (cachedData && cachedData.version === latestVersion) {
-      // perbarui waktu
-      saveToLocalStorage(
-        'homepage_categoryDynamic',
-        cachedData.value,
-        latestVersion
-      );
-      setCategoryManagement(cachedData.value);
-    } else {
+  useEffect(() => {
+    const fetchCategoryData = async () => {
       setIsLoading(true);
-      const items = await fetchCategoryManagementSolr();
+      const res = await fetch('/api/category-management');
+      const { data } = await res.json();
+      if (data) {
+        setCategoryManagement(data);
+      }
       setIsLoading(false);
+    };
 
-      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
-      setCategoryManagement(items);
-    }
+    fetchCategoryData();
   }, []);
 
-  useEffect(() => {
-    loadBrand();
-  }, [loadBrand]);
-
   const swiperBanner = {
     modules: [Pagination],
     classNames: 'mySwiper',
@@ -90,104 +42,99 @@ const CategoryDynamic = () => {
   return (
     <div>
       {categoryManagement &&
-        categoryManagement?.map((category) => {
-          return (
-            <Skeleton key={category.id} isLoaded={!isLoading}>
-              <div key={category.id}>
-                <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
-                  <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
-                    {category.name}
-                  </h1>
-                  <Link
-                    href={createSlug(
-                      '/shop/category/',
-                      category?.name,
-                      category?.category_id
-                    )}
-                    className='!text-red-500 font-semibold'
-                  >
-                    Lihat Semua
-                  </Link>
-                </div>
+        categoryManagement.map((category) => (
+          <Skeleton key={category.id} isLoaded={!isLoading}>
+            <div key={category.id}>
+              <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
+                <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+                  {category.name}
+                </h1>
+                <Link
+                  href={createSlug(
+                    '/shop/category/',
+                    category?.name,
+                    category?.category_id
+                  )}
+                  className='!text-red-500 font-semibold'
+                >
+                  Lihat Semua
+                </Link>
+              </div>
 
-                {/* Swiper for SubCategories */}
-                <Swiper {...swiperBanner}>
-                  {category.categories.map((subCategory) => {
-                    return (
-                      <SwiperSlide key={subCategory.id}>
-                        <div className='border rounded justify-start items-start '>
-                          <div className='p-3'>
-                            <div className='flex flex-row border rounded mb-2 justify-start items-center'>
-                              <NextImage
-                                src={
-                                  subCategory.image
-                                    ? subCategory.image
-                                    : '/images/noimage.jpeg'
-                                }
-                                alt={subCategory.name}
-                                width={90}
-                                height={30}
-                                className='object-fit p-4'
-                              />
-                              <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
-                                <h2 className='font-semibold text-lg mr-2'>
-                                  {subCategory?.name}
-                                </h2>
+              <Swiper {...swiperBanner}>
+                {category?.categories?.map((subCategory) => (
+                  <SwiperSlide key={subCategory.id}>
+                    <div className='border rounded justify-start items-start '>
+                      <div className='p-3'>
+                        <div className='flex flex-row border rounded mb-2 justify-start items-center'>
+                          <NextImage
+                            src={
+                              subCategory.image
+                                ? subCategory.image
+                                : '/images/noimage.jpeg'
+                            }
+                            alt={subCategory.name}
+                            width={90}
+                            height={30}
+                            className='object-fit p-4'
+                          />
+                          <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+                            <h2 className='font-semibold text-lg mr-2'>
+                              {subCategory?.name}
+                            </h2>
+                            <Link
+                              href={createSlug(
+                                '/shop/category/',
+                                subCategory?.name,
+                                subCategory?.id_level_2
+                              )}
+                              className='!text-red-500 font-semibold'
+                            >
+                              Lihat Semua
+                            </Link>
+                          </div>
+                        </div>
+                        <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
+                          {subCategory.child_frontend_id_i.map(
+                            (childCategory) => (
+                              <div key={childCategory.id} className=''>
                                 <Link
                                   href={createSlug(
                                     '/shop/category/',
-                                    subCategory?.name,
-                                    subCategory?.id_level_2
+                                    childCategory?.name,
+                                    childCategory?.id_level_3
                                   )}
-                                  className='!text-red-500 font-semibold'
+                                  className='flex flex-row gap-2 border rounded group hover:border-red-500'
                                 >
-                                  Lihat Semua
+                                  <NextImage
+                                    src={
+                                      childCategory.image
+                                        ? childCategory.image
+                                        : '/images/noimage.jpeg'
+                                    }
+                                    alt={childCategory.name}
+                                    className='p-2 ml-1'
+                                    width={40}
+                                    height={40}
+                                  />
+                                  <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
+                                    <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
+                                      {childCategory.name}
+                                    </h3>
+                                  </div>
                                 </Link>
                               </div>
-                            </div>
-                            <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
-                              {subCategory.child_frontend_id_i.map(
-                                (childCategory) => (
-                                  <div key={childCategory.id} className=''>
-                                    <Link
-                                      href={createSlug(
-                                        '/shop/category/',
-                                        childCategory?.name,
-                                        childCategory?.id_level_3
-                                      )}
-                                      className='flex flex-row gap-2 border rounded group hover:border-red-500'
-                                    >
-                                      <NextImage
-                                        src={
-                                          childCategory.image
-                                            ? childCategory.image
-                                            : '/images/noimage.jpeg'
-                                        }
-                                        alt={childCategory.name}
-                                        className='p-2 ml-1'
-                                        width={40}
-                                        height={40}
-                                      />
-                                      <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
-                                        <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
-                                          {childCategory.name}
-                                        </h3>
-                                      </div>
-                                    </Link>
-                                  </div>
-                                )
-                              )}
-                            </div>
-                          </div>
+                            )
+                          )}
                         </div>
-                      </SwiperSlide>
-                    );
-                  })}
-                </Swiper>
-              </div>
-            </Skeleton>
-          );
-        })}
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </div>
+          </Skeleton>
+        ))}
     </div>
   );
 };
-- 
cgit v1.2.3