clean up

client/package.json

@@ -4,9 +4,6 @@
   "private": true,
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.21",
@@ -17,10 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-linkify": "^1.0.0-alpha",
-    "react-pull-to-refresh": "^2.0.1",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
-    "react-swipe": "^6.0.4",
     "react-swipeable-views": "^0.14.0",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",

client/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

client/src/components/Home.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PostCard from './PostCard/PostCard';
 import NewThreadCard from './PostCard/NewThreadCard';
 import { getPow } from '../utils/mine';
-import { relayInit, Event } from 'nostr-tools';
+import { Event } from 'nostr-tools';
 import { subGlobalFeed } from '../utils/subscriptions';
 import { uniqBy } from '../utils/utils';
 
@@ -11,7 +11,6 @@ const Home = () => {
 
   const onEvent = (event: Event) => {
     setEvents((prevEvents) => [...prevEvents, event]);
-    console.log(`${event.id} ${event.kind} ${event.tags}`);
   };
 
   useEffect(() => {

client/src/components/Modals/QuoteEmbed.tsx

@@ -1,13 +1,7 @@
-import CardContainer from '../PostCard/CardContainer';
-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 './TextModal';
-import { subNoteOnce } from '../../utils/subscriptions';
 
 const colorCombos = [
   'from-red-400 to-yellow-500',
@@ -58,29 +52,14 @@ const timeAgo = (unixTime: number) => {
 };
 
 const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}) => {
-    // Replace 10 with the actual number of comments for each post
-    const numberOfComments = 10;
     const { comment, file } = parseContent(event);
     const colorCombo = getColorFromHash(event.pubkey, colorCombos);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const truncatedComment = comment.slice(0, 240);
 
     let metadataParsed = null;
     if (metadata !== null) {
         metadataParsed = getMetadata(metadata);
     }
 
-    const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
-
-    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));
-      }
-    }, [comment]);
-    
   return (
     <div className="p-1 bg-gradient-to-r from-black to-neutral-900 rounded-lg border border-neutral-800">
         <div className="flex flex-col">
@@ -100,22 +79,7 @@ const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}
             </div>
           </div>
           <div className="mr-2 flex flex-col break-words">
-          {isExpanded ? comment : truncatedComment}
+            <ContentPreview key={event.id} comment={comment} />
-        {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>
-          )}
           </div>
           {file !== "" && (
             <div className="file">
@@ -130,23 +94,4 @@ const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}
   );
 };
 
-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 QuoteEmbed;

client/src/components/Modals/TextModal.tsx

@@ -1,8 +1,6 @@
 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";
@@ -16,14 +14,13 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
       // 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 findUrl = comment.match(/\bhttps?:\/\/\S+/gi);
         if (findUrl && findUrl.length > 0) {
             setUrl(findUrl[0])
-            // setFinalComment(finalComment.replace(findUrl[0], '').trim())
+            setFinalComment(finalComment.replace(findUrl[0], '').trim())
         }
     
         const match = comment.match(/\bnostr:([a-z0-9]+)/i);
@@ -33,7 +30,7 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
           subNoteOnce(id_to_hex, onEvent);
           setFinalComment(finalComment.replace('nostr:'+nostrQuoteID, '').trim())
         }
-      }, [comment]);
+      }, [comment, finalComment]);
     
     const getMetadataEvent = (event: Event) => {
     const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);

client/src/components/PostCard/NewThreadCard.tsx

@@ -1,7 +1,7 @@
 import CardContainer from './CardContainer';
 import { ArrowUpTrayIcon, CpuChipIcon } from '@heroicons/react/24/outline';
 import { useState } from 'react';
-import { Event, generatePrivateKey, getPublicKey, finishEvent, relayInit } from 'nostr-tools';
+import { generatePrivateKey, getPublicKey, finishEvent } from 'nostr-tools';
 import { minePow } from '../../utils/mine';
 import { publish } from '../../utils/relays';
 import NostrImg from '../../utils/ImgUpload';

client/src/components/PostCard/PostCard.tsx

@@ -3,7 +3,7 @@ import { FolderIcon } from '@heroicons/react/24/outline';
 import { parseContent } from '../../utils/content';
 import { Event } from 'nostr-tools';
 import { nip19 } from 'nostr-tools';
-import { getMetadata, uniqBy } from '../../utils/utils';
+import { getMetadata } from '../../utils/utils';
 import ContentPreview from'../Modals/TextModal';
 
 const colorCombos = [
@@ -89,7 +89,7 @@ const PostCard = ({ key, event, metadata, replyCount }: { key: string, event: Ev
               </div>
             </div>
             <div className="mr-2 flex flex-col break-words">
-              <ContentPreview key={key} comment={comment} />
+              <ContentPreview key={event.id} comment={comment} />
             </div>
             {file !== "" && (
               <div className="file">

client/src/components/Settings.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
-import {generatePrivateKey, getPublicKey} from 'nostr-tools';
 // import {powEvent} from './system';
 // import {publish} from './relays';
 

client/src/components/Thread/OPCard.tsx

@@ -2,11 +2,7 @@ import CardContainer from '../PostCard/CardContainer';
 import { FolderIcon } from '@heroicons/react/24/outline';
 import { parseContent } from '../../utils/content';
 import { Event } from 'nostr-tools';
-import { nip19 } from 'nostr-tools';
+import { getMetadata } from '../../utils/utils';
-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 = [
@@ -58,28 +54,13 @@ const timeAgo = (unixTime: number) => {
 };
 
 const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
-    // Replace 10 with the actual number of comments for each post
-    const numberOfComments = 10;
     const { comment, file } = parseContent(event);
     const colorCombo = getColorFromHash(event.pubkey, colorCombos);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const truncatedComment = comment.slice(0, 240);
 
     let metadataParsed = null;
     if (metadata !== null) {
         metadataParsed = getMetadata(metadata);
     }
-
-    const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
-
-    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));
-      }
-    }, [comment]);
     
   return (
     <>

client/src/components/Thread/ReplyCard.tsx

@@ -3,8 +3,6 @@ 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 ContentPreview from '../Modals/TextModal';
 

client/src/components/Thread/Thread.tsx

@@ -3,11 +3,9 @@ import { useState } from "react";
 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 { DocumentTextIcon, FolderPlusIcon } from '@heroicons/react/24/outline';
-import { ArrowUpTrayIcon, CpuChipIcon } from '@heroicons/react/24/outline';
+import { generatePrivateKey, getPublicKey, finishEvent } from 'nostr-tools';
-import { generatePrivateKey, getPublicKey, finishEvent, relayInit } from 'nostr-tools';
 import { minePow } from '../../utils/mine';
 import { publish } from '../../utils/relays';
 import ThreadPost from './ThreadPost';
@@ -28,7 +26,6 @@ const Thread = () => {
     // Define your callback function for subGlobalFeed
     const onEvent = (event: Event, relay: string) => {
         setEvents((prevEvents) => [...prevEvents, event]);
-        console.log(event.id + ' ' + event.kind + ' ' + event.tags);
     };
 
     useEffect(() => {

client/src/components/Thread/ThreadPost.tsx

@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 import { useState } from "react";
 import { ArrowUpTrayIcon, CpuChipIcon } from '@heroicons/react/24/outline';
-import { generatePrivateKey, getPublicKey, finishEvent, relayInit } from 'nostr-tools';
+import { generatePrivateKey, getPublicKey, finishEvent } from 'nostr-tools';
 import { minePow } from '../../utils/mine';
 import { publish } from '../../utils/relays';
 import NostrImg from '../../utils/ImgUpload';

client/src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -18,8 +17,3 @@ root.render(
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
 serviceWorkerRegistration.unregister();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

client/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

client/src/utils/subscriptions.ts

@@ -1,6 +1,5 @@
 import {sub, subOnce, unsubAll} from './relays';
 import { Event } from 'nostr-tools';
-import { getPow } from './mine';
 
 type SubCallback = (
     event: Event,