fix key prop stuff

client/src/components/Modals/LinkPreview.tsx

@@ -2,17 +2,14 @@ import { getLinkPreview } from 'link-preview-js';
 import { useState, useEffect } from 'react';
 
 
-const LinkModal = ({ key, url }: { key: string, url: string}) => {
+const LinkModal = ({ url }: { 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) {

client/src/components/Modals/TextModal.tsx

@@ -20,10 +20,10 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
     };
 
     useEffect(() => {
-        const urls = comment.match(/\bhttps?:\/\/\S+/gi);
-        if (urls && urls.length > 0) {
-            setUrl(url)
-            setFinalComment(finalComment.replace(url, '').trim())
+        const findUrl = comment.match(/\bhttps?:\/\/\S+/gi);
+        if (findUrl && findUrl.length > 0) {
+            setUrl(findUrl[0])
+            // setFinalComment(finalComment.replace(findUrl[0], '').trim())
         }
     
         const match = comment.match(/\bnostr:([a-z0-9]+)/i);
@@ -47,7 +47,7 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
       <div className="mr-2 flex flex-col break-words">
         {isExpanded ? finalComment : finalComment.slice(0, 240)}
         {finalComment.length > 240 && (
-          <button className="text-gray-500">
+          <button className="text-gray-500" onClick={() => setIsExpanded(true)}>
             ... Read more
           </button>
         )}
@@ -55,7 +55,7 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
             <LinkModal key={key} url={url} />
         )}
         {quoteEvents[0] && quoteEvents.length > 0 && (
-          <QuoteEmbed event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
+          <QuoteEmbed key={key} event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
         )}
       </div>
     );

client/src/components/Thread/OPCard.tsx

@@ -7,6 +7,7 @@ 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';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -105,22 +106,7 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
             </div>  
           </div>
           <div className="mr-2 flex flex-col break-words">
-          {isExpanded ? comment : truncatedComment}
-        {comment.length > 240 && (
-          <button className="text-gray-500" onClick={() => setIsExpanded(!isExpanded)}>
-            {isExpanded ? 'Read less' : '... 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>
-          )}
+            <ContentPreview key={event.id} comment={comment} />
           </div>
           {file !== "" && (
             <div className="file">

client/src/components/Thread/ReplyCard.tsx

@@ -6,6 +6,7 @@ import { nip19 } from 'nostr-tools';
 import { useEffect, useState } from 'react';
 import { subNote } from '../../utils/subscriptions';
 import { getMetadata, uniqBy } from '../../utils/utils';
+import ContentPreview from '../Modals/TextModal';
 
 const colorCombos = [
     'from-red-400 to-yellow-500',
@@ -106,7 +107,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
                             ))}
                         </div>
                         <div className="mr-2 flex flex-col break-words">
-                            {comment}
+                            <ContentPreview key={event.id} comment={comment} />
                         </div>
                         {file !== "" && (
                             <div className="file">