From 4fb258211dcc522e54ee2e1bacc430e974bd8906 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Tue, 18 Mar 2025 13:41:20 -0500
Subject: [PATCH 1/2] Grid based layout for resource cards using tailwind
 instead of using primereat carousel component, this fixed the bug

---
 .../content/carousels/GenericCarousel.js      | 96 +++++--------------
 1 file changed, 23 insertions(+), 73 deletions(-)

diff --git a/src/components/content/carousels/GenericCarousel.js b/src/components/content/carousels/GenericCarousel.js
index e905170..9234a8f 100644
--- a/src/components/content/carousels/GenericCarousel.js
+++ b/src/components/content/carousels/GenericCarousel.js
@@ -1,34 +1,14 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Carousel } from 'primereact/carousel';
 import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
 import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate';
 import { DocumentTemplate } from '@/components/content/carousels/templates/DocumentTemplate';
 import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate';
 import { CombinedTemplate } from '@/components/content/carousels/templates/CombinedTemplate';
-import debounce from 'lodash/debounce';
-
-const responsiveOptions = [
-    {
-        breakpoint: '3000px',
-        numVisible: 3,
-    },
-    {
-        breakpoint: '1462px',
-        numVisible: 2,
-    },
-    {
-        breakpoint: '575px',
-        numVisible: 1,
-    }
-];
 
 export default function GenericCarousel({items, selectedTopic, title}) {
-    const [carousels, setCarousels] = useState([]);
     const [lessons, setLessons] = useState([]);
 
-    const memoizedItems = useMemo(() => items, [items]);
-
     useEffect(() => {
         axios.get('/api/lessons').then(res => {
             if (res.data) {
@@ -41,60 +21,30 @@ export default function GenericCarousel({items, selectedTopic, title}) {
         });
     }, []);
 
-    const getItemsPerCarousel = useCallback(() => {
-        const width = window.innerWidth;
-        if (width <= 575) return 1;
-        if (width <= 1462) return 2;
-        return 3;
-    }, []);
-
-    const updateCarousels = useCallback(() => {
-        const itemsPerCarousel = getItemsPerCarousel();
-        const newCarousels = [];
-        for (let i = 0; i < memoizedItems.length; i += itemsPerCarousel) {
-            newCarousels.push(memoizedItems.slice(i, i + itemsPerCarousel));
+    const renderItem = (item) => {
+        if (!item) return <TemplateSkeleton key={Math.random()} />;
+        
+        if (item.topics?.includes('video') && item.topics?.includes('document')) {
+            return <CombinedTemplate key={item.id} resource={item} isLesson={lessons.includes(item?.d)} />;
+        } else if (item.type === 'document') {
+            return <DocumentTemplate key={item.id} document={item} isLesson={lessons.includes(item?.d)} />;
+        } else if (item.type === 'video') {
+            return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
+        } else if (item.type === 'course') {
+            return <CourseTemplate key={item.id} course={item} />;
         }
-        setCarousels(newCarousels);
-    }, [memoizedItems, getItemsPerCarousel]);
-
-    useEffect(() => {
-        updateCarousels();
-        const debouncedHandleResize = debounce(updateCarousels, 250);
-        window.addEventListener('resize', debouncedHandleResize);
-
-        return () => {
-            window.removeEventListener('resize', debouncedHandleResize);
-        };
-    }, [updateCarousels, memoizedItems]);
+        return <TemplateSkeleton key={Math.random()} />;
+    };
 
     return (
-        <>
-            {carousels.map((carouselItems, index) => (
-                <Carousel 
-                    key={index}
-                    value={carouselItems}
-                    itemTemplate={(item) => {
-                        if (carouselItems.length > 0) {
-                            if (item.topics?.includes('video') && item.topics?.includes('document')) {
-                                return <CombinedTemplate key={item.id} resource={item} isLesson={lessons.includes(item?.d)} />;
-                            } else if (item.type === 'document') {
-                                return <DocumentTemplate key={item.id} document={item} isLesson={lessons.includes(item?.d)} />;
-                            } else if (item.type === 'video') {
-                                return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
-                            } else if (item.type === 'course') {
-                                return <CourseTemplate key={item.id} course={item} />;
-                            }
-                        }
-                        return <TemplateSkeleton key={Math.random()} />;
-                    }}
-                    responsiveOptions={responsiveOptions}
-                    className="mb-4"
-                    pt={{
-                        previousButton: { className: 'hidden' },
-                        nextButton: { className: 'hidden' }
-                    }}
-                />
-            ))}
-        </>
+        <div className="w-full px-4 mb-4">
+            <div className="grid grid-cols-2 gap-4 max-w-full max-tab:grid-cols-1 lg:grid-cols-3">
+                {items.map((item, index) => (
+                    <div key={item?.id || index} className="w-full min-w-0">
+                        {renderItem(item)}
+                    </div>
+                ))}
+            </div>
+        </div>
     );
 }

From 247b66f04ecb9b1e3d3df879a8e64211df040316 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Tue, 18 Mar 2025 16:18:51 -0500
Subject: [PATCH 2/2] Ensure unique keys for resource templates

---
 .../content/carousels/GenericCarousel.js      | 39 ++++++++++++++-----
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/content/carousels/GenericCarousel.js b/src/components/content/carousels/GenericCarousel.js
index 9234a8f..42da495 100644
--- a/src/components/content/carousels/GenericCarousel.js
+++ b/src/components/content/carousels/GenericCarousel.js
@@ -21,27 +21,48 @@ export default function GenericCarousel({items, selectedTopic, title}) {
         });
     }, []);
 
-    const renderItem = (item) => {
-        if (!item) return <TemplateSkeleton key={Math.random()} />;
+    const generateUniqueTemplateKey = (item, index, type) => {
+        if (!item) return `${type}-${index}`;
+        const baseKey = item.id || item.d || `${type}-${index}`;
+        return `${type}-${baseKey}-${index}`;
+    };
+
+    const renderItem = (item, index) => {
+        if (!item) return <TemplateSkeleton key={generateUniqueTemplateKey(item, index, 'skeleton')} />;
         
         if (item.topics?.includes('video') && item.topics?.includes('document')) {
-            return <CombinedTemplate key={item.id} resource={item} isLesson={lessons.includes(item?.d)} />;
+            return <CombinedTemplate 
+                key={generateUniqueTemplateKey(item, index, 'combined')} 
+                resource={item} 
+                isLesson={lessons.includes(item?.d)} 
+            />;
         } else if (item.type === 'document') {
-            return <DocumentTemplate key={item.id} document={item} isLesson={lessons.includes(item?.d)} />;
+            return <DocumentTemplate 
+                key={generateUniqueTemplateKey(item, index, 'document')} 
+                document={item} 
+                isLesson={lessons.includes(item?.d)} 
+            />;
         } else if (item.type === 'video') {
-            return <VideoTemplate key={item.id} video={item} isLesson={lessons.includes(item?.d)} />;
+            return <VideoTemplate 
+                key={generateUniqueTemplateKey(item, index, 'video')} 
+                video={item} 
+                isLesson={lessons.includes(item?.d)} 
+            />;
         } else if (item.type === 'course') {
-            return <CourseTemplate key={item.id} course={item} />;
+            return <CourseTemplate 
+                key={generateUniqueTemplateKey(item, index, 'course')} 
+                course={item} 
+            />;
         }
-        return <TemplateSkeleton key={Math.random()} />;
+        return <TemplateSkeleton key={generateUniqueTemplateKey(item, index, 'fallback')} />;
     };
 
     return (
         <div className="w-full px-4 mb-4">
             <div className="grid grid-cols-2 gap-4 max-w-full max-tab:grid-cols-1 lg:grid-cols-3">
                 {items.map((item, index) => (
-                    <div key={item?.id || index} className="w-full min-w-0">
-                        {renderItem(item)}
+                    <div key={generateUniqueTemplateKey(item, index, 'container')} className="w-full min-w-0">
+                        {renderItem(item, index)}
                     </div>
                 ))}
             </div>