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

Add zaps into templates, work on normalizing resources template

Browse Source
This commit is contained in:
austinkelsay 2024-04-21 18:06:23 -05:00
parent 646fe948fb
commit 6231da2a37
3 changed files with 94 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,6 @@ const CourseTemplate = (course) => {
const fetchZaps = async () => {
try {
const zaps = await fetchZapsForEvent(course.id);
console.log('zaps:', zaps);
setZaps(zaps);
} catch (error) {
console.error('Error fetching zaps:', error);

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

@ -1,39 +1,78 @@
import React from "react";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy";
import { useNostr } from "@/hooks/useNostr";
import { getSatAmountFromInvoice } from "@/utils/lightning";
const ResourceTemplate = (resource) => {
const [zaps, setZaps] = useState([]);
const [zapAmount, setZapAmount] = useState(null);
const router = useRouter();
const { returnImageProxy } = useImageProxy();
const { width, height } = useResponsiveImageDimensions();
const { fetchZapsForEvent } = useNostr();
useEffect(() => {
const fetchZaps = async () => {
try {
const zaps = await fetchZapsForEvent(resource.id);
setZaps(zaps);
} catch (error) {
console.error('Error fetching zaps:', error);
}
};
fetchZaps();
}, [fetchZapsForEvent, resource]);
useEffect(() => {
if (zaps.length > 0) {
zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) {
const amount = getSatAmountFromInvoice(invoice);
setZapAmount(zapAmount + amount);
}
})
}
}, [zaps]);
return (
<div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${resource.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg">
<div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto">
<div style={{ width: width < 768 ? "auto" : width }} onClick={() => router.push(`/details/${resource.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md">
<div style={{ maxWidth: width, minWidth: width }} className="max-tab:h-auto max-mob:h-auto">
<Image
alt="resource thumbnail"
src={returnImageProxy(resource.image)}
quality={100}
width={width}
height={height}
className="w-full h-full object-cover object-center rounded-md"
className="w-full object-cover object-center rounded-md"
/>
<div className='flex flex-col justify-start'>
<div className='flex flex-col justify-start min-h-max'>
<h4 className="mb-1 font-bold text-2xl font-blinker">{resource.title}</h4>
<p style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'prewrap',
font: '400 1rem/1.5 Blinker, sans-serif'
}}>
{resource.summary}
</p>
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.published_at)}</p>
<div style={{ height: '90px', display: 'flex', alignItems: 'flex-start' }}>
<p style={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'normal',
font: '400 1rem/1.5 Blinker, sans-serif',
flexGrow: 1
}}>
{resource.summary}
</p>
</div>
<div className="flex flex-row justify-between w-full">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.published_at)}</p>
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
</div>
</div>
</div>
</div>

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

@ -1,14 +1,47 @@
import React from "react";
import React, {useEffect, useState} from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
import { formatTimestampToHowLongAgo } from "@/utils/time";
import { useImageProxy } from "@/hooks/useImageProxy";
import { useNostr } from "@/hooks/useNostr";
import {getSatAmountFromInvoice} from "@/utils/lightning";
const WorkshopTemplate = (workshop) => {
const [zaps, setZaps] = useState([]);
const [zapAmount, setZapAmount] = useState(null);
const router = useRouter();
const { returnImageProxy } = useImageProxy();
const { width, height } = useResponsiveImageDimensions();
const { fetchZapsForEvent } = useNostr();
useEffect(() => {
const fetchZaps = async () => {
try {
const zaps = await fetchZapsForEvent(workshop.id);
setZaps(zaps);
} catch (error) {
console.error('Error fetching zaps:', error);
}
};
fetchZaps();
}, [fetchZapsForEvent, workshop]);
useEffect(() => {
if (zaps.length > 0) {
zaps.map((zap) => {
const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
const invoice = bolt11Tag ? bolt11Tag[1] : null;
if (invoice) {
const amount = getSatAmountFromInvoice(invoice);
setZapAmount(zapAmount + amount);
}
})
}
}, [zaps]);
return (
<div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${workshop.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg">
<div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto">
@ -33,7 +66,10 @@ const WorkshopTemplate = (workshop) => {
}}>
{workshop.summary}
</p>
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
<div className="flex flex-row justify-between w-full">
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
<p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
</div>
</div>
</div>
</div>