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

Improvements to zaps zap loading and spinner styles

Browse Source
This commit is contained in:
austinkelsay 2024-08-05 19:45:26 -05:00
parent e265d1ea88
commit aa60c23611
5 changed files with 40 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/zaps/ZapDisplay.js
View File

@ -1,19 +1,32 @@
import React, { useRef } from 'react';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import ZapForm from './ZapForm';
import { ProgressSpinner } from 'primereact/progressspinner';
const ZapDisplay = ({ zapAmount, event, zapsLoading }) => {
const op = useRef(null);
const [extraLoading, setExtraLoading] = useState(false);
useMemo(() => {
let timeout;
if (!zapsLoading && zapAmount === 0) {
setExtraLoading(true);
timeout = setTimeout(() => setExtraLoading(false), 5000);
}
return () => clearTimeout(timeout);
}, [zapsLoading, zapAmount]);
return (
<>
<span className="text-xs cursor-pointer flex items-center" onClick={(e) => op.current.toggle(e)}>
<span className="text-xs cursor-pointer flex items-center relative shadow-md cursor-pointer hover:opacity-80" onClick={(e) => op.current.toggle(e)}>
<i className="pi pi-bolt text-yellow-300"></i>
{zapsLoading ? (
<ProgressSpinner style={{width: '20px', height: '20px'}} strokeWidth="8" animationDuration=".5s" />
) : (
zapAmount !== null ? zapAmount : <ProgressSpinner style={{width: '20px', height: '20px'}} strokeWidth="8" animationDuration=".5s" />
)}
<span className="relative flex items-center min-w-[20px] min-h-[20px]">
{zapsLoading || zapAmount === null || extraLoading ? (
<ProgressSpinner className="absolute top-0 left-0 w-[20px] h-[20px]" strokeWidth="8" animationDuration=".5s" />
) : (
zapAmount
)}
</span>
</span>
<OverlayPanel className='w-[40%] h-[40%]' ref={op}>
<ZapForm event={event} />

56
src/components/zaps/ZapForm.js
View File

@ -1,13 +1,12 @@
import React from "react";
import React, { useEffect } from "react";
import { nip19 } from "nostr-tools";
const ZapForm = ({ event }) => {
console.log('event', event);
const nAddress = nip19.naddrEncode({
kind: event?.kind,
pubkey: event?.pubkey,
identifier: event.d,
})
});
return (
<iframe
@ -21,54 +20,3 @@ const ZapForm = ({ event }) => {
};
export default ZapForm;
// import React, { useState } from "react";
// import { Button } from 'primereact/button';
// import { InputText } from 'primereact/inputtext';
// import { InputTextarea } from 'primereact/inputtextarea';
// import { useNostr } from "@/hooks/useNostr";
// const ZapForm = ({event}) => {
// const [zapAmount, setZapAmount] = useState(0);
// const [comment, setComment] = useState("");
// const { zapEvent } = useNostr();
// const handleZapButton = (amount) => {
// setZapAmount(amount);
// };
// const handleCustomAmountChange = (event) => {
// setZapAmount(event.target.value);
// };
// const handleCommentChange = (event) => {
// setComment(event.target.value);
// };
// const handleSubmit = async () => {
// const millisatAmount = zapAmount * 1000;
// const response = await zapEvent(event, millisatAmount, comment);
// console.log('zap response:', response);
// };
// return (
// <div className="flex flex-col">
// <div className="flex flex-row justify-start">
// {[1, 10, 21, 100, 500, 1000].map(amount => (
// <Button key={amount} label={amount.toString()} icon="pi pi-bolt" severity="success"
// rounded className="mr-2" onClick={() => handleZapButton(amount)} />
// ))}
// </div>
// <div className="flex flex-row w-[100%] justify-between my-4">
// <InputText placeholder="Custom Amount" value={zapAmount} onChange={handleCustomAmountChange} />
// </div>
// <InputTextarea rows={5} placeholder="Message" value={comment} onChange={handleCommentChange} />
// <Button label="Zap" icon="pi pi-bolt" severity="success" className="mt-4" onClick={handleSubmit} />
// </div>
// );
// };
// export default ZapForm;

5
src/hooks/nostrQueries/zaps/useZapsQuery.js
View File

@ -20,6 +20,9 @@ export function useZapsQuery({ event, type }) {
];
const events = await ndk.fetchEvents(filters, { closeOnEose: true });
if (event.id === "f679183f0e66878142186cf7d0ae44ab137dabed1dfcb28a609472afbb7c8d51") {
console.log('events', events);
}
return events;
} catch (error) {
console.error('Error fetching zaps from NDK:', error);
@ -29,7 +32,7 @@ export function useZapsQuery({ event, type }) {
const { data: zaps, isLoading: zapsLoading, error: zapsError, refetch: refetchZaps } = useQuery({
queryKey: ['zaps', isClient, event, type],
queryFn: () => fetchZaps(event),
queryFn: async () => await fetchZaps(event),
staleTime: 10000, // 10 seconds
refetchInterval: 10000, // 10 seconds
enabled: isClient,

18
src/hooks/nostrQueries/zaps/useZapsSubscription.js
View File

@ -16,7 +16,6 @@ export function useZapsSubscription({ event }) {
if (!isClient || !ndk || !event) return;
let subscription = null;
let isSubscribed = true;
const fetchZapsFromNDK = async () => {
try {
@ -31,11 +30,9 @@ export function useZapsSubscription({ event }) {
subscription = ndk.subscribe(filters);
subscription.on('event', (zap) => {
if (isSubscribed) {
uniqueEvents.add(zap);
setZaps(Array.from(uniqueEvents));
setZapsLoading(false);
}
uniqueEvents.add(zap);
setZaps(Array.from(uniqueEvents));
setZapsLoading(false);
});
subscription.on('eose', () => {
@ -43,6 +40,14 @@ export function useZapsSubscription({ event }) {
setZapsLoading(false);
});
// if there are no zaps for 15 seconds and no eose to stop loading
setTimeout(() => {
if (uniqueEvents.size === 0) {
setZapsLoading(false);
setZaps(Array.from(uniqueEvents));
}
}, 15000);
} catch (error) {
setZapsError('Error fetching zaps from NDK: ' + error);
setZapsLoading(false);
@ -52,7 +57,6 @@ export function useZapsSubscription({ event }) {
fetchZapsFromNDK();
return () => {
isSubscribed = false;
if (subscription) {
subscription.stop();
}

5
src/pages/details/[slug].js
View File

@ -33,7 +33,7 @@ export default function Details() {
const [author, setAuthor] = useState(null);
const [bitcoinConnect, setBitcoinConnect] = useState(false);
const [nAddress, setNAddress] = useState(null);
const [zapAmount, setZapAmount] = useState(0);
const [zapAmount, setZapAmount] = useState(null);
const ndk = useNDKContext();
const [user] = useLocalStorageWithEffect('user', {});
@ -122,7 +122,7 @@ export default function Details() {
}, [processedEvent]);
useEffect(() => {
if (!zaps || zaps.length === 0) return;
if (!zaps) return;
let total = 0;
zaps.forEach((zap) => {
@ -133,6 +133,7 @@ export default function Details() {
total += amount;
}
});
setZapAmount(total);
}, [zaps]);