Thread tweaks

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) => {

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>
+    );
+}

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)} />)}
         </>
     );
 }

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,

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}/>;
 }

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]);

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());
     }, []);