simplified interface; new message modal; performance tweaks; better a…

…ccount handling
franzos · Sep 6, 2023 · 9e901d5 · 9e901d5
1 parent 32c30d5
commit 9e901d5
Show file tree

Hide file tree

Showing 22 changed files with 511 additions and 535 deletions.
diff --git a/client-web/src/components/bottom-bar.tsx b/client-web/src/components/bottom-bar.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   HStack,
   Link,
+  Spacer,
   Text,
   useColorMode,
   useToast,
@@ -12,6 +13,7 @@ import { useEffect, useState } from "react";
 import { RELAY_MESSAGE_TYPE } from "@nostr-ts/common";
 import { excerpt } from "../lib/excerpt";
 import { NavLink } from "react-router-dom";
+import { EventFormModal } from "./event-form-modal";
 
 export function BottomBar() {
   const { colorMode, toggleColorMode } = useColorMode();
@@ -24,6 +26,7 @@ export function BottomBar() {
   const [lastCount, setLastCount] = useState(0);
   const [subscriptionsCount, setSubscriptionsCount] = useState<number>(0);
   const [relaysCount, setRelaysCount] = useState<number>(0);
+  const [queueItemsCount, setQueueItemsCount] = useState<number>(0);
 
   const toast = useToast();
 
@@ -40,6 +43,10 @@ export function BottomBar() {
     if (relays) {
       setRelaysCount(relays.length);
     }
+    const queue = await useNClient.getState().getQueueItems();
+    if (queue) {
+      setQueueItemsCount(queue.length);
+    }
   };
 
   useEffect(() => {
@@ -103,6 +110,11 @@ export function BottomBar() {
     >
       <HStack spacing={4}>
         <>
+          <Button variant={"outline"} size="sm" onClick={toggleColorMode}>
+            Toggle {colorMode === "light" ? "Dark" : "Light"}
+          </Button>
+          <EventFormModal buttonSize="sm" />
+          <Spacer />
           <HStack spacing={2}>
             <Text fontSize="sm">Events:</Text>
             <Text fontSize="xl" marginLeft={1}>
@@ -119,15 +131,18 @@ export function BottomBar() {
               <Text fontSize="xl">{relaysCount}</Text>
             </HStack>
           </Link>
+          <Link as={NavLink} to="/queue">
+            <HStack spacing={2}>
+              <Text fontSize="sm">Queue:</Text>
+              <Text fontSize="xl">{queueItemsCount}</Text>
+            </HStack>
+          </Link>
           <Link as={NavLink} to="/subscriptions">
             <HStack spacing={2}>
               <Text fontSize="sm">Subscriptions:</Text>
               <Text fontSize="xl">{subscriptionsCount}</Text>
             </HStack>
           </Link>
-          <Button variant={"outline"} onClick={toggleColorMode}>
-            Toggle {colorMode === "light" ? "Dark" : "Light"}
-          </Button>
         </>
       </HStack>
     </Box>

diff --git a/client-web/src/components/connect-modal.tsx b/client-web/src/components/connect-modal.tsx
@@ -13,6 +13,7 @@ import {
   Input,
   ModalFooter,
   useToast,
+  ButtonGroup,
 } from "@chakra-ui/react";
 import { useNClient } from "../state/client";
 import { useEffect, useState } from "react";
@@ -91,6 +92,10 @@ export function ConnectModal({ isOpen, onClose }: ConnectModalProps) {
     }
   };
 
+  const resetRelays = () => {
+    setInitialRelayUrls(objectOfRelaysToArray(DEFAULT_RELAYS));
+  };
+
   useEffect(() => {
     const relays = localStorage.getItem("nostr-client:relays");
     if (relays) {
@@ -189,14 +194,24 @@ export function ConnectModal({ isOpen, onClose }: ConnectModalProps) {
             </Button>
           </Flex>
 
-          <Button
-            isLoading={loadingRelaysNos2x}
-            onClick={() => relaysFromExtention()}
-            size="xs"
-            marginTop={2}
-          >
-            Load from nos2x
-          </Button>
+          <ButtonGroup>
+            <Button
+              isLoading={loadingRelaysNos2x}
+              onClick={() => relaysFromExtention()}
+              size="xs"
+              marginTop={2}
+            >
+              Load from nos2x
+            </Button>
+            <Button
+              isLoading={loadingRelaysNos2x}
+              onClick={resetRelays}
+              size="xs"
+              marginTop={2}
+            >
+              Reset
+            </Button>
+          </ButtonGroup>
         </ModalBody>
         <ModalFooter>
           <Button

diff --git a/client-web/src/components/create-event-form.tsx b/client-web/src/components/create-event-form.tsx
@@ -42,11 +42,13 @@ interface CreateEventFormProps {
   inResponseTo?: NEvent | undefined;
   relayUrls?: string[];
   kind?: NKIND;
+  sendCallback?: (eventId: string) => void;
 }
 
 export const CreateEventForm = (props: CreateEventFormProps) => {
-  const [isReady] = useNClient((state) => [
+  const [isReady, keypairIsLoaded] = useNClient((state) => [
     state.connected && state.keystore !== "none",
+    state.keypairIsLoaded,
   ]);
   const [isBusy, setBusy] = useState<boolean>(false);
   const [errors, setErrors] = useState<string[]>([]);
@@ -56,6 +58,11 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
     state.keypair,
   ]);
 
+  const message =
+    isReady || keypairIsLoaded
+      ? undefined
+      : "Login and connect to send events.";
+
   /**
    * Event data
    */
@@ -98,7 +105,9 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
 
   const toast = useToast();
 
-  const relayUrls = props.relayUrls ? props.relayUrls : [];
+  const relayUrls = props.relayUrls ? props.relayUrls : undefined;
+
+  const relayUrl = relayUrls && relayUrls.length > 0 ? relayUrls[0] : "";
 
   /**
    * Create event from inputs
@@ -135,7 +144,7 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
       case "NewRecommendRelay":
         return {
           event: NewRecommendRelay({
-            relayUrl: relayUrls[0],
+            relayUrl: relayUrl,
           }),
         };
       case "NewQuoteRepost":
@@ -147,7 +156,7 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
         return {
           event: NewQuoteRepost({
             inResponseTo: props.inResponseTo,
-            relayUrl: relayUrls[0],
+            relayUrl: relayUrl,
           }),
         };
       default:
@@ -230,6 +239,9 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
 
         reset();
         setBusy(false);
+        if (props.sendCallback) {
+          props.sendCallback(evId);
+        }
       }
     } catch (e) {
       let error = "";
@@ -302,6 +314,11 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
           {error}
         </Box>
       ))}
+      {message && (
+        <Box color="red.500" paddingBottom={2}>
+          {message}
+        </Box>
+      )}
       <Button
         type="submit"
         variant={"solid"}

diff --git a/client-web/src/components/event-form-modal.tsx b/client-web/src/components/event-form-modal.tsx
@@ -0,0 +1,48 @@
+import {
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from "@chakra-ui/react";
+import { CreateEventForm } from "./create-event-form";
+
+interface EventFormModalProps {
+  buttonSize: string;
+}
+
+export function EventFormModal(props?: EventFormModalProps) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const sendCallback = () => {
+    onClose();
+  };
+
+  return (
+    <>
+      <Button size={props?.buttonSize || "md"} onClick={onOpen}>
+        Post message
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Broadcast to the Network</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <CreateEventForm sendCallback={sendCallback} />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/client-web/src/components/event.tsx b/client-web/src/components/event.tsx
@@ -116,6 +116,10 @@ export function Event({
     onOpen();
   };
 
+  const sendCallback = () => {
+    onReplyClose();
+  };
+
   const relatedRelay = async () => {
     const relays = await useNClient.getState().getRelays();
     const relay = relays.find((r) => eventRelayUrls.includes(r.url));
@@ -391,6 +395,23 @@ export function Event({
   return (
     <>
       {EventCard}
+      {isReplyOpen && (
+        <Box
+          padding={4}
+          marginBottom={2}
+          marginTop={2}
+          background="background"
+          borderRadius={4}
+        >
+          <CreateEventForm
+            isResponse={true}
+            inResponseTo={event}
+            relayUrls={eventRelayUrls}
+            kind="NewShortTextNoteResponse"
+            sendCallback={sendCallback}
+          />
+        </Box>
+      )}
       <HStack padding={2} flexWrap="wrap">
         {reactions && (
           <>
@@ -479,16 +500,6 @@ export function Event({
         })}
       {ImageModal}
       {EventModal}
-      {isReplyOpen && (
-        <Box padding={4} background="background" borderRadius={4}>
-          <CreateEventForm
-            isResponse={true}
-            inResponseTo={event}
-            relayUrls={eventRelayUrls}
-            kind="NewShortTextNoteResponse"
-          />
-        </Box>
-      )}
     </>
   );
 }
diff --git a/client-web/src/components/events.tsx b/client-web/src/components/events.tsx
@@ -1,10 +1,10 @@
 import { Box, Button, Text } from "@chakra-ui/react";
+import { NFilters } from "@nostr-ts/common";
 import { useNClient } from "../state/client";
 import { Event } from "../components/event";
 import { useEffect, useState } from "react";
 import { MAX_EVENTS } from "../defaults";
 import { User } from "./user";
-import { NFilters } from "@nostr-ts/common";
 
 export function Events(props: {
   userComponent?: typeof User;
@@ -46,19 +46,19 @@ export function Events(props: {
   const newEvents = async () => {
     setMoreEventsCount(0);
     setFilters(props.filters);
-    await useNClient.getState().setMaxEvents(MAX_EVENTS);
-    await useNClient.getState().clearEvents();
-    await useNClient.getState().setViewSubscription(props.view, filters);
+    await useNClient.getState().setViewSubscription(props.view, filters, {
+      reset: true,
+    });
     setShowButtonsAnyway(false);
   };
 
   const showButtons = events.length >= maxEvents || showButtonsAnyway;
 
   return (
     <Box style={{ overflowWrap: "break-word", wordWrap: "break-word" }}>
-      {events.map((event) => {
+      {events.map((event, index) => {
         return (
-          <Box padding={2} key={event.event.id}>
+          <Box padding={2} key={`${event.event.id}-${index}`}>
             <Event
               event={event.event}
               user={event.user}
@@ -67,7 +67,6 @@ export function Events(props: {
               mentions={event.mentions}
               replies={event.replies}
               eventRelayUrls={event.eventRelayUrls}
-              key={event.event.id}
               userComponent={
                 props && props.userComponent ? (
                   event.user && event.user.pubkey ? (
@@ -96,7 +95,9 @@ export function Events(props: {
         );
       })}
       {events.length === 0 && (
-        <Text>Waiting for fresh content ... hold on.</Text>
+        <Box marginTop={5} marginBottom={5} textAlign={"center"}>
+          <Text>Waiting for fresh content ... hold on.</Text>
+        </Box>
       )}
       {showButtons && (
         <Box display="flex" justifyContent="space-between" padding={2}>