client-web: replies are now several levels deep

franzos · Sep 26, 2023 · 99e939f · 99e939f
1 parent 5cefef8
commit 99e939f
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,12 @@
-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";
 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 && (