saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-05-22 01:42:02 +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

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

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

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

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

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

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