From f6a4ce3cdcb6937d82d1a42860fa1148f4e564b4 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Wed, 28 Dec 2022 17:05:20 +0000
Subject: [PATCH] Thread tweaks

---
 src/element/Note.js           |  2 ++
 src/element/NoteGhost.js      | 21 +++++++++++++++++++++
 src/element/Thread.js         | 12 ++++++------
 src/nostr/Connection.js       | 34 ++++++++++++++++++++++++++++++----
 src/pages/EventPage.js        | 10 +---------
 src/pages/feed/ProfileFeed.js |  2 +-
 src/pages/feed/ThreadFeed.js  |  4 +++-
 7 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 src/element/NoteGhost.js

diff --git a/src/element/Note.js b/src/element/Note.js
index 773c587..1d032d5 100644
--- a/src/element/Note.js
+++ b/src/element/Note.js
@@ -79,6 +79,8 @@ export default function Note(props) {
                             return <video key={url} src={url} controls />
                         }
                     }
+                } else {
+                    return <a href={url}>{url}</a>
                 }
             } else {
                 let mentions = a.split(MentionRegex).map((match) => {
diff --git a/src/element/NoteGhost.js b/src/element/NoteGhost.js
new file mode 100644
index 0000000..0452cb5
--- /dev/null
+++ b/src/element/NoteGhost.js
@@ -0,0 +1,21 @@
+import "./Note.css";
+import moment from "moment";
+import ProfileImage from "./ProfileImage";
+
+export default function NoteGhost(props) {
+    return (
+        <div className="note">
+            <div className="header">
+                <ProfileImage pubKey="" />
+                <div className="info">
+                    {moment().fromNow()}
+                </div>
+            </div>
+            <div className="body">
+                Loading...
+            </div>
+            <div className="footer">
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/element/Thread.js b/src/element/Thread.js
index 76faa03..4e0aaad 100644
--- a/src/element/Thread.js
+++ b/src/element/Thread.js
@@ -1,6 +1,7 @@
 import Event from "../nostr/Event";
 import EventKind from "../nostr/EventKind";
 import Note from "./Note";
+import NoteGhost from "./NoteGhost";
 
 export default function Thread(props) {
     /** @type {Array<Event>} */
@@ -8,21 +9,20 @@ export default function Thread(props) {
 
     // root note has no thread info
     const root = notes.find(a => a.GetThread() === null);
-    if(root === undefined) {
-        return null;
-    }
 
     function reactions(id) {
         return notes?.filter(a => a.Kind === EventKind.Reaction && a.GetThread()?.Root?.Event === id);
     }
 
     const repliesToRoot = notes?.
-        filter(a => a.GetThread()?.Root?.Event === root.Id && a.Kind === EventKind.TextNote)
+        filter(a => a.GetThread()?.Root?.Event === root?.Id && a.Kind === EventKind.TextNote)
         .sort((a, b) => b.CreatedAt - a.CreatedAt);
     return (
         <>
-            <Note data={root?.ToObject()} reactions={reactions(root?.Id)}/>
-            {repliesToRoot?.map(a => <Note key={a.Id} data={a.ToObject()} reactions={reactions(a.Id)}/>)}
+            {root === undefined ?
+                <NoteGhost />
+                : <Note data={root?.ToObject()} reactions={reactions(root?.Id)} />}
+            {repliesToRoot?.map(a => <Note key={a.Id} data={a.ToObject()} reactions={reactions(a.Id)} />)}
         </>
     );
 }
\ No newline at end of file
diff --git a/src/nostr/Connection.js b/src/nostr/Connection.js
index e191e7d..fc90c44 100644
--- a/src/nostr/Connection.js
+++ b/src/nostr/Connection.js
@@ -4,12 +4,18 @@ import Event from "./Event";
 export default class Connection {
     constructor(addr) {
         this.Address = addr;
-        this.Socket = new WebSocket(addr);
+        this.Socket = null;
+        this.Pending = [];
+        this.Subscriptions = {};
+        this.Connect();
+    }
+
+    Connect() {
+        this.Socket = new WebSocket(this.Address);
         this.Socket.onopen = (e) => this.OnOpen(e);
         this.Socket.onmessage = (e) => this.OnMessage(e);
         this.Socket.onerror = (e) => this.OnError(e);
-        this.Pending = [];
-        this.Subscriptions = {};
+        this.Socket.onclose = (e) => this.OnClose(e);
     }
 
     OnOpen(e) {
@@ -22,6 +28,13 @@ export default class Connection {
         }
     }
 
+    OnClose(e) {
+        console.log(`[${this.Address}] Closed: `, e);
+        setTimeout(() => {
+            this.Connect();
+        }, 500);
+    }
+
     OnMessage(e) {
         let msg = JSON.parse(e.data);
         let tag = msg[0];
@@ -34,6 +47,15 @@ export default class Connection {
                 this._OnEnd(msg[1]);
                 break;
             }
+            case "OK": {
+                // feedback to broadcast call
+                console.debug("OK: ", msg[1]);
+                break;
+            }
+            case "NOTICE": {
+                console.warn(`[${this.Address}] NOTICE: ${msg[1]}`);
+                break;
+            }
             default: {
                 console.warn(`Unknown tag: ${tag}`);
                 break;
@@ -59,7 +81,11 @@ export default class Connection {
      * @param {Subscriptions | Array<Subscriptions>} sub Subscriptions object
      */
     AddSubscription(sub) {
-        let req = ["REQ", sub.Id, sub.ToObject()];
+        let subObj = sub.ToObject();
+        if(Object.keys(subObj).length === 0) {
+            throw "CANNOT SEND EMPTY SUB - FIX ME";
+        }
+        let req = ["REQ", sub.Id, subObj];
         if (sub.OrSubs.length > 0) {
             req = [
                 ...req,
diff --git a/src/pages/EventPage.js b/src/pages/EventPage.js
index a911d61..002ae9b 100644
--- a/src/pages/EventPage.js
+++ b/src/pages/EventPage.js
@@ -7,13 +7,5 @@ export default function EventPage() {
     const id = params.id;
 
     const { notes } = useThreadFeed(id);
-
-    if(notes?.length > 0) {
-        return (
-            <Thread notes={notes}/>
-        )
-    }
-    return (
-        <>Loading {id.substring(0, 8)}...</>
-    );
+    return <Thread notes={notes}/>;
 }
\ No newline at end of file
diff --git a/src/pages/feed/ProfileFeed.js b/src/pages/feed/ProfileFeed.js
index 3589a90..f00820a 100644
--- a/src/pages/feed/ProfileFeed.js
+++ b/src/pages/feed/ProfileFeed.js
@@ -10,7 +10,7 @@ export default function useProfile(pubKey) {
     const pubKeys = useSelector(s => s.users.pubKeys);
 
     useEffect(() => {
-        if (system && !pubKeys.includes(pubKey)) {
+        if (system && pubKey !== "" && !pubKeys.includes(pubKey)) {
             dispatch(addPubKey(pubKey));
         }
     }, [system]);
diff --git a/src/pages/feed/ThreadFeed.js b/src/pages/feed/ThreadFeed.js
index f12b3b4..a06a636 100644
--- a/src/pages/feed/ThreadFeed.js
+++ b/src/pages/feed/ThreadFeed.js
@@ -49,6 +49,9 @@ export default function useThreadFeed(id) {
                     for (let m of thread.Mentions) {
                         sub.Ids.add(m.Event);
                     }
+                } else {
+                    // this event is a root note, no other notes need to be loaded
+                    return;
                 }
             } else if (notes.length === 0) {
                 sub.Ids.add(id);
@@ -69,7 +72,6 @@ export default function useThreadFeed(id) {
     }, [system, notes]);
 
     useEffect(() => {
-        console.debug("use thread stream")
         dispatch(reset());
     }, []);