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] 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>