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

Fixed carousel loading state

Browse Source
This commit is contained in:
austinkelsay 2024-04-23 21:30:54 -05:00
parent 11d4acec24
commit bd2969dd8c
4 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/content/carousels/CoursesCarousel.js
View File

@ -25,22 +25,20 @@ const responsiveOptions = [
export default function CoursesCarousel() {
const [processedCourses, setProcessedCourses] = useState([]);
const [loading, setLoading] = useState(true);
const { fetchCourses, fetchZapsForEvents } = useNostr();
useEffect(() => {
const fetch = async () => {
setLoading(true);
try {
const fetchedCourses = await fetchCourses();
if (fetchedCourses && fetchedCourses.length > 0) {
// First process the courses to be ready for display
const processedCourses = fetchedCourses.map(course => parseEvent(course));
// Fetch zaps for all processed courses at once
const allZaps = await fetchZapsForEvents(processedCourses);
console.log('allZaps:', allZaps);
// Process zaps to associate them with their respective courses
const coursesWithZaps = processedCourses.map(course => {
const relevantZaps = allZaps.filter(zap => {
@ -54,7 +52,7 @@ export default function CoursesCarousel() {
zaps: relevantZaps
};
});
setProcessedCourses(coursesWithZaps);
} else {
console.log('No courses fetched or empty array returned');
@ -62,18 +60,20 @@ export default function CoursesCarousel() {
} catch (error) {
console.error('Error fetching courses:', error);
}
setLoading(false);
};
};
fetch();
}, [fetchCourses, fetchZapsForEvents]);
return (
<>
<h2 className="ml-[6%] mt-4">Courses</h2>
<Carousel value={loading ? [{}, {}, {}] : [...processedCourses, ...processedCourses]}
numVisible={2}
itemTemplate={loading ? TemplateSkeleton : CourseTemplate}
responsiveOptions={responsiveOptions} />
<div className={"min-h-[384px]"}>
<Carousel
value={!processedCourses.length > 0 ? [{}, {}, {}] : [...processedCourses, ...processedCourses]}
numVisible={2}
itemTemplate={!processedCourses.length > 0 ? TemplateSkeleton : CourseTemplate}
responsiveOptions={responsiveOptions} />
</div>
</>
);
}

9
src/components/content/carousels/ResourcesCarousel.js
View File

@ -1,8 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Carousel } from 'primereact/carousel';
import { useRouter } from 'next/router';
import { useNostr } from '@/hooks/useNostr';
import { useImageProxy } from '@/hooks/useImageProxy';
import { parseEvent } from '@/utils/nostr';
import ResourceTemplate from '@/components/content/carousels/templates/ResourceTemplate';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
@ -27,12 +25,10 @@ const responsiveOptions = [
export default function ResourcesCarousel() {
const [processedResources, setProcessedResources] = useState([]);
const [loading, setLoading] = useState(true);
const { fetchResources, fetchZapsForEvents } = useNostr();
useEffect(() => {
const fetch = async () => {
setLoading(true);
try {
const fetchedResources = await fetchResources();
if (fetchedResources && fetchedResources.length > 0) {
@ -60,7 +56,6 @@ export default function ResourcesCarousel() {
} catch (error) {
console.error('Error fetching resources:', error);
}
setLoading(false);
};
fetch();
}, [fetchResources, fetchZapsForEvents]); // Assuming fetchZapsForEvents is adjusted to handle resources
@ -69,9 +64,9 @@ export default function ResourcesCarousel() {
return (
<>
<h2 className="ml-[6%] mt-4">Resources</h2>
<Carousel value={loading ? [{}, {}, {}] : [...processedResources, ...processedResources]}
<Carousel value={!processedResources.length > 0 ? [{}, {}, {}] : [...processedResources, ...processedResources]}
numVisible={2}
itemTemplate={loading ? TemplateSkeleton : ResourceTemplate}
itemTemplate={!processedResources.length > 0 ? TemplateSkeleton : ResourceTemplate}
responsiveOptions={responsiveOptions} />
</>
);

7
src/components/content/carousels/WorkshopsCarousel.js
View File

@ -27,12 +27,10 @@ const responsiveOptions = [
export default function WorkshopsCarousel() {
const [processedWorkshops, setProcessedWorkshops] = useState([]);
const [loading, setLoading] = useState(true);
const { fetchWorkshops, fetchZapsForEvents } = useNostr();
useEffect(() => {
const fetch = async () => {
setLoading(true);
try {
const fetchedWorkshops = await fetchWorkshops();
if (fetchedWorkshops && fetchedWorkshops.length > 0) {
@ -60,7 +58,6 @@ export default function WorkshopsCarousel() {
} catch (error) {
console.error('Error fetching workshops:', error);
}
setLoading(false);
};
fetch();
}, [fetchWorkshops, fetchZapsForEvents]); // Assuming fetchZapsForEvents is adjusted to handle workshops
@ -69,9 +66,9 @@ export default function WorkshopsCarousel() {
return (
<>
<h2 className="ml-[6%] mt-4">Workshops</h2>
<Carousel value={loading ? [{}, {}, {}] : [...processedWorkshops, ...processedWorkshops]}
<Carousel value={!processedWorkshops.length > 0 ? [{}, {}, {}] : [...processedWorkshops, ...processedWorkshops]}
numVisible={2}
itemTemplate={loading ? TemplateSkeleton : WorkshopTemplate}
itemTemplate={!processedWorkshops.length > 0 ? TemplateSkeleton : WorkshopTemplate}
responsiveOptions={responsiveOptions} />
</>
);

6
src/components/zaps/ZapDisplay.js
View File

@ -1,13 +1,17 @@
import React, { useRef } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import ZapForm from './ZapForm';
import { ProgressSpinner } from 'primereact/progressspinner';
const ZapDisplay = ({ zapAmount, event }) => {
const op = useRef(null);
return (
<>
<p className="text-xs cursor-pointer" onClick={(e) => op.current.toggle(e)}>
<i className="pi pi-bolt text-yellow-300"></i> {zapAmount}
<i className="pi pi-bolt text-yellow-300"></i>
{zapAmount ? zapAmount : <ProgressSpinner />}
</p>
<OverlayPanel className='w-[40%] h-[40%]' ref={op}>
<ZapForm event={event} />