Show disconnected chains

src/element/NoteGhost.js

@@ -8,7 +8,7 @@ export default function NoteGhost(props) {
                 <ProfileImage pubkey="" />
             </div>
             <div className="body">
-                {props.text ?? "Loading..."}
+                {props.children}
             </div>
             <div className="footer">
             </div>

src/element/Thread.js

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { Link } from "react-router-dom";
 import Event from "../nostr/Event";
 import EventKind from "../nostr/EventKind";
 import Note from "./Note";
@@ -24,7 +25,7 @@ export default function Thread(props) {
                 } else {
                     chains.get(replyTo).push(v);
                 }
-            } else if(v.Tags.length > 0) {
+            } else if (v.Tags.length > 0) {
                 console.log("Not replying to anything: ", v);
             }
         });
@@ -32,6 +33,10 @@ export default function Thread(props) {
         return chains;
     }, [notes]);
 
+    const brokenChains = useMemo(() => {
+        return Array.from(chains?.keys()).filter(a => !notes.some(b => b.Id === a));
+    }, [chains]);
+
     function reactions(id, kind = EventKind.Reaction) {
         return notes?.filter(a => a.Kind === kind && a.Tags.find(a => a.Key === "e" && a.Event === id));
     }
@@ -40,11 +45,13 @@ export default function Thread(props) {
         if (root) {
             return <Note data-ev={root} reactions={reactions(root.Id)} deletion={reactions(root.Id, EventKind.Deletion)} />
         } else {
-            return <NoteGhost text={`Loading thread.. ${notes.length} loaded`} />
+            return <NoteGhost>
+                Loading thread root.. ({notes.length} notes loaded)
+            </NoteGhost>
         }
     }
 
-    function renderChain(from, acc) {
+    function renderChain(from) {
         if (from && chains) {
             let replies = chains.get(from);
             if (replies) {
@@ -68,6 +75,19 @@ export default function Thread(props) {
         <>
             {renderRoot()}
             {root ? renderChain(root.Id) : null}
+            {root ? null : <>
+                <h3>Other Replies</h3>
+                {brokenChains.map(a => {
+                    return (
+                        <>
+                            <NoteGhost>
+                                Missing event <Link to={`/e/${a}`}>{a.substring(0, 8)}</Link>
+                            </NoteGhost>
+                            {renderChain(a)}
+                        </>
+                    )
+                })}
+            </>}
         </>
     );
 }

src/feed/LoginFeed.js

@@ -1,4 +1,3 @@
-import Nostrich from "../nostrich.jpg";
 import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import EventKind from "../nostr/EventKind";

src/feed/UsersFeed.js

@@ -42,11 +42,15 @@ export default function useUsersCache() {
 }
 
 export function mapEventToProfile(ev) {
-    let data = JSON.parse(ev.content);
-    return {
-        pubkey: ev.pubkey,
-        fromEvent: ev,
-        loaded: new Date().getTime(),
-        ...data
-    };
+    try {
+        let data = JSON.parse(ev.content);
+        return {
+            pubkey: ev.pubkey,
+            fromEvent: ev,
+            loaded: new Date().getTime(),
+            ...data
+        };
+    } catch (e) {
+        console.error("Failed to parse JSON", ev, e);
+    }
 }