diff --git a/client/src/components/PostCard/OPPostCard.tsx b/client/src/components/PostCard/OPPostCard.tsx new file mode 100644 index 0000000..6763820 --- /dev/null +++ b/client/src/components/PostCard/OPPostCard.tsx @@ -0,0 +1,97 @@ +import CardContainer from './CardContainer'; +import { FolderIcon } from '@heroicons/react/24/outline'; +import { parseContent } from '../../utils/content'; +import { Event } from 'nostr-tools'; + +const colorCombos = [ + 'from-red-400 to-yellow-500', + 'from-green-400 to-blue-500', + 'from-purple-400 to-pink-500', + 'from-yellow-400 to-orange-500', + 'from-indigo-400 to-purple-500', + 'from-pink-400 to-red-500', + 'from-blue-400 to-indigo-500', + 'from-orange-400 to-red-500', + 'from-teal-400 to-green-500', + 'from-cyan-400 to-teal-500', + 'from-lime-400 to-green-500', + 'from-amber-400 to-orange-500', + 'from-rose-400 to-pink-500', + 'from-violet-400 to-purple-500', + 'from-sky-400 to-cyan-500' +]; + +const getColorFromHash = (id: string, colors: string[]): string => { + // Create a simple hash from the event.id + let hash = 0; + for (let i = 0; i < id.length; i++) { + hash = (hash << 5) - hash + id.charCodeAt(i); + } + + // Use the hash to pick a color from the colors array + const index = Math.abs(hash) % colors.length; + return colors[index]; +}; + +const timeAgo = (unixTime: number) => { + const seconds = Math.floor((new Date().getTime() / 1000) - unixTime); + + if (seconds < 60) return `now`; + + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return `${minutes}m`; + + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours}h`; + + const days = Math.floor(hours / 24); + return `${days} days ago`; +}; + +const PostCard = ({ event}: { event: Event }) => { + // Replace 10 with the actual number of comments for each post + const numberOfComments = 10; + + const { comment, file } = parseContent(event); + + // const replyList = await relay.list([ + // { + // kinds: [1], + // limit: 200, + // }, + // ]); + const colorCombo = getColorFromHash(event.pubkey, colorCombos); + + return ( + <> + +
+
+
+
+
Anonymous
+
+
+
{timeAgo(event.created_at)}
+ + {numberOfComments} +
+
+
+ {comment} +
+ {file !== "" && ( +
+ +
+ )} +
+ + + ); +}; + +export default PostCard; \ No newline at end of file diff --git a/client/src/components/PostCard/PostCard.tsx b/client/src/components/PostCard/PostCard.tsx index 0c1e482..afaaaed 100644 --- a/client/src/components/PostCard/PostCard.tsx +++ b/client/src/components/PostCard/PostCard.tsx @@ -2,6 +2,7 @@ import CardContainer from './CardContainer'; import { FolderIcon } from '@heroicons/react/24/outline'; import { parseContent } from '../../utils/content'; import { Event } from 'nostr-tools'; +import { nip19 } from 'nostr-tools'; const colorCombos = [ 'from-red-400 to-yellow-500', @@ -60,11 +61,12 @@ const PostCard = ({ event}: { event: Event }) => { // limit: 200, // }, // ]); - const colorCombo = getColorFromHash(event.id, colorCombos); + const colorCombo = getColorFromHash(event.pubkey, colorCombos); return ( <> +
@@ -89,6 +91,7 @@ const PostCard = ({ event}: { event: Event }) => {
)} */}
+ ); diff --git a/client/src/components/Thread/Thread.tsx b/client/src/components/Thread/Thread.tsx index 3aa6c47..dcb9adc 100644 --- a/client/src/components/Thread/Thread.tsx +++ b/client/src/components/Thread/Thread.tsx @@ -1,13 +1,18 @@ import { useParams } from 'react-router-dom'; import { useState } from "react"; -import { Event } from "nostr-tools" +import { Event, nip19 } from "nostr-tools" import { subNote } from '../../utils/subscriptions'; import { useEffect } from 'react'; import PostCard from '../PostCard/PostCard'; +import { uniqBy } from '../../utils/utils'; +import OPPostCard from '../PostCard/OPPostCard'; +import { DocumentTextIcon, FolderPlusIcon } from '@heroicons/react/24/outline'; const Thread = () => { const { id } = useParams(); const [events, setEvents] = useState([]); // Initialize state + let decodeResult = nip19.decode(id as string); + // Define your callback function for subGlobalFeed const onEvent = (event: Event, relay: string) => { @@ -16,20 +21,54 @@ const Thread = () => { }; useEffect(() => { + if (decodeResult.type === 'note') { + let id_to_hex: string = decodeResult.data; + // Call your subNote function or do whatever you need to do with id_to_hex + subNote(id_to_hex, onEvent); + } // Subscribe to global feed when the component mounts - subNote(id as string, onEvent); - // Optionally, return a cleanup function to unsubscribe when the component unmounts return () => { // Your cleanup code here }; }, []); // Empty dependency array means this useEffect runs once when the component mounts + const uniqEvents = events.length > 0 ? uniqBy(events, "id") : []; + + if (!uniqEvents[0]) { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); + } return ( <>
- {events.sort((a, b) => b.created_at - a.created_at).map((event, index) => ( + +
+ + +
+
{/* This is the white line separator */} + {uniqEvents.sort((a, b) => b.created_at - a.created_at).map((event, index) => ( ))}