Order by zapAmount

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)
+                    // Filter out documents that are in the paid lessons array
-                    const sortedDocuments = processedDocuments.sort((a, b) => b.created_at - a.created_at);
+                    const filteredDocuments = processedDocuments.filter(document => !paidLessons.includes(document?.d));
-
-                    // 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');
@@ -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 <div>Error: {documentsError.message}</div>
     }
@@ -94,7 +104,7 @@ export default function DocumentsCarousel() {
                 }}
                 itemTemplate={(item) => 
                         processedDocuments.length > 0 ? 
-                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} /> : 
+                        <DocumentTemplate key={item.id} document={item} isLesson={freeLessons.includes(item.d)} handleZapAmountChange={handleZapAmountChange} /> : 
                         <TemplateSkeleton key={Math.random()} />
                 }
                 responsiveOptions={responsiveOptions} />

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));
-                    
+                    // Filter out videos that are in the paid lessons array
-                    const sortedVideos = processedVideos.sort((a, b) => b.created_at - a.created_at);
+                    const filteredVideos = processedVideos.filter(video => !paidLessons.includes(video?.d));
-
-                    // 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');
@@ -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 <div>Error: {videosError}</div>;
 
     return (
@@ -92,7 +102,12 @@ export default function VideosCarousel() {
                 itemTemplate={(item) => 
                     !processedVideos.length ? 
                     <TemplateSkeleton key={Math.random()} /> : 
-                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} />
+                    <VideoTemplate 
+                        key={item.id} 
+                        video={item} 
+                        isLesson={freeLessons.includes(item.d)}
+                        onZapAmountChange={handleZapAmountChange}
+                    />
                 }
                 responsiveOptions={responsiveOptions}
             />

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 <div>Error: {zapsError}</div>;
 

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 <div>Error: {zapsError}</div>;