client-web: handle content warning; better timeout handling; new defa…

…ult relays
franzos · Aug 31, 2023 · 8f10f60 · 8f10f60
1 parent ae5b927
commit 8f10f60
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 78 deletions.
diff --git a/client-web/src/components/event.tsx b/client-web/src/components/event.tsx
@@ -27,6 +27,7 @@ import {
   NewQuoteRepost,
   NewReaction,
   NewShortTextNoteResponse,
+  eventHasContentWarning,
 } from "@nostr-ts/common";
 import { useNClient } from "../state/client";
 import ThumbUpIcon from "mdi-react/ThumbUpIcon";
@@ -85,6 +86,11 @@ export function Event({
     );
   }, [reactions]);
 
+  const hasContentWarning = eventHasContentWarning(event);
+  const [showContent, setShowContent] = useState(
+    hasContentWarning == undefined ? true : false
+  );
+
   const images = event?.content?.match(
     /\bhttps?:\/\/\S+?\.(?:jpg|jpeg|png|gif)\b/gi
   );
@@ -190,8 +196,7 @@ export function Event({
             relayUrl: eventRelayUrls[0],
           },
           {
-            timeout: 10000,
-            timeoutAt: Date.now() + 10000,
+            timeoutIn: 10000,
           }
         );
       }
@@ -253,11 +258,13 @@ export function Event({
           {repostsCount}
         </Button>
         {reactionsWithCount &&
-          Object.keys(reactionsWithCount).map((r) => (
-            <Button size="sm" key={r} aria-label="Repost" isDisabled={true}>
-              {r} {reactionsWithCount[r]}
-            </Button>
-          ))}
+          Object.keys(reactionsWithCount)
+            .slice(0, 2)
+            .map((r) => (
+              <Button size="sm" key={r} aria-label="Repost" isDisabled={true}>
+                {r} {reactionsWithCount[r]}
+              </Button>
+            ))}
       </HStack>
     );
   };
@@ -330,19 +337,26 @@ export function Event({
     >
       <CardHeader p={0}>
         <Box>
-          {images && images?.length > 0 && (
-            <Box className="image-container" marginBottom={4}>
-              {images.map((i, index) => (
-                <Image
-                  key={index}
-                  src={i}
-                  fallback={<Image src="/no-image.png" />}
-                  fallbackStrategy="onError"
-                  alt=""
-                  onClick={() => openImage(i)}
-                />
-              ))}
-            </Box>
+          {showContent ? (
+            images &&
+            images.length > 0 && (
+              <Box className="image-container" marginBottom={4}>
+                {images.map((i, index) => (
+                  <Image
+                    key={index}
+                    src={i}
+                    fallback={<Image src="/no-image.png" />}
+                    fallbackStrategy="onError"
+                    alt=""
+                    onClick={() => openImage(i)}
+                  />
+                ))}
+              </Box>
+            )
+          ) : (
+            <Button size="sm" width="100%" onClick={() => setShowContent(true)}>
+              Show Content ({hasContentWarning})
+            </Button>
           )}
           <Box p={4} paddingBottom={0}>
             {userComponent && userComponent}

diff --git a/client-web/src/components/events.tsx b/client-web/src/components/events.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Text } from "@chakra-ui/react";
 import { useNClient } from "../state/client";
 import { Event } from "../components/event";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { MAX_EVENTS } from "../defaults";
 import { User } from "./user";
 import { NFilters } from "@nostr-ts/common";
@@ -18,25 +18,40 @@ export function Events(props: {
   ]);
 
   const [moreEventsCount, setMoreEventsCount] = useState(0);
+  const [showButtonsAnyway, setShowButtonsAnyway] = useState(false);
+
+  const [filters, setFilters] = useState<NFilters>(props.filters);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowButtonsAnyway(true);
+    }, 5000);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
 
   const moreEvents = async () => {
     if (moreEventsCount === 0) {
       setMoreEventsCount(moreEventsCount + 1);
     }
     await useNClient.getState().setMaxEvents(maxEvents + MAX_EVENTS);
     if (props) {
-      await useNClient
-        .getState()
-        .setViewSubscription(props.view, props.filters);
+      await useNClient.getState().setViewSubscription(props.view, filters);
     }
   };
 
   const newEvents = async () => {
     setMoreEventsCount(0);
+    setFilters(props.filters);
+    await useNClient.getState().setMaxEvents(MAX_EVENTS);
     await useNClient.getState().clearEvents();
-    await useNClient.getState().setViewSubscription(props.view, props.filters);
+    await useNClient.getState().setViewSubscription(props.view, filters);
+    setShowButtonsAnyway(false);
   };
 
+  const showButtons = events.length >= maxEvents || showButtonsAnyway;
+
   return (
     <Box style={{ overflowWrap: "break-word", wordWrap: "break-word" }}>
       {events.map((event) => {
@@ -80,7 +95,7 @@ export function Events(props: {
       {events.length === 0 && (
         <Text>Waiting for fresh content ... hold on.</Text>
       )}
-      {events.length >= maxEvents && (
+      {showButtons && (
         <Box display="flex" justifyContent="space-between" padding={2}>
           <Button flex="1" marginRight={2} onClick={moreEvents}>
             Load {MAX_EVENTS} more

diff --git a/client-web/src/components/user-profile-form.tsx b/client-web/src/components/user-profile-form.tsx
@@ -85,8 +85,7 @@ export function UserProfileForm({ props }: { props: UserProfileFormProps }) {
           kinds: [NEVENT_KIND.METADATA],
         }),
         options: {
-          timeout: 10000,
-          timeoutAt: Date.now() + 10000,
+          timeoutIn: 10000,
         },
       });
     } catch (e) {

diff --git a/client-web/src/defaults.ts b/client-web/src/defaults.ts
@@ -1,18 +1,14 @@
 export const MAX_EVENTS = 25;
 export const DEFAULT_RELAYS = {
-  "wss://nos.lol": {
+  "wss://relay.shitforce.one": {
     read: true,
-    write: false,
+    write: true,
   },
-  "wss://nostr.wine": {
+  "wss://relay.nostr.band": {
     read: true,
-    write: false,
+    write: true,
   },
-  // "wss://nostr.plebchain.org": {
-  //   read: true,
-  //   write: false,
-  // },
-  // "wss://nostr.einundzwanzig.space": {
+  // "wss://soloco.nl": {
   //   read: true,
   //   write: false,
   // },

diff --git a/client-web/src/routes/profile.tsx b/client-web/src/routes/profile.tsx
@@ -66,8 +66,7 @@ export function ProfileRoute() {
         "#p": [pubkey],
       }),
       options: {
-        timeout: 10000,
-        timeoutAt: Date.now() + 10000,
+        timeoutIn: 10000,
       },
     });
   };

diff --git a/client-web/src/routes/user-profile.tsx b/client-web/src/routes/user-profile.tsx
@@ -48,8 +48,7 @@ export function UserProfileRoute() {
         kinds: [NEVENT_KIND.METADATA],
       }),
       options: {
-        timeout: 10000,
-        timeoutAt: Date.now() + 10000,
+        timeoutIn: 10000,
       },
     });
     toast({

diff --git a/client-web/src/routes/welcome.tsx b/client-web/src/routes/welcome.tsx
@@ -19,36 +19,27 @@ export function WelcomeRoute() {
   });
 
   const initDone = useRef<boolean>(false);
+  const init = async () => {
+    if (!connected || initDone.current) return;
+    initDone.current = true;
+    await useNClient.getState().clearEvents();
+    await useNClient.getState().setViewSubscription("welcome", defaultFilters);
+  };
 
   /**
    * Handle initial load
    */
   useEffect(() => {
-    const init = async () => {
-      if (!connected || initDone.current) return;
-      initDone.current = true;
-      await useNClient.getState().clearEvents();
-      defaultFilters.until = Math.round(Date.now() / 1000 - 120);
-      await useNClient
-        .getState()
-        .setViewSubscription("welcome", defaultFilters);
-    };
     init();
   }, []);
 
   /**
    * Handle the connection status change
    */
   useEffect(() => {
-    const init = async () => {
-      if (!connected || initDone.current) return;
-      initDone.current = true;
-      defaultFilters.until = Math.round(Date.now() / 1000 - 120);
-      await useNClient
-        .getState()
-        .setViewSubscription("welcome", defaultFilters);
-    };
-    init();
+    setTimeout(() => {
+      init();
+    }, 500);
   }, [connected]);
 
   /**

diff --git a/client-web/src/state/client.ts b/client-web/src/state/client.ts
@@ -559,7 +559,6 @@ export const useNClient = create<NClient>((set, get) => ({
    */
   setViewSubscription: async (view: string, filters: NFilters) => {
     const subs = await get().getSubscriptions();
-
     const subIds = [];
     for (const sub of subs) {
       if (sub.options && sub.options.view) {
@@ -582,8 +581,7 @@ export const useNClient = create<NClient>((set, get) => ({
       },
       options: {
         view,
-        timeout: 10000,
-        timeoutAt: Date.now() + 10000,
+        timeoutIn: 15000,
       },
     });
 
@@ -700,17 +698,16 @@ export const useNClient = create<NClient>((set, get) => ({
       for (const item of [...reqUsers, ...reqRelEvents]) {
         infoRequestPromises.push(
           await get().requestInformation(item, {
-            timeout: 10000,
-            timeoutAt: Date.now() + 10000,
+            timeoutIn: 60000,
             view,
           })
         );
       }
     };
 
     // TODO: This is not accurate
-    setTimeout(process, 3000);
-    setTimeout(process, 8000);
+    setTimeout(process, 1000);
+    setTimeout(process, 6000);
   },
 
   /**

diff --git a/client-web/src/state/worker.ts b/client-web/src/state/worker.ts
@@ -75,7 +75,6 @@ class WorkerClass implements NClientWorker {
   }
 
   disconnect() {
-    this.client?.unsubscribeAll();
     this.client?.disconnect();
     this.eventsMap.clear();
     this.connected = false;
@@ -432,8 +431,6 @@ class WorkerClass implements NClientWorker {
                 }, 1000);
               }
               return;
-            } else {
-              console.log(`No root tag found for event ${event.id}`);
             }
           }
 
@@ -690,8 +687,7 @@ class WorkerClass implements NClientWorker {
             relayUrl,
           },
           {
-            timeout: 10000,
-            timeoutAt: Date.now() + 10000,
+            timeoutIn: 10000,
           }
         );
       }
@@ -754,7 +750,6 @@ class WorkerClass implements NClientWorker {
       return;
     }
 
-    const timeout = options?.timeout || 10000;
     let filtered: string[] = [];
 
     if (payload.source === "events" || payload.source === "events:related") {
@@ -824,12 +819,6 @@ class WorkerClass implements NClientWorker {
         subscriptions.push(...subs);
       }
     }
-
-    if (subscriptions.length > 0) {
-      setTimeout(() => {
-        this.unsubscribe(subscriptions.map((sub) => sub.id));
-      }, timeout);
-    }
   }
 
   async hasSubscriptionForEventIds(eventIds: string[], kinds?: NEVENT_KIND[]) {