saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed zaps, keeping open subscription

Browse Source
This commit is contained in:
austinkelsay 2024-08-04 19:00:26 -05:00
parent 829d974675
commit c5eb71e4b8
6 changed files with 143 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/content/carousels/templates/CourseTemplate.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo } from "react";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { formatTimestampToHowLongAgo } from "@/utils/time";
@ -11,7 +11,7 @@ const CourseTemplate = ({ course }) => {
const [zapAmount, setZapAmount] = useState(0);
const router = useRouter();
const { returnImageProxy } = useImageProxy();
const { zaps, zapsLoading, zapsError, refetchZaps } = useCoursesZapsQuery({ event: course })
const { zaps, zapsLoading, zapsError } = useCoursesZapsQuery({ event: course });
useEffect(() => {
if (!zaps || zapsLoading || zapsError) return;
@ -63,8 +63,7 @@ const CourseTemplate = ({ course }) => {
formatTimestampToHowLongAgo(course.published_at)
) : (
formatTimestampToHowLongAgo(course.created_at)
)
}
)}
</p>
<ZapDisplay zapAmount={zapAmount} event={course} />
</div>

4
src/components/content/carousels/templates/ResourceTemplate.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo } from "react";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { formatTimestampToHowLongAgo } from "@/utils/time";
@ -9,7 +9,7 @@ import ZapDisplay from "@/components/zaps/ZapDisplay";
const ResourceTemplate = ({ resource }) => {
const [zapAmount, setZapAmount] = useState(0);
const { zaps, zapsLoading, zapsError, refetchZaps } = useResourceZapsQuery({ event: resource })
const { zaps, zapsLoading, zapsError } = useResourceZapsQuery({ event: resource });
const router = useRouter();
const { returnImageProxy } = useImageProxy();

10
src/components/content/carousels/templates/WorkshopTemplate.js
View File

@ -1,9 +1,9 @@
import React, { useEffect, useState, useMemo } from "react";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy";
import { useWorkshopsZapsQuery } from "@/hooks/nostrQueries/useWorkshopsZapsQuery"
import { useWorkshopsZapsQuery } from "@/hooks/nostrQueries/useWorkshopsZapsQuery";
import { getSatAmountFromInvoice } from "@/utils/lightning";
import ZapDisplay from "@/components/zaps/ZapDisplay";
@ -11,7 +11,7 @@ const WorkshopTemplate = ({workshop}) => {
const [zapAmount, setZapAmount] = useState(0);
const router = useRouter();
const { returnImageProxy } = useImageProxy();
const { zaps, zapsLoading, zapsError, refetchZaps } = useWorkshopsZapsQuery({event: workshop});
const { zaps, zapsLoading, zapsError } = useWorkshopsZapsQuery({ event: workshop });
useEffect(() => {
if (!zaps || zapsLoading || zapsError) return;
@ -35,9 +35,7 @@ const WorkshopTemplate = ({workshop}) => {
if (zapsError) return <div>Error: {zapsError}</div>;
return (
<div
className="flex flex-col items-center mx-auto px-4 mt-8 rounded-md"
>
<div className="flex flex-col items-center mx-auto px-4 mt-8 rounded-md">
<div
onClick={() => router.push(`/details/${workshop.id}`)}
className="relative w-full h-0 hover:opacity-80 transition-opacity duration-300 cursor-pointer"

63
src/hooks/nostrQueries/useCoursesZapsQuery.js
View File

@ -1,51 +1,62 @@
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useNDKContext } from '@/context/NDKContext';
export function useCoursesZapsQuery({ event }) {
const [isClient, setIsClient] = useState(false);
const [zaps, setZaps] = useState([]);
const [zapsLoading, setZapsLoading] = useState(true);
const [zapsError, setZapsError] = useState(null);
const ndk = useNDKContext();
useEffect(() => {
setIsClient(true);
}, []);
const fetchZapsFromNDK = async (event) => {
if (!ndk) {
console.error('NDK instance is null');
return [];
}
useEffect(() => {
if (!isClient || !ndk || !event) return;
if (!event) {
console.error('No event provided');
return [];
}
let subscription = null;
let isSubscribed = true;
const fetchZapsFromNDK = async () => {
try {
await ndk.connect();
let zaps = [];
const uniqueEvents = new Set();
const filters = [{ kinds: [9735], "#e": [event.id] }, { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }];
const filters = [
{ kinds: [9735], "#e": [event.id] },
{ kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
];
for (const filter of filters) {
const zapEvents = await ndk.fetchEvents(filter);
zapEvents.forEach(zap => zaps.push(zap));
subscription = ndk.subscribe(filters);
subscription.on('event', (zap) => {
if (isSubscribed) {
uniqueEvents.add(zap);
setZaps(Array.from(uniqueEvents));
}
});
subscription.on('eose', () => {
setZaps(Array.from(uniqueEvents));
setZapsLoading(false);
});
return zaps;
} catch (error) {
console.error('Error fetching zaps from NDK:', error);
return [];
setZapsError('Error fetching zaps from NDK: ' + error);
setZapsLoading(false);
}
};
const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
queryKey: ['coursesZaps', isClient, event],
queryFn: () => fetchZapsFromNDK(event),
staleTime: 1000 * 60 * 3, // 3 minutes
cacheTime: 1000 * 60 * 60, // 1 hour
enabled: isClient,
});
fetchZapsFromNDK();
return { zaps, zapsLoading, zapsError, refetchZaps }
return () => {
isSubscribed = false;
if (subscription) {
subscription.stop();
}
};
}, [isClient, ndk, event]);
return { zaps, zapsLoading, zapsError };
}

63
src/hooks/nostrQueries/useResourceZapsQuery.js
View File

@ -1,51 +1,62 @@
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useNDKContext } from '@/context/NDKContext';
export function useResourceZapsQuery({ event }) {
const [isClient, setIsClient] = useState(false);
const [zaps, setZaps] = useState([]);
const [zapsLoading, setZapsLoading] = useState(true);
const [zapsError, setZapsError] = useState(null);
const ndk = useNDKContext();
useEffect(() => {
setIsClient(true);
}, []);
const fetchZapsFromNDK = async (event) => {
if (!ndk) {
console.error('NDK instance is null');
return [];
}
useEffect(() => {
if (!isClient || !ndk || !event) return;
if (!event) {
console.error('No event provided');
return [];
}
let subscription = null;
let isSubscribed = true;
const fetchZapsFromNDK = async () => {
try {
await ndk.connect();
let zaps = [];
const uniqueEvents = new Set();
const filters = [{ kinds: [9735], "#e": [event.id] }, { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }];
const filters = [
{ kinds: [9735], "#e": [event.id] },
{ kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
];
for (const filter of filters) {
const zapEvents = await ndk.fetchEvents(filter);
zapEvents.forEach(zap => zaps.push(zap));
subscription = ndk.subscribe(filters);
subscription.on('event', (zap) => {
if (isSubscribed) {
uniqueEvents.add(zap);
setZaps(Array.from(uniqueEvents));
}
});
subscription.on('eose', () => {
setZaps(Array.from(uniqueEvents));
setZapsLoading(false);
});
return zaps;
} catch (error) {
console.error('Error fetching zaps from NDK:', error);
return [];
setZapsError('Error fetching zaps from NDK: ' + error);
setZapsLoading(false);
}
};
const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
queryKey: ['resourceZaps', isClient, event],
queryFn: () => fetchZapsFromNDK(event),
staleTime: 1000 * 60 * 3, // 3 minutes
cacheTime: 1000 * 60 * 60, // 1 hour
enabled: isClient,
});
fetchZapsFromNDK();
return { zaps, zapsLoading, zapsError, refetchZaps }
return () => {
isSubscribed = false;
if (subscription) {
subscription.stop();
}
};
}, [isClient, ndk, event]);
return { zaps, zapsLoading, zapsError };
}

63
src/hooks/nostrQueries/useWorkshopsZapsQuery.js
View File

@ -1,51 +1,62 @@
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useNDKContext } from '@/context/NDKContext';
export function useWorkshopsZapsQuery({ event }) {
const [isClient, setIsClient] = useState(false);
const [zaps, setZaps] = useState([]);
const [zapsLoading, setZapsLoading] = useState(true);
const [zapsError, setZapsError] = useState(null);
const ndk = useNDKContext();
useEffect(() => {
setIsClient(true);
}, []);
const fetchZapsFromNDK = async (event) => {
if (!ndk) {
console.error('NDK instance is null');
return [];
}
useEffect(() => {
if (!isClient || !ndk || !event) return;
if (!event) {
console.error('No event provided');
return [];
}
let subscription = null;
let isSubscribed = true;
const fetchZapsFromNDK = async () => {
try {
await ndk.connect();
let zaps = [];
const uniqueEvents = new Set();
const filters = [{ kinds: [9735], "#e": [event.id] }, { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }];
const filters = [
{ kinds: [9735], "#e": [event.id] },
{ kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
];
for (const filter of filters) {
const zapEvents = await ndk.fetchEvents(filter);
zapEvents.forEach(zap => zaps.push(zap));
subscription = ndk.subscribe(filters);
subscription.on('event', (zap) => {
if (isSubscribed) {
uniqueEvents.add(zap);
setZaps(Array.from(uniqueEvents));
}
});
subscription.on('eose', () => {
setZaps(Array.from(uniqueEvents));
setZapsLoading(false);
});
return zaps;
} catch (error) {
console.error('Error fetching zaps from NDK:', error);
return [];
setZapsError('Error fetching zaps from NDK: ' + error);
setZapsLoading(false);
}
};
const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
queryKey: ['workshopsZaps', isClient, event],
queryFn: () => fetchZapsFromNDK(event),
staleTime: 1000 * 60 * 3, // 3 minutes
cacheTime: 1000 * 60 * 60, // 1 hour
enabled: isClient,
});
fetchZapsFromNDK();
return { zaps, zapsLoading, zapsError, refetchZaps }
return () => {
isSubscribed = false;
if (subscription) {
subscription.stop();
}
};
}, [isClient, ndk, event]);
return { zaps, zapsLoading, zapsError };
}