From 94474cddf144e061d5b022d1558b9c7e3dc9c011 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Wed, 16 Oct 2024 20:14:40 -0500 Subject: [PATCH] Revert zap ordering --- .../content/carousels/CoursesCarousel.js | 24 ++++---------- .../content/carousels/DocumentsCarousel.js | 26 +++++---------- .../content/carousels/VideosCarousel.js | 33 +++++-------------- .../carousels/templates/CourseTemplate.js | 5 ++- .../carousels/templates/DocumentTemplate.js | 8 ++--- .../carousels/templates/VideoTemplate.js | 6 ++-- 6 files changed, 33 insertions(+), 69 deletions(-) diff --git a/src/components/content/carousels/CoursesCarousel.js b/src/components/content/carousels/CoursesCarousel.js index ae4b2c7..f7b09ce 100644 --- a/src/components/content/carousels/CoursesCarousel.js +++ b/src/components/content/carousels/CoursesCarousel.js @@ -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
Error: {coursesError.message}
} @@ -83,7 +73,7 @@ export default function CoursesCarousel() { itemTemplate={(item) => !processedCourses.length ? : - + } responsiveOptions={responsiveOptions} /> diff --git a/src/components/content/carousels/DocumentsCarousel.js b/src/components/content/carousels/DocumentsCarousel.js index 1a86bf9..8484432 100644 --- a/src/components/content/carousels/DocumentsCarousel.js +++ b/src/components/content/carousels/DocumentsCarousel.js @@ -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
Error: {documentsError.message}
} @@ -104,7 +94,7 @@ export default function DocumentsCarousel() { }} itemTemplate={(item) => processedDocuments.length > 0 ? - : + : } responsiveOptions={responsiveOptions} /> diff --git a/src/components/content/carousels/VideosCarousel.js b/src/components/content/carousels/VideosCarousel.js index f660727..bc954aa 100644 --- a/src/components/content/carousels/VideosCarousel.js +++ b/src/components/content/carousels/VideosCarousel.js @@ -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
Error: {videosError}
; return ( @@ -102,12 +92,7 @@ export default function VideosCarousel() { itemTemplate={(item) => !processedVideos.length ? : - + } responsiveOptions={responsiveOptions} /> diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js index 3660a7d..6acfcf6 100644 --- a/src/components/content/carousels/templates/CourseTemplate.js +++ b/src/components/content/carousels/templates/CourseTemplate.js @@ -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) { diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js index 102769a..7bcf98d 100644 --- a/src/components/content/carousels/templates/DocumentTemplate.js +++ b/src/components/content/carousels/templates/DocumentTemplate.js @@ -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
Error: {zapsError}
; @@ -114,4 +114,4 @@ export function DocumentTemplate({ document, isLesson, onZapAmountChange }) { ) -} +} \ No newline at end of file diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js index 26c0225..e62abea 100644 --- a/src/components/content/carousels/templates/VideoTemplate.js +++ b/src/components/content/carousels/templates/VideoTemplate.js @@ -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
Error: {zapsError}
;