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

Merge pull request #42 from AustinKelsay/bugfix/carousel-cards-disappear-when-clicking-zap

Browse Source 
Grid based layout for resource cards using tailwind instead of using primereact carousel component, this fixed the bug
This commit is contained in:
Austin Kelsay 2025-03-18 16:24:30 -05:00 committed by GitHub
commit e72da87b01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,51 @@ 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 generateUniqueTemplateKey = (item, index, type) => {
if (!item) return `${type}-${index}`;
const baseKey = item.id || item.d || `${type}-${index}`;
return `${type}-${baseKey}-${index}`;
};
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, index) => {
if (!item) return <TemplateSkeleton key={generateUniqueTemplateKey(item, index, 'skeleton')} />;
if (item.topics?.includes('video') && item.topics?.includes('document')) {
return <CombinedTemplate
key={generateUniqueTemplateKey(item, index, 'combined')}
resource={item}
isLesson={lessons.includes(item?.d)}
/>;
} else if (item.type === 'document') {
return <DocumentTemplate
key={generateUniqueTemplateKey(item, index, 'document')}
document={item}
isLesson={lessons.includes(item?.d)}
/>;
} else if (item.type === 'video') {
return <VideoTemplate
key={generateUniqueTemplateKey(item, index, 'video')}
video={item}
isLesson={lessons.includes(item?.d)}
/>;
} else if (item.type === 'course') {
return <CourseTemplate
key={generateUniqueTemplateKey(item, index, 'course')}
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={generateUniqueTemplateKey(item, index, 'fallback')} />;
};
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={generateUniqueTemplateKey(item, index, 'container')} className="w-full min-w-0">
{renderItem(item, index)}
</div>
))}
</div>
</div>
);
}