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

Order by zapAmount

Browse Source
This commit is contained in:
austinkelsay 2024-10-16 20:06:58 -05:00
parent e40ec068e7
commit 17924d338e
4 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 <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} />

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

@ -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 <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}
/>

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

@ -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>;
@ -114,4 +114,4 @@ export function DocumentTemplate({ document, isLesson }) {
</CardFooter>
</Card>
)
}
}

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

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