start threads pages

client/src/App.tsx

@@ -3,6 +3,8 @@ import './App.css';
 import Home from './components/Home';
 import Settings from './components/Settings';
 import SwipeableViews from 'react-swipeable-views';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Thread from './components/Thread/Thread';
 
 function App() {
   const [index, setIndex] = React.useState(1);
@@ -13,14 +15,19 @@ function App() {
   };
 
   return (
-      <SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
+    <Router>
-        <div>
+      <Routes>
-          <Settings />
+        <Route path="/settings" element={<Settings />} />
-        </div>
+        <Route path="/home" element={<Home />} />
-        <div>
+        <Route path='/thread/:id' element={<Thread />} />
-          <Home />
+        <Route path="/" element={
-        </div>
+          <SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
-      </SwipeableViews>
+            <Settings />
+            <Home />
+          </SwipeableViews>
+        } />
+      </Routes>
+    </Router>
   );
 }
 

client/src/components/Thread/Thread.tsx

@@ -0,0 +1,41 @@
+import { useParams } from 'react-router-dom';
+import { useState } from "react";
+import { Event } from "nostr-tools"
+import { subNote } from '../../utils/subscriptions';
+import { useEffect } from 'react';
+import PostCard from '../PostCard/PostCard';
+
+const Thread = () => {
+    const { id } = useParams();
+    const [events, setEvents] = useState<Event[]>([]); // Initialize state
+
+    // 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(() => {
+        // 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
+
+    return (
+        <>
+            <main className="bg-black text-white min-h-screen">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+                    {events.sort((a, b) => b.created_at - a.created_at).map((event, index) => (
+                        <PostCard key={index} event={event} />
+                    ))}
+                </div>
+            </main>
+        </>
+    );
+};
+
+export default Thread;

client/src/utils/subscriptions.ts

@@ -82,7 +82,7 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
     });
   };
 
-  /** subscribe to global feed */
+/** subscribe to global feed */
 export const simpleSub24hFeed = (onEvent: SubCallback) => {
   unsubAll();
   sub({
@@ -94,4 +94,49 @@ export const simpleSub24hFeed = (onEvent: SubCallback) => {
       limit: 1,
     }
   });
+};
+
+/** subscribe to a note id (nip-19) */
+export const subNote = (
+  eventId: string,
+  onEvent: SubCallback,
+) => {
+  unsubAll();
+  sub({
+    cb: onEvent,
+    filter: {
+      ids: [eventId],
+      kinds: [1],
+      limit: 1,
+    },
+    unsub: true,
+  });
+
+  const replies = new Set<string>();
+
+  const onReply = (evt: Event, relay: string) => {
+    replies.add(evt.id)
+    onEvent(evt, relay);
+    unsubAll();
+    sub({
+      cb: onEvent,
+      filter: {
+        '#e': Array.from(replies),
+        kinds: [1],
+      },
+      unsub: true,
+    });
+  };
+
+  replies.add(eventId);
+  setTimeout(() => {
+    sub({
+      cb: onReply,
+      filter: {
+        '#e': [eventId],
+        kinds: [1],
+      },
+      unsub: true, // TODO: probably keep this subscription also after onReply/unsubAll
+    });
+  }, 200);
 };