Nostr improvements

DustinBrett · Oct 15, 2023 · 74ade7b · 74ade7b
1 parent 63b349c
commit 74ade7b
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 55 deletions.
diff --git a/components/apps/Messenger/ChatLog.tsx b/components/apps/Messenger/ChatLog.tsx
@@ -11,8 +11,6 @@ import {
 import StyledChatLog from "components/apps/Messenger/StyledChatLog";
 import { UNKNOWN_PUBLIC_KEY } from "components/apps/Messenger/constants";
 import {
-  convertImageLinksToHtml,
-  convertNewLinesToBreaks,
   decryptMessage,
   prettyChatTimestamp,
 } from "components/apps/Messenger/functions";
@@ -89,15 +87,8 @@ const ChatLog: FC<{ recipientPublicKey: string }> = ({
                     </div>
                   )}
                   <SanitizedContent
-                    content={
-                      typeof decryptedContent[id] === "string"
-                        ? convertImageLinksToHtml(
-                            convertNewLinesToBreaks(
-                              decryptedContent[id] as string
-                            )
-                          )
-                        : content
-                    }
+                    content={decryptedContent[id] || content}
+                    decrypted={typeof decryptedContent[id] === "string"}
                   />
                   {publicKey === pubkey &&
                     gropupIndex === messages.length - 1 &&

diff --git a/components/apps/Messenger/HistoryContext.tsx b/components/apps/Messenger/HistoryContext.tsx
@@ -1,6 +1,16 @@
 import type { NostrProfile } from "components/apps/Messenger/types";
+import { useFileSystem } from "contexts/fileSystem";
 import type { Event } from "nostr-tools";
-import { createContext, memo, useContext, useMemo, useState } from "react";
+import {
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { SEEN_EVENT_IDS_PATH } from "./constants";
 
 type Profiles = Record<string, NostrProfile>;
 
@@ -18,9 +28,33 @@ const HistoryContext = createContext({} as History);
 export const useHistoryContext = (): History => useContext(HistoryContext);
 
 export const HistoryProvider = memo<FC>(({ children }) => {
+  const { readFile, writeFile } = useFileSystem();
   const [seenEventIds, setSeenEventIds] = useState<string[]>([]);
   const [outgoingEvents, setOutgoingEvents] = useState<Event[]>([]);
   const [profiles, setProfiles] = useState<Profiles>({});
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    if (!readFile || initialized.current) return;
+
+    initialized.current = true;
+
+    readFile(SEEN_EVENT_IDS_PATH).then((eventIds) => {
+      if (eventIds) {
+        try {
+          setSeenEventIds(JSON.parse(eventIds.toString()) as string[]);
+        } catch {
+          // Ignore failure to read seen events
+        }
+      }
+    });
+  }, [readFile]);
+
+  useEffect(() => {
+    if (!writeFile || !initialized.current) return;
+
+    writeFile(SEEN_EVENT_IDS_PATH, JSON.stringify(seenEventIds), true);
+  }, [seenEventIds, writeFile]);
 
   return (
     <HistoryContext.Provider

diff --git a/components/apps/Messenger/NostrContext.tsx b/components/apps/Messenger/NostrContext.tsx
@@ -10,15 +10,18 @@ import {
 } from "react";
 
 interface NostrContextType {
+  connectToRelays: (urls: string[]) => void;
   connectedRelays: Relay[];
   publish: (event: NostrEvent) => void;
 }
 
+/* eslint-disable @typescript-eslint/no-empty-function */
 const NostrContext = createContext<NostrContextType>({
+  connectToRelays: () => {},
   connectedRelays: [],
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   publish: () => {},
 });
+/* eslint-enable @typescript-eslint/no-empty-function */
 
 export const useNostr = (): NostrContextType => useContext(NostrContext);
 
@@ -93,10 +96,11 @@ export const NostrProvider: FC<{ relayUrls: string[] }> = ({
     <NostrContext.Provider
       value={useMemo(
         () => ({
+          connectToRelays,
           connectedRelays: Object.values(connectedRelays),
           publish,
         }),
-        [connectedRelays, publish]
+        [connectToRelays, connectedRelays, publish]
       )}
     >
       {children}

diff --git a/components/apps/Messenger/Profile.tsx b/components/apps/Messenger/Profile.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 
 type ProfileProps = {
   nip05?: string;
-  onClick?: () => void;
+  onMouseDown?: () => void;
   picture?: string;
   pubkey?: string;
   userName?: string;
@@ -14,7 +14,7 @@ type ProfileProps = {
 const Profile: FC<ProfileProps> = ({
   children,
   nip05,
-  onClick,
+  onMouseDown,
   picture,
   pubkey,
   userName = "Unknown",
@@ -23,9 +23,9 @@ const Profile: FC<ProfileProps> = ({
   const [loadedImage, setLoadedImage] = useState("");
 
   return (
-    <StyledProfile $clickable={Boolean(onClick)}>
+    <StyledProfile $clickable={Boolean(onMouseDown)}>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-      <div onClick={onClick}>
+      <div onMouseDown={onMouseDown}>
         {picture && (
           <img
             alt={userName}

diff --git a/components/apps/Messenger/ProfileBanner.tsx b/components/apps/Messenger/ProfileBanner.tsx
@@ -49,7 +49,7 @@ const ProfileBanner: FC<ProfileBannerProps> = ({
     picture,
     userName = "New message",
   } = useNostrProfile(pubkey);
-  const { connectedRelays } = useNostr();
+  const { connectToRelays, connectedRelays } = useNostr();
   const connectedRelayData = useMemo(
     () =>
       Object.fromEntries(
@@ -124,7 +124,16 @@ const ProfileBanner: FC<ProfileBannerProps> = ({
         <div className="relays">
           <ol>
             {relayUrls.sort().map((relayUrl) => (
-              <li key={relayUrl} title={relayUrl}>
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+              <li
+                key={relayUrl}
+                onClick={
+                  connectedRelayData[relayUrl]
+                    ? undefined
+                    : () => connectToRelays([relayUrl])
+                }
+                title={relayUrl}
+              >
                 {getWebSocketStatusIcon(connectedRelayData[relayUrl])}
               </li>
             ))}
@@ -133,7 +142,7 @@ const ProfileBanner: FC<ProfileBannerProps> = ({
       )}
       <Profile
         nip05={nip05}
-        onClick={onContextMenuCapture}
+        onMouseDown={onContextMenuCapture}
         picture={picture}
         pubkey={pubkey}
         userName={userName}

diff --git a/components/apps/Messenger/SanitizedContent.tsx b/components/apps/Messenger/SanitizedContent.tsx
@@ -1,15 +1,33 @@
+import {
+  convertImageLinksToHtml,
+  convertNewLinesToBreaks,
+} from "components/apps/Messenger/functions";
 import { sanitize } from "dompurify";
+import { useMemo } from "react";
 
-const SanitizedContent: FC<{ content: string }> = ({ content }) => (
-  <div
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML={{
-      __html: sanitize(content, {
-        ALLOWED_ATTR: ["src"],
-        ALLOWED_TAGS: ["br", "img"],
-      }),
-    }}
-  />
-);
+const SanitizedContent: FC<{ content: string; decrypted: boolean }> = ({
+  content,
+  decrypted,
+}) => {
+  const decryptedContent = useMemo(
+    () =>
+      decrypted
+        ? convertImageLinksToHtml(convertNewLinesToBreaks(content))
+        : "",
+    [content, decrypted]
+  );
+
+  return (
+    <div
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: sanitize(decryptedContent || content, {
+          ALLOWED_ATTR: ["src"],
+          ALLOWED_TAGS: ["br", "img"],
+        }),
+      }}
+    />
+  );
+};
 
 export default SanitizedContent;
diff --git a/components/apps/Messenger/constants.ts b/components/apps/Messenger/constants.ts
@@ -1,5 +1,6 @@
 import type { MotionProps } from "framer-motion";
 import {
+  HOME,
   MILLISECONDS_IN_MINUTE,
   MILLISECONDS_IN_SECOND,
 } from "utils/constants";
@@ -25,6 +26,8 @@ export const UNKNOWN_PUBLIC_KEY = "?";
 
 export const BASE_NIP05_URL = "/.well-known/nostr.json";
 
+export const SEEN_EVENT_IDS_PATH = `${HOME}/seenEvents.json`;
+
 export const GROUP_TIME_GAP_IN_SECONDS =
   (MILLISECONDS_IN_MINUTE / MILLISECONDS_IN_SECOND) * 30;
 

diff --git a/components/apps/Messenger/hooks.ts b/components/apps/Messenger/hooks.ts
@@ -119,8 +119,7 @@ export const useNip05 = (): NIP05Result => {
 
 export const useNostrContacts = (
   publicKey: string,
-  wellKnownNames: Record<string, string>,
-  loginTime: number
+  wellKnownNames: Record<string, string>
 ): NostrContacts => {
   const globalContacts = useMemo(
     () =>
@@ -167,12 +166,9 @@ export const useNostrContacts = (
   const unreadEvents = useMemo(
     () =>
       events.filter(
-        ({ created_at, id, pubkey }) =>
-          pubkey !== publicKey &&
-          created_at > loginTime &&
-          !seenEventIds.includes(id)
+        ({ id, pubkey }) => pubkey !== publicKey && !seenEventIds.includes(id)
       ),
-    [events, loginTime, publicKey, seenEventIds]
+    [events, publicKey, seenEventIds]
   );
 
   return { contactKeys, events, lastEvents, unreadEvents };

diff --git a/components/apps/Messenger/index.tsx b/components/apps/Messenger/index.tsx
@@ -38,7 +38,6 @@ import { MILLISECONDS_IN_DAY } from "utils/constants";
 import { haltEvent } from "utils/functions";
 
 type NostrChatProps = {
-  loginTime: number;
   processId: string;
   publicKey: string;
   relayUrls: string[];
@@ -48,7 +47,6 @@ type NostrChatProps = {
 
 const NostrChat: FC<NostrChatProps> = ({
   processId,
-  loginTime,
   publicKey,
   relayUrls,
   setSince,
@@ -63,10 +61,8 @@ const NostrChat: FC<NostrChatProps> = ({
           setSeenEventIds((currentSeenEventIds) => [
             ...new Set([
               ...currentEvents
-                .filter(
-                  ({ created_at, pubkey }) =>
-                    [recipientKey, currenRecipientKey].includes(pubkey) &&
-                    created_at > loginTime
+                .filter(({ pubkey }) =>
+                  [recipientKey, currenRecipientKey].includes(pubkey)
                 )
                 .map(({ id }) => id),
               ...currentSeenEventIds,
@@ -76,12 +72,11 @@ const NostrChat: FC<NostrChatProps> = ({
 
         return recipientKey;
       }),
-    [loginTime, setSeenEventIds]
+    [setSeenEventIds]
   );
   const { contactKeys, events, lastEvents, unreadEvents } = useNostrContacts(
     publicKey,
-    wellKnownNames,
-    loginTime
+    wellKnownNames
   );
   const setRecipientKey = useCallback(
     (recipientKey: string): boolean => {
@@ -99,7 +94,10 @@ const NostrChat: FC<NostrChatProps> = ({
   } = useProcesses();
   const { url } = process || {};
 
-  useUnreadStatus(processId, unreadEvents.length);
+  useUnreadStatus(
+    processId,
+    new Set(unreadEvents.map(({ pubkey }) => pubkey)).size
+  );
 
   useEffect(() => {
     if (
@@ -178,7 +176,6 @@ const NostrChat: FC<NostrChatProps> = ({
 };
 
 const Messenger: FC<ComponentProcessProps> = ({ id }) => {
-  const [loginTime, setLoginTime] = useState(0);
   const [since, setSince] = useState(() => MILLISECONDS_IN_DAY);
   const timeSince = useMemo(
     () => Math.floor((Date.now() - since) / 1000),
@@ -194,18 +191,14 @@ const Messenger: FC<ComponentProcessProps> = ({ id }) => {
 
     initStarted.current = true;
 
-    getRelayUrls().then((foundRelays) => {
-      setRelayUrls(foundRelays);
-      setLoginTime(Math.floor(Date.now() / 1000));
-    });
+    getRelayUrls().then(setRelayUrls);
   }, [publicKey]);
 
   return publicKey && relayUrls ? (
     <NostrProvider relayUrls={relayUrls}>
       <HistoryProvider>
         <MessageProvider publicKey={publicKey} since={timeSince}>
           <NostrChat
-            loginTime={loginTime}
             processId={id}
             publicKey={publicKey}
             relayUrls={relayUrls}