Revert zap ordering

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 <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>

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
+                    // Sort documents by created_at in descending order (most recent first)
-                    const filteredDocuments = processedDocuments.filter(document => !paidLessons.includes(document?.d));
+                    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} />

src/components/content/carousels/VideosCarousel.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 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 
+                    <VideoTemplate key={item.id} video={item} isLesson={freeLessons.includes(item.d)} />
-                        key={item.id} 
-                        video={item} 
-                        isLesson={freeLessons.includes(item.d)}
-                        onZapAmountChange={handleZapAmountChange}
-                    />
                 }
                 responsiveOptions={responsiveOptions}
             />

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) {

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

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