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

Revert zap ordering

Browse Source
This commit is contained in:
austinkelsay 2024-10-16 20:14:40 -05:00
parent b4534a23c4
commit 94474cddf1
6 changed files with 33 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, use } from 'react';
import { Carousel } from 'primereact/carousel';
import { parseCourseEvent } from '@/utils/nostr';
import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate';
@ -26,21 +26,20 @@ const responsiveOptions = [
export default function CoursesCarousel() {
const [processedCourses, setProcessedCourses] = useState([]);
const [zapAmounts, setZapAmounts] = useState({});
const { courses, coursesLoading, coursesError } = useCourses()
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 450;
const handleZapAmountChange = useCallback((courseId, amount) => {
setZapAmounts(prev => ({ ...prev, [courseId]: amount }));
}, []);
useEffect(() => {
const fetch = async () => {
try {
if (courses && courses.length > 0) {
const processedCourses = courses.map(course => parseCourseEvent(course));
setProcessedCourses(processedCourses);
// Sort courses by created_at in descending order (most recent first)
const sortedCourses = processedCourses.sort((a, b) => b.created_at - a.created_at);
setProcessedCourses(sortedCourses);
} else {
console.log('No courses fetched or empty array returned');
}
@ -51,15 +50,6 @@ export default function CoursesCarousel() {
fetch();
}, [courses]);
useEffect(() => {
if (Object.keys(zapAmounts).length === processedCourses.length) {
const sortedCourses = [...processedCourses].sort((a, b) =>
(zapAmounts[b.id] || 0) - (zapAmounts[a.id] || 0)
);
setProcessedCourses(sortedCourses);
}
}, [zapAmounts, processedCourses]);
if (coursesError) {
return <div>Error: {coursesError.message}</div>
}
@ -83,7 +73,7 @@ export default function CoursesCarousel() {
itemTemplate={(item) =>
!processedCourses.length ?
<TemplateSkeleton key={Math.random()} /> :
<CourseTemplate key={item.id} course={item} onZapAmountChange={handleZapAmountChange} />
<CourseTemplate key={item.id} course={item} />
}
responsiveOptions={responsiveOptions} />
</div>

26
src/components/content/carousels/DocumentsCarousel.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Carousel } from 'primereact/carousel';
import { parseEvent } from '@/utils/nostr';
@ -30,15 +30,10 @@ export default function DocumentsCarousel() {
const [processedDocuments, setProcessedDocuments] = useState([]);
const [paidLessons, setPaidLessons] = useState([]);
const [freeLessons, setFreeLessons] = useState([]);
const [zapAmounts, setZapAmounts] = useState({});
const { documents, documentsLoading, documentsError } = useDocuments()
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 450;
const handleZapAmountChange = useCallback((documentId, amount) => {
setZapAmounts(prev => ({ ...prev, [documentId]: amount }));
}, []);
// todo: cache this in react query
useEffect(() => {
axios.get('/api/lessons').then(res => {
@ -61,8 +56,12 @@ export default function DocumentsCarousel() {
try {
if (documents && documents.length > 0 && paidLessons.length > 0) {
const processedDocuments = documents.map(document => parseEvent(document));
// Filter out documents that are in the paid lessons array
const filteredDocuments = processedDocuments.filter(document => !paidLessons.includes(document?.d));
// Sort documents by created_at in descending order (most recent first)
const sortedDocuments = processedDocuments.sort((a, b) => b.created_at - a.created_at);
// filter out documents that are in the paid lessons array
const filteredDocuments = sortedDocuments.filter(document => !paidLessons.includes(document?.d));
setProcessedDocuments(filteredDocuments);
} else {
console.log('No documents fetched or empty array returned');
@ -74,15 +73,6 @@ export default function DocumentsCarousel() {
fetch();
}, [documents, paidLessons]);
useEffect(() => {
if (Object.keys(zapAmounts).length === processedDocuments.length) {
const sortedDocuments = [...processedDocuments].sort((a, b) =>
(zapAmounts[b.id] || 0) - (zapAmounts[a.id] || 0)
);
setProcessedDocuments(sortedDocuments);
}
}, [zapAmounts, processedDocuments]);
if (documentsError) {
return <div>Error: {documentsError.message}</div>
}
@ -104,7 +94,7 @@ export default function DocumentsCarousel() {
}}
itemTemplate={(item) =>
processedDocuments.length > 0 ?
<DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} handleZapAmountChange={handleZapAmountChange} /> :
<DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} /> :
<TemplateSkeleton key={Math.random()} />
}
responsiveOptions={responsiveOptions} />

33
src/components/content/carousels/VideosCarousel.js
View File

@ -1,8 +1,8 @@
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Carousel } from 'primereact/carousel';
import { parseEvent } from '@/utils/nostr';
import { VideoTemplate } from '@/components/content/carousels/templates/VideoTemplate';
import {VideoTemplate} from '@/components/content/carousels/templates/VideoTemplate';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
import { useVideos } from '@/hooks/nostr/useVideos';
import useWindowWidth from '@/hooks/useWindowWidth';
@ -30,15 +30,10 @@ export default function VideosCarousel() {
const [processedVideos, setProcessedVideos] = useState([]);
const [paidLessons, setPaidLessons] = useState([]);
const [freeLessons, setFreeLessons] = useState([]);
const [zapAmounts, setZapAmounts] = useState({});
const { videos, videosLoading, videosError } = useVideos();
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 450;
const handleZapAmountChange = useCallback((videoId, amount) => {
setZapAmounts(prev => ({ ...prev, [videoId]: amount }));
}, []);
useEffect(() => {
axios.get('/api/lessons').then(res => {
if (res.data) {
@ -60,8 +55,12 @@ export default function VideosCarousel() {
try {
if (videos && videos.length > 0 && paidLessons.length > 0) {
const processedVideos = videos.map(video => parseEvent(video));
// Filter out videos that are in the paid lessons array
const filteredVideos = processedVideos.filter(video => !paidLessons.includes(video?.d));
const sortedVideos = processedVideos.sort((a, b) => b.created_at - a.created_at);
// filter out videos that are in the paid lessons array
const filteredVideos = sortedVideos.filter(video => !paidLessons.includes(video?.d));
setProcessedVideos(filteredVideos);
} else {
console.log('No videos fetched or empty array returned');
@ -73,15 +72,6 @@ export default function VideosCarousel() {
fetch();
}, [videos, paidLessons]);
useEffect(() => {
if (Object.keys(zapAmounts).length === processedVideos.length) {
const sortedVideos = [...processedVideos].sort((a, b) =>
(zapAmounts[b.id] || 0) - (zapAmounts[a.id] || 0)
);
setProcessedVideos(sortedVideos);
}
}, [zapAmounts, processedVideos]);
if (videosError) return <div>Error: {videosError}</div>;
return (
@ -102,12 +92,7 @@ export default function VideosCarousel() {
itemTemplate={(item) =>
!processedVideos.length ?
<TemplateSkeleton key={Math.random()} /> :
<VideoTemplate
key={item.id}
video={item}
isLesson={freeLessons.includes(item.d)}
onZapAmountChange={handleZapAmountChange}
/>
<VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} />
}
responsiveOptions={responsiveOptions}
/>

5
src/components/content/carousels/templates/CourseTemplate.js
View File

@ -15,7 +15,7 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig";
export function CourseTemplate({ course, onZapAmountChange }) {
export function CourseTemplate({ course }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
const [zapAmount, setZapAmount] = useState(0);
const [lessonCount, setLessonCount] = useState(0);
@ -29,9 +29,8 @@ export function CourseTemplate({ course, onZapAmountChange }) {
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, course);
setZapAmount(total);
onZapAmountChange(course.id, total);
}
}, [zaps, course, onZapAmountChange]);
}, [zaps, course]);
useEffect(() => {
if (course && course?.tags) {

8
src/components/content/carousels/templates/DocumentTemplate.js
View File

@ -14,8 +14,9 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig";
export function DocumentTemplate({ document, isLesson, onZapAmountChange }) {
export function DocumentTemplate({ document, isLesson }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document });
const [nAddress, setNAddress] = useState(null);
const [zapAmount, setZapAmount] = useState(0);
const router = useRouter();
const { returnImageProxy } = useImageProxy();
@ -38,9 +39,8 @@ export function DocumentTemplate({ document, isLesson, onZapAmountChange }) {
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, document);
setZapAmount(total);
onZapAmountChange(document.id, total);
}
}, [zaps, document, onZapAmountChange]);
}, [zaps, document]);
if (zapsError) return <div>Error: {zapsError}</div>;
@ -114,4 +114,4 @@ export function DocumentTemplate({ document, isLesson, onZapAmountChange }) {
</CardFooter>
</Card>
)
}
}

6
src/components/content/carousels/templates/VideoTemplate.js
View File

@ -15,8 +15,9 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig";
export function VideoTemplate({ video, isLesson, onZapAmountChange }) {
export function VideoTemplate({ video, isLesson }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
const [nAddress, setNAddress] = useState(null);
const [zapAmount, setZapAmount] = useState(0);
const router = useRouter();
const { returnImageProxy } = useImageProxy();
@ -39,9 +40,8 @@ export function VideoTemplate({ video, isLesson, onZapAmountChange }) {
if (zaps.length > 0) {
const total = getTotalFromZaps(zaps, video);
setZapAmount(total);
onZapAmountChange(video.id, total);
}
}, [zaps, video, onZapAmountChange]);
}, [zaps, video]);
if (zapsError) return <div>Error: {zapsError}</div>;