summaryrefslogtreecommitdiff
path: root/src/lib/home/components/CategoryDynamic.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/home/components/CategoryDynamic.jsx')
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx247
1 files changed, 97 insertions, 150 deletions
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>
);
};
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 21:20:17 +0000