saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ensure unique keys for resource templates

Browse Source
This commit is contained in:
austinkelsay 2025-03-18 16:18:51 -05:00
parent 4fb258211d
commit 247b66f04e
1 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/content/carousels/GenericCarousel.js
View File

@ -21,27 +21,48 @@ export default function GenericCarousel({items, selectedTopic, title}) {
}); });
}, []); }, []);
const renderItem = (item) => { const generateUniqueTemplateKey = (item, index, type) => {
if (!item) return <TemplateSkeleton key={Math.random()} />; 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')) { 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') { } 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') { } 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') { } 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 ( return (
<div className="w-full px-4 mb-4"> <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"> <div className="grid grid-cols-2 gap-4 max-w-full max-tab:grid-cols-1 lg:grid-cols-3">
{items.map((item, index) => ( {items.map((item, index) => (
<div key={item?.id || index} className="w-full min-w-0"> <div key={generateUniqueTemplateKey(item, index, 'container')} className="w-full min-w-0">
{renderItem(item)} {renderItem(item, index)}
</div> </div>
))} ))}
</div> </div>