diff --git a/frontend/src/app/category-view/page.tsx b/frontend/src/app/category-view/page.tsx index a6da9419..031a8271 100644 --- a/frontend/src/app/category-view/page.tsx +++ b/frontend/src/app/category-view/page.tsx @@ -15,7 +15,7 @@ const MAX_LOGOS = 5; // Max logos to display at once const CategoryView = () => { const [categories, setCategories] = useState([]); const [selectedCategory, setSelectedCategory] = useState(null); - const [logoIndex, setLogoIndex] = useState(0); // Keeps track of logo pagination + const [logoIndexes, setLogoIndexes] = useState>({}); // Track logo index for each category const router = useRouter(); useEffect(() => { @@ -29,6 +29,13 @@ const CategoryView = () => { const data = await response.json(); console.log("Fetched categories:", data); // Debugging setCategories(data); + + // Initialize logo indexes for all categories + const initialIndexes = data.reduce((acc: Record, category: Category) => { + acc[category.name] = 0; + return acc; + }, {}); + setLogoIndexes(initialIndexes); } catch (error) { console.error("Error fetching categories:", error); } @@ -39,12 +46,10 @@ const CategoryView = () => { const handleCategoryClick = (category: Category) => { setSelectedCategory(category); - setLogoIndex(0); // Reset logo pagination when switching categories }; const handleBackClick = () => { setSelectedCategory(null); - setLogoIndex(0); // Reset logo pagination when going back }; const handleScriptClick = (scriptSlug: string) => { @@ -57,8 +62,25 @@ const CategoryView = () => { : text; }; - const getVisibleLogos = (scripts: any[]) => { - return scripts.slice(logoIndex, logoIndex + MAX_LOGOS); + const getVisibleLogos = (scripts: any[], categoryName: string) => { + const index = logoIndexes[categoryName] || 0; + return scripts.slice(index, index + MAX_LOGOS); + }; + + const updateLogoIndex = (categoryName: string, direction: "prev" | "next", totalScripts: number) => { + setLogoIndexes((prev) => { + const currentIndex = prev[categoryName] || 0; + if (direction === "prev") { + return { ...prev, [categoryName]: Math.max(0, currentIndex - MAX_LOGOS) }; + } + if (direction === "next") { + return { + ...prev, + [categoryName]: Math.min(currentIndex + MAX_LOGOS, totalScripts - MAX_LOGOS), + }; + } + return prev; + }); }; return ( @@ -129,17 +151,17 @@ const CategoryView = () => {
{category.scripts && - getVisibleLogos(category.scripts).map((script, index) => ( + getVisibleLogos(category.scripts, category.name).map((script, index) => ( {