From 99e939ff4721957685aad8d3576b04238ee8652a Mon Sep 17 00:00:00 2001
From: Franz Geffke <franz@pantherx.org>
Date: Tue, 26 Sep 2023 18:56:25 +0100
Subject: [PATCH] client-web: replies are now several levels deep

---
 client-web/src/components/event.tsx           | 109 ++++++++++--------
 .../src/components/event/action-buttons.tsx   |   2 +-
 client-web/src/components/event/replies.tsx   |  43 ++++++-
 client-web/src/components/loading.tsx         |  15 +++
 client-web/src/routes/event.tsx               |   8 +-
 client-web/src/routes/profile.tsx             |   8 +-
 6 files changed, 121 insertions(+), 64 deletions(-)
 create mode 100644 client-web/src/components/loading.tsx

diff --git a/client-web/src/components/event.tsx b/client-web/src/components/event.tsx
index 35b7ce0..1899eeb 100644
--- a/client-web/src/components/event.tsx
+++ b/client-web/src/components/event.tsx
@@ -211,63 +211,70 @@ export function Event({ data, level }: EventProps) {
   };
 
   return (
-    <Card>
-      {/* HEADER */}
-      <CardHeader p={0}>
-        {contentIsVisible ? (
-          <EventBanner images={properties.images} videos={properties.videos} />
-        ) : (
-          <NSFWContentToggle
-            contentWarning={properties.contentWarning}
-            setShowNSFWContent={makeContentVisible}
-          />
-        )}
-        <Box p={1} pl={2}>
-          <User user={user} opts={userOptions} />
-        </Box>
-      </CardHeader>
-      {/* BODY */}
-      <CardBody p={0}>
-        {contentIsVisible && (
-          <Skeleton isLoaded={properties.isLoaded}>
-            <EventContent
-              content={
-                properties.isLoaded ? properties.text : data.event.content
-              }
+    <>
+      <Card>
+        {/* HEADER */}
+        <CardHeader p={0}>
+          {contentIsVisible ? (
+            <EventBanner
+              images={properties.images}
+              videos={properties.videos}
             />
-          </Skeleton>
-        )}
-      </CardBody>
-      {/* FOOTER */}
-      <EventCardFooter
-        isReady={isReady}
-        level={level}
-        createdAt={data.event.created_at}
-        repliesCount={data.repliesCount}
-        reactionsCount={data.reactionsCount}
-        repostCount={data.repostsCount}
-        zapReceiptCount={data.zapReceiptCount}
-        zapReceiptAmount={data.zapReceiptAmount}
-        isReplyOpen={isRepliesOpen}
-        onReplyOpen={onRepliesOpen}
-        onReplyClose={onRepliesClose}
-        isInfoModalOpen={isInfoModalOpen}
-        onInfoModalOpen={onInfoModalOpen}
-        onInfoModalClose={onInfoModalClose}
-        onAction={newAction}
-      />
+          ) : (
+            <NSFWContentToggle
+              contentWarning={properties.contentWarning}
+              setShowNSFWContent={makeContentVisible}
+            />
+          )}
+          <Box p={1} pl={2}>
+            <User user={user} opts={userOptions} />
+          </Box>
+        </CardHeader>
+        {/* BODY */}
+        <CardBody p={0}>
+          {contentIsVisible && (
+            <Skeleton isLoaded={properties.isLoaded}>
+              <EventContent
+                content={
+                  properties.isLoaded ? properties.text : data.event.content
+                }
+              />
+            </Skeleton>
+          )}
+        </CardBody>
+        {/* FOOTER */}
+        <EventCardFooter
+          isReady={isReady}
+          level={level}
+          createdAt={data.event.created_at}
+          repliesCount={data.repliesCount}
+          reactionsCount={data.reactionsCount}
+          repostCount={data.repostsCount}
+          zapReceiptCount={data.zapReceiptCount}
+          zapReceiptAmount={data.zapReceiptAmount}
+          isReplyOpen={isRepliesOpen}
+          onReplyOpen={onRepliesOpen}
+          onReplyClose={onRepliesClose}
+          isInfoModalOpen={isInfoModalOpen}
+          onInfoModalOpen={onInfoModalOpen}
+          onInfoModalClose={onInfoModalClose}
+          onAction={newAction}
+        />
+      </Card>
 
-      <EventReplies
-        data={data}
-        isOpen={isRepliesOpen}
-        sendCallback={replyCallback}
-        level={level}
-      />
+      {isRepliesOpen && (
+        <EventReplies
+          data={data}
+          isOpen={isRepliesOpen}
+          sendCallback={replyCallback}
+          level={level}
+        />
+      )}
       <EventInfoModal
         data={data}
         isOpen={isInfoModalOpen}
         onClose={onInfoModalClose}
       />
-    </Card>
+    </>
   );
 }
diff --git a/client-web/src/components/event/action-buttons.tsx b/client-web/src/components/event/action-buttons.tsx
index a2fa129..4b15689 100644
--- a/client-web/src/components/event/action-buttons.tsx
+++ b/client-web/src/components/event/action-buttons.tsx
@@ -44,7 +44,7 @@ export function EventActionButtons({
         colorScheme="blue"
         leftIcon={<Icon as={ReplyIcon} />}
         onClick={() => (isReplyOpen ? onReplyClose() : onReplyOpen())}
-        isDisabled={!isReady || level >= 1}
+        isDisabled={!isReady || level >= 2}
       >
         {repliesCount}
       </Button>
diff --git a/client-web/src/components/event/replies.tsx b/client-web/src/components/event/replies.tsx
index 0a83f3a..565f206 100644
--- a/client-web/src/components/event/replies.tsx
+++ b/client-web/src/components/event/replies.tsx
@@ -3,7 +3,8 @@ import { CreateEventForm } from "../create-event-form";
 import { Event } from "../event";
 import { Box } from "@chakra-ui/react";
 import { useNClient } from "../../state/client";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { Loading } from "../loading";
 
 interface EventRepliesProps {
   data: LightProcessedEvent;
@@ -19,13 +20,47 @@ export function EventReplies({
   level,
 }: EventRepliesProps) {
   const view = `event-${data.event.id}_replies`;
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const [replies] = useNClient((state) => [
     state.events[`event-${data.event.id}_replies`],
   ]);
 
   const loadReplies = async () => {
-    await useNClient.getState().getEventReplies(data.event.id, view, true);
+    setIsLoading(true);
+    try {
+      await useNClient.getState().getEventReplies(data.event.id, view, true);
+    } catch (e) {
+      console.error(e);
+    }
+
+    if (replies && replies.length > 0) {
+      await useNClient.getState().requestInformation(
+        {
+          source: "events:related",
+          idsOrKeys: [...replies.map((r) => r.event.id)],
+        },
+        {
+          timeoutIn: 20000,
+          view,
+          isLive: true,
+        }
+      );
+      let pubkeys = replies.map((r) => r.event.pubkey);
+      pubkeys = [...new Set(pubkeys)];
+      await useNClient.getState().requestInformation(
+        {
+          source: "users",
+          idsOrKeys: [...pubkeys],
+        },
+        {
+          timeoutIn: 10000,
+          view,
+          isLive: true,
+        }
+      );
+    }
+    setIsLoading(false);
   };
 
   useEffect(() => {
@@ -68,6 +103,10 @@ export function EventReplies({
             </Box>
           );
         })}
+
+      {isLoading && isOpen && (
+        <Loading text="Just a sec ... Loading replies." />
+      )}
     </>
   );
 }
diff --git a/client-web/src/components/loading.tsx b/client-web/src/components/loading.tsx
new file mode 100644
index 0000000..0f37233
--- /dev/null
+++ b/client-web/src/components/loading.tsx
@@ -0,0 +1,15 @@
+import { Spinner, Box, Text } from "@chakra-ui/react";
+
+interface LoadingProps {
+  text?: string;
+}
+
+export const Loading = ({ text }: LoadingProps) => {
+  const defaultText = text ? text : "Just a sec ... Searching the Matrix.";
+  return (
+    <Box textAlign="center">
+      <Text>{defaultText}</Text>
+      <Spinner p={4} mt={2} />
+    </Box>
+  );
+};
diff --git a/client-web/src/routes/event.tsx b/client-web/src/routes/event.tsx
index a4bf792..3e20b27 100644
--- a/client-web/src/routes/event.tsx
+++ b/client-web/src/routes/event.tsx
@@ -1,9 +1,10 @@
-import { Heading, Box, Grid, Text, Spinner } from "@chakra-ui/react";
+import { Heading, Box, Grid } from "@chakra-ui/react";
 import { decodeBech32 } from "@nostr-ts/common";
 import { useState, useEffect, useRef } from "react";
 import { useNClient } from "../state/client";
 import { useParams } from "react-router-dom";
 import { Event } from "../components/event";
+import { Loading } from "../components/loading";
 
 export function EventRoute() {
   const [connected] = useNClient((state) => [state.connected]);
@@ -104,10 +105,7 @@ export function EventRoute() {
                 relays.
               </Heading>
             ) : (
-              <Box textAlign="center">
-                <Text>Just a sec ... Searching the Matrix for the event.</Text>
-                <Spinner p={10} mt={2} />
-              </Box>
+              <Loading text="Just a sec ... Searching the Matrix for the event." />
             )}
           </>
         )}
diff --git a/client-web/src/routes/profile.tsx b/client-web/src/routes/profile.tsx
index 5bf9960..1bce7a7 100644
--- a/client-web/src/routes/profile.tsx
+++ b/client-web/src/routes/profile.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Spinner, Text } from "@chakra-ui/react";
+import { Box, Grid } from "@chakra-ui/react";
 import { UserRecord, decodeBech32 } from "@nostr-ts/common";
 import { useState, useEffect, useRef } from "react";
 import { useNClient } from "../state/client";
@@ -6,6 +6,7 @@ import { useParams } from "react-router-dom";
 import { User } from "../components/user";
 import { Events } from "../components/events";
 import { filterByAuthor } from "../lib/default-filters";
+import { Loading } from "../components/loading";
 
 export function ProfileRoute() {
   const [status] = useNClient((state) => [state.status]);
@@ -138,10 +139,7 @@ export function ProfileRoute() {
       <Box>
         <Box mb={4}>
           {isLoadingUser && (
-            <Box textAlign="center">
-              <Text>Just a sec ... Searching the Matrix for the user.</Text>
-              <Spinner p={10} mt={2} />
-            </Box>
+            <Loading text="Just a sec ... Searching the Matrix for the user." />
           )}
 
           {userData && (