resource carousel improvements

src/components/resources/ResourcesCarousel.js

@@ -1,41 +1,54 @@
-
 import React, { useState, useEffect } from 'react';
 import { Button } from 'primereact/button';
 import { Carousel } from 'primereact/carousel';
-import { Tag } from 'primereact/tag';
+import Image from 'next/image';
 import { useSelector } from 'react-redux';
+import { useImageProxy } from '@/hooks/useImageProxy';
 import { parseResourceEvent } from '@/utils/nostr';
+import { formatUnixTimestamp } from '@/utils/time';
 
 export default function ResourcesCarousel() {
     const resources = useSelector((state) => state.events.resources);
+    const [processedResources, setProcessedResources] = useState([]);
+    const { returnImageProxy } = useImageProxy();
 
-    console.log('Resources:', resources);
+    useEffect(() => {
+        const processResources = resources.map(resource => {
+            const { content, title, summary, image, published_at } = parseResourceEvent(resource);
+            return { content, title, summary, image, published_at };
+        });
+        setProcessedResources(processResources);
+    }, [resources]);
 
     const resourceTemplate = (resource) => {
-        const { content, title, summary, image, published_at } = parseResourceEvent(resource);
         return (
             <div className="flex flex-col items-center w-full px-4">
                 <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
-                    <img src={image} alt={title} className="w-full h-full object-cover object-center" />
+                    <Image
+                        alt="resource thumbnail"
+                        src={returnImageProxy(resource.image)}
+                        width={344}
+                        height={194}
+                        className="w-full h-full object-cover object-center"
+                    />
                 </div>
                 <div className='text-center'>
-                    <h4 className="mb-1 font-bold text-center">{title}</h4>
-                    <p className="text-center">{summary}</p>
+                    <h4 className="mb-1 font-bold text-center">{resource.title}</h4>
+                    <p className="text-center">{resource.summary}</p>
                     <div className="flex flex-row items-center justify-center gap-2">
                         <Button icon="pi pi-search" rounded />
                         <Button icon="pi pi-star-fill" rounded severity="success" />
                     </div>
-                    <p className="text-center mt-2">Published on {published_at}</p>
+                    <p className="text-center mt-2">Published: {formatUnixTimestamp(resource.published_at)}</p>
                 </div>
             </div>
         );
-    };    
+    };
 
     return (
         <>
             <h1 className="text-2xl font-bold ml-[6%] my-4">Resources</h1>
-            <Carousel value={resources} numVisible={3}  itemTemplate={resourceTemplate} />
+            <Carousel value={processedResources} numVisible={3} itemTemplate={resourceTemplate} />
         </>
-    )
+    );
 }
-        

src/hooks/useNostr.js

@@ -66,7 +66,6 @@ export const useNostr = () => {
         const filter = [{kinds: [30023], authors: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741"]}];
     
         const params = {seenOnEnabled: true};
-        const seenEventIds = new Set(); // Set to keep track of event IDs that have been processed
     
         const hasPlebdevsTag = (eventData) => {
             return eventData.some(([tag, value]) => tag === "t" && value === "plebdevs");
@@ -75,9 +74,7 @@ export const useNostr = () => {
         const sub = pool.current.subscribeMany(relays, filter, {
             ...params,
             onevent: (event) => {
-                // Assuming event has a unique identifier under `id` field
-                if (!seenEventIds.has(event.id) && hasPlebdevsTag(event.tags)) {
-                    seenEventIds.add(event.id); // Add event ID to the set to track it's been processed
+                if (hasPlebdevsTag(event.tags)) {
                     dispatch(addResource(event));
                 }
             },

src/utils/time.js

@@ -0,0 +1,4 @@
+export const formatUnixTimestamp = (time) => {
+    const date = new Date(time * 1000); // Convert to milliseconds
+    return date.toDateString();
+}