From 17924d338e6a5aeb3089b7b8a51d209955c86a95 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Wed, 16 Oct 2024 20:06:58 -0500 Subject: [PATCH] Order by zapAmount --- .../content/carousels/DocumentsCarousel.js | 26 ++++++++++----- .../content/carousels/VideosCarousel.js | 33 ++++++++++++++----- .../carousels/templates/DocumentTemplate.js | 8 ++--- .../carousels/templates/VideoTemplate.js | 6 ++-- 4 files changed, 49 insertions(+), 24 deletions(-) diff --git a/src/components/content/carousels/DocumentsCarousel.js b/src/components/content/carousels/DocumentsCarousel.js index 8484432..1a86bf9 100644 --- a/src/components/content/carousels/DocumentsCarousel.js +++ b/src/components/content/carousels/DocumentsCarousel.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import axios from 'axios'; import { Carousel } from 'primereact/carousel'; import { parseEvent } from '@/utils/nostr'; @@ -30,10 +30,15 @@ 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 => { @@ -56,12 +61,8 @@ export default function DocumentsCarousel() { try { if (documents && documents.length > 0 && paidLessons.length > 0) { const processedDocuments = documents.map(document => parseEvent(document)); - // 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)); - + // Filter out documents that are in the paid lessons array + const filteredDocuments = processedDocuments.filter(document => !paidLessons.includes(document?.d)); setProcessedDocuments(filteredDocuments); } else { console.log('No documents fetched or empty array returned'); @@ -73,6 +74,15 @@ 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}
} @@ -94,7 +104,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 bc954aa..f660727 100644 --- a/src/components/content/carousels/VideosCarousel.js +++ b/src/components/content/carousels/VideosCarousel.js @@ -1,8 +1,8 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } 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,10 +30,15 @@ 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) { @@ -55,12 +60,8 @@ export default function VideosCarousel() { try { if (videos && videos.length > 0 && paidLessons.length > 0) { const processedVideos = videos.map(video => parseEvent(video)); - - 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)); - + // Filter out videos that are in the paid lessons array + const filteredVideos = processedVideos.filter(video => !paidLessons.includes(video?.d)); setProcessedVideos(filteredVideos); } else { console.log('No videos fetched or empty array returned'); @@ -72,6 +73,15 @@ 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 ( @@ -92,7 +102,12 @@ export default function VideosCarousel() { itemTemplate={(item) => !processedVideos.length ? : - + } responsiveOptions={responsiveOptions} /> diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js index 7bcf98d..102769a 100644 --- a/src/components/content/carousels/templates/DocumentTemplate.js +++ b/src/components/content/carousels/templates/DocumentTemplate.js @@ -14,9 +14,8 @@ import useWindowWidth from "@/hooks/useWindowWidth"; import GenericButton from "@/components/buttons/GenericButton"; import appConfig from "@/config/appConfig"; -export function DocumentTemplate({ document, isLesson }) { +export function DocumentTemplate({ document, isLesson, onZapAmountChange }) { const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document }); - const [nAddress, setNAddress] = useState(null); const [zapAmount, setZapAmount] = useState(0); const router = useRouter(); const { returnImageProxy } = useImageProxy(); @@ -39,8 +38,9 @@ export function DocumentTemplate({ document, isLesson }) { if (zaps.length > 0) { const total = getTotalFromZaps(zaps, document); setZapAmount(total); + onZapAmountChange(document.id, total); } - }, [zaps, document]); + }, [zaps, document, onZapAmountChange]); if (zapsError) return
Error: {zapsError}
; @@ -114,4 +114,4 @@ export function DocumentTemplate({ document, isLesson }) { ) -} \ 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 e62abea..26c0225 100644 --- a/src/components/content/carousels/templates/VideoTemplate.js +++ b/src/components/content/carousels/templates/VideoTemplate.js @@ -15,9 +15,8 @@ import useWindowWidth from "@/hooks/useWindowWidth"; import GenericButton from "@/components/buttons/GenericButton"; import appConfig from "@/config/appConfig"; -export function VideoTemplate({ video, isLesson }) { +export function VideoTemplate({ video, isLesson, onZapAmountChange }) { const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video }); - const [nAddress, setNAddress] = useState(null); const [zapAmount, setZapAmount] = useState(0); const router = useRouter(); const { returnImageProxy } = useImageProxy(); @@ -40,8 +39,9 @@ export function VideoTemplate({ video, isLesson }) { if (zaps.length > 0) { const total = getTotalFromZaps(zaps, video); setZapAmount(total); + onZapAmountChange(video.id, total); } - }, [zaps, video]); + }, [zaps, video, onZapAmountChange]); if (zapsError) return
Error: {zapsError}
;