clean spaghetti a lil

client/src/components/Home.tsx

@@ -47,7 +47,7 @@ const Home = () => {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
         <NewThreadCard />
         {filteredAndSortedEvents.map((event, index) => (
-          <PostCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
+          <PostCard key={event.id} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
         ))}
       </div>
     </main>

client/src/components/Modals/LinkPreview.tsx

@@ -0,0 +1,53 @@
+import { getLinkPreview } from 'link-preview-js';
+import { useState, useEffect } from 'react';
+
+
+const LinkModal = ({ key, url }: { key: string, url: string}) => {
+    const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
+
+    useEffect(() => {
+      const fetchLinkPreview = async () => {
+        getLinkPreview(url)          
+        .then((preview) => setLinkPreview(preview as LinkPreview))
+        .catch((error) => console.error(error));
+      };
+  
+      fetchLinkPreview();
+    }, [url]);
+  
+    if (!linkPreview) {
+      return <></>; // or some loading state
+    }
+    
+  return (
+    <div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
+    <a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
+      <img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/>
+      <div className="font-semibold text-xs text-gray-300">
+        {linkPreview.title}
+      </div>
+    </a>
+  </div>
+  );
+};
+
+interface LinkPreview {
+    url: string;
+    title: string;
+    siteName?: string;
+    description?: string;
+    mediaType: string;
+    contentType?: string;
+    images: string[];
+    videos: {
+      url?: string;
+      secureUrl?: string;
+      type?: string;
+      width?: string;
+      height?: string;
+      [key: string]: any;
+    }[];
+    [key: string]: any;
+  }
+
+export default LinkModal;

client/src/components/Modals/QuoteEmbed.tsx

@@ -1,4 +1,4 @@
-import CardContainer from './CardContainer';
+import CardContainer from '../PostCard/CardContainer';
 import { FolderIcon } from '@heroicons/react/24/outline';
 import { parseContent } from '../../utils/content';
 import { Event } from 'nostr-tools';
@@ -82,7 +82,7 @@ const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}
     }, [comment]);
     
   return (
-    <div className="link-preview p-1 bg-gradient-to-r from-black to-neutral-900 rounded-lg border border-neutral-800">
+    <div className="p-1 bg-gradient-to-r from-black to-neutral-900 rounded-lg border border-neutral-800">
         <div className="flex flex-col">
           <div className="flex justify-between items-center">
             <div className="flex items-center">

client/src/components/Modals/TextModal.tsx

@@ -0,0 +1,65 @@
+import QuoteEmbed from "./QuoteEmbed";
+import { getLinkPreview } from 'link-preview-js';
+import { Event } from 'nostr-tools';
+import { useEffect, useState } from "react";
+import { getMetadata, uniqBy } from '../../utils/utils';
+import { subNoteOnce } from '../../utils/subscriptions';
+import { nip19 } from "nostr-tools";
+import LinkModal from "./LinkPreview";
+
+const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
+    const [finalComment, setFinalComment] = useState(comment)
+    const [quoteEvents, setQuoteEvents] = useState<Event[]>([]); // Initialize state
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [url, setUrl] = useState('')
+
+      // Define your callback function for subGlobalFeed
+    const onEvent = (event: Event, relay: string) => {
+        setQuoteEvents((prevEvents) => [...prevEvents, event]);
+        console.log(event.id + ' ' + event.kind + ' ' + event.tags);
+    };
+
+    useEffect(() => {
+        const urls = comment.match(/\bhttps?:\/\/\S+/gi);
+        if (urls && urls.length > 0) {
+            setUrl(url)
+            setFinalComment(finalComment.replace(url, '').trim())
+        }
+    
+        const match = comment.match(/\bnostr:([a-z0-9]+)/i);
+        const nostrQuoteID = match && match[1];
+        if (nostrQuoteID && nostrQuoteID.length > 0) {
+          let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
+          subNoteOnce(id_to_hex, onEvent);
+          setFinalComment(finalComment.replace('nostr:'+nostrQuoteID, '').trim())
+        }
+      }, [comment]);
+    
+    const getMetadataEvent = (event: Event) => {
+    const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
+    if (metadataEvent) {
+        return metadataEvent;
+    }
+    return null;
+    }
+
+    return (
+      <div className="mr-2 flex flex-col break-words">
+        {isExpanded ? finalComment : finalComment.slice(0, 240)}
+        {finalComment.length > 240 && (
+          <button className="text-gray-500">
+            ... Read more
+          </button>
+        )}
+        {url !== '' && (
+            <LinkModal key={key} url={url} />
+        )}
+        {quoteEvents[0] && quoteEvents.length > 0 && (
+          <QuoteEmbed event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
+        )}
+      </div>
+    );
+  }
+  
+  export default ContentPreview;
+  

client/src/components/PostCard/PostCard.tsx

@@ -3,12 +3,8 @@ import { FolderIcon } from '@heroicons/react/24/outline';
 import { parseContent } from '../../utils/content';
 import { Event } from 'nostr-tools';
 import { nip19 } from 'nostr-tools';
-import { useEffect, useState } from 'react';
-import { subNote } from '../../utils/subscriptions';
 import { getMetadata, uniqBy } from '../../utils/utils';
-import { getLinkPreview } from 'link-preview-js';
+import ContentPreview from'../Modals/TextModal';
-import { subNoteOnce } from '../../utils/subscriptions';
-import QuoteEmbed from './QuoteEmbed';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -42,9 +38,9 @@ const getColorFromHash = (id: string, colors: string[]): string => {
 
 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`;
 
@@ -58,132 +54,56 @@ const timeAgo = (unixTime: number) => {
   return `${weeks}w`;
 };
 
-const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
+const PostCard = ({ key, event, metadata, replyCount }: { key: string, event: Event, metadata: Event | null, replyCount: number }) => {
-    // Replace 10 with the actual number of comments for each post
+  let { comment, file } = parseContent(event);
-    const numberOfComments = 10;
+  const colorCombo = getColorFromHash(event.pubkey, colorCombos);
-    let { comment, file } = parseContent(event);
-    const colorCombo = getColorFromHash(event.pubkey, colorCombos);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const truncatedComment = comment.slice(0, 240);
 
-    let metadataParsed = null;
+  let metadataParsed = null;
-    if (metadata !== null) {
+  if (metadata !== null) {
-        metadataParsed = getMetadata(metadata);
+    metadataParsed = getMetadata(metadata);
-    }
-
-    const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
-    const [quoteEvents, setQuoteEvents] = useState<Event[]>([]); // Initialize state
-
-        // Define your callback function for subGlobalFeed
-      const onEvent = (event: Event, relay: string) => {
-          setQuoteEvents((prevEvents) => [...prevEvents, event]);
-          console.log(event.id + ' ' + event.kind + ' ' + event.tags);
-      };
-
-    useEffect(() => {
-      const urls = comment.match(/\bhttps?:\/\/\S+/gi);
-      if (urls && urls.length > 0) {
-        getLinkPreview(urls[0])
-          .then((preview) => setLinkPreview(preview as LinkPreview))
-          .catch((error) => console.error(error));
-      }
-
-      const match = comment.match(/\bnostr:([a-z0-9]+)/i);
-      const nostrQuoteID = match && match[1];
-      if (nostrQuoteID && nostrQuoteID.length > 0) {
-        let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
-        subNoteOnce(id_to_hex, onEvent);
-
-        comment = comment.replace(/\bnostr:[a-z0-9]+\b/i, '').trim();
-      }
-    }, [comment]);
-
-    const getMetadataEvent = (event: Event) => {
-      const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
-      if (metadataEvent) {
-          return metadataEvent;
-      }
-      return null;
   }
-    
+
   return (
     <>
       <CardContainer>
         <a href={`/thread/${nip19.noteEncode(event.id)}`}>
-        <div className="flex flex-col">
+          <div className="flex flex-col">
-          <div className="flex justify-between items-center">
+            <div className="flex justify-between items-center">
-            <div className="flex items-center">
+              <div className="flex items-center">
-            {metadataParsed ? 
+                {metadataParsed ?
-              <>
+                  <>
-              <img className={`h-8 w-8 rounded-full`} src={metadataParsed.picture} />
+                    <img className={`h-8 w-8 rounded-full`} src={metadataParsed.picture} />
-              <div className="ml-2 text-md font-semibold">{metadataParsed.name}</div>
+                    <div className="ml-2 text-md font-semibold">{metadataParsed.name}</div>
-              </>
+                  </>
-              :
+                  :
-              <>
+                  <>
-              <div className={`h-8 w-8 bg-gradient-to-r ${colorCombo} rounded-full`} />
+                    <div className={`h-8 w-8 bg-gradient-to-r ${colorCombo} rounded-full`} />
-              <div className="ml-2 text-md font-semibold">Anonymous</div>
+                    <div className="ml-2 text-md font-semibold">Anonymous</div>
-              </>
+                  </>
-            }
+                }
+              </div>
+              <div className="flex items-center ml-auto">
+                <div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
+                <FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
+                <span className="text-xs text-gray-500">{replyCount}</span>
+              </div>
             </div>
-            <div className="flex items-center ml-auto">
+            <div className="mr-2 flex flex-col break-words">
-              <div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
+              <ContentPreview key={key} comment={comment} />
-              <FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
-              <span className="text-xs text-gray-500">{replyCount}</span>
-            </div>  
-          </div>
-          <div className="mr-2 flex flex-col break-words">
-          {isExpanded ? comment : truncatedComment}
-        {comment.length > 240 && (
-          <button className="text-gray-500">
-            ... Read more
-          </button>
-        )}
-            {linkPreview && linkPreview.images && linkPreview.images.length > 0 && (
-            <div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
-              <a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
-                <img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/>
-                <div className="font-semibold text-xs text-gray-300">
-                  {linkPreview.title}
-                </div>
-              </a>
             </div>
-          )}
+            {file !== "" && (
-          {quoteEvents[0] && quoteEvents.length > 0 && (
+              <div className="file">
-            <QuoteEmbed event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
-          )}
-          </div>
-          {file !== "" && (
-            <div className="file">
                 <img
                   src={file}
                   loading="lazy"
-                /> 
+                />
-            </div>
+              </div>
-           )}
+            )}
-        </div>
+          </div>
         </a>
       </CardContainer>
     </>
   );
 };
 
-interface LinkPreview {
-  url: string;
-  title: string;
-  siteName?: string;
-  description?: string;
-  mediaType: string;
-  contentType?: string;
-  images: string[];
-  videos: {
-    url?: string;
-    secureUrl?: string;
-    type?: string;
-    width?: string;
-    height?: string;
-    [key: string]: any;
-  }[];
-  [key: string]: any;
-}
-
 export default PostCard;