saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 10:51:20 +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) => {
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>