client-web: added new following feed; performance improvements

franzos · Sep 1, 2023 · f778596 · f778596
1 parent 090c083
commit f778596
Show file tree

Hide file tree

Showing 11 changed files with 301 additions and 194 deletions.
diff --git a/client-web/src/components/create-event-form.tsx b/client-web/src/components/create-event-form.tsx
@@ -55,67 +55,35 @@ export const CreateEventForm = () => {
     ]
   );
 
+  const [eventContent, setEventContent] = useState<string>("");
   const [relayUrls, setRelayUrls] = useState<string[]>([]);
+  const publicKey = useRef<string | undefined>(undefined);
 
   const toast = useToast();
 
-  const currentPubkey = useRef<string | undefined>(undefined);
-
   useEffect(() => {
     const loadUser = async () => {
       if (
-        newEventName !== "NewShortTextNoteResponse"
-        // newEventName !== "NewQuoteRepost"
+        !publicKeyTags ||
+        newEventName !== "NewShortTextNoteResponse" ||
+        publicKeyTags[0][1] === publicKey.current
       ) {
         return;
       }
 
-      const publicKey = useNClient.getState().newEvent?.pubkey;
-      if (!publicKey) {
-        return;
-      }
-      if (currentPubkey.current === publicKey) {
-        return;
-      }
-      currentPubkey.current = publicKey;
-
-      const foundUsers: {
-        user: NUser;
-        relayUrls: string[];
-      }[] = [];
       const foundRelayUrls = [];
       if (publicKeyTags) {
+        publicKey.current = publicKeyTags[0][1] || undefined;
         for (const tags of publicKeyTags) {
-          let relayUrl;
+          // let relayUrl;
           /**
            * Get the relay url from the tags [p, pubkey, relayUrl]
            */
           if (tags.length === 2) {
-            relayUrl = tags[1];
             foundRelayUrls.push(tags[1]);
           }
-          const key = tags[0];
-          const record = await useNClient.getState().getUser(key);
-          if (record) {
-            foundUsers.push({
-              user: record.user,
-              relayUrls: record.relayUrls
-                ? record.relayUrls
-                : relayUrl
-                ? [relayUrl]
-                : [],
-            });
-          } else {
-            foundUsers.push({
-              user: new NUser({ pubkey: key }),
-              relayUrls: relayUrl ? [relayUrl] : [],
-            });
-          }
         }
       }
-      if (foundUsers.length > 0) {
-        setUsers(foundUsers);
-      }
       if (foundRelayUrls.length > 0) {
         setRelayUrls(foundRelayUrls);
       }
@@ -163,7 +131,7 @@ export const CreateEventForm = () => {
       return;
     }
 
-    if (!newEvent.content) {
+    if (eventContent === "") {
       setErrors(["Event content is required"]);
       toast({
         title: "Error",
@@ -176,6 +144,7 @@ export const CreateEventForm = () => {
     }
 
     try {
+      useNClient.getState().setNewEventContent(eventContent);
       const evId = await useNClient.getState().signAndSendEvent({
         event: newEvent,
         relayUrls,
@@ -299,10 +268,8 @@ export const CreateEventForm = () => {
         <Input
           type="text"
           as={eventKind === NEVENT_KIND.LONG_FORM_CONTENT ? Textarea : Input}
-          value={useNClient.getState().newEvent?.content || ""}
-          onChange={(e) =>
-            useNClient.getState().setNewEventContent(e.target.value)
-          }
+          value={eventContent}
+          onChange={(e) => setEventContent(e.target.value)}
           placeholder="Enter event content"
         />
       </FormControl>

diff --git a/client-web/src/components/event.tsx b/client-web/src/components/event.tsx
@@ -425,10 +425,10 @@ export function Event({
         {reposts && (
           <>
             <Text>Reposts</Text>
-            {reposts.map((r) => {
+            {reposts.map((r, index) => {
               const user = r.user ? r.user : { pubkey: r.event.pubkey };
               return (
-                <Box key={`${r.event.id}_${user.pubkey}_reposts`}>
+                <Box key={`${index}_${r.event.id}_${user.pubkey}_reposts`}>
                   <UserIcon
                     user={user}
                     options={{
@@ -450,8 +450,8 @@ export function Event({
           mentions && (
             <>
               <Text>Mentions</Text>
-              {mentions.map((u) => (
-                <Box key={`${event.id}_${u.pubkey}_mention`}>
+              {mentions.map((u, index) => (
+                <Box key={`${index}_${event.id}_${u.pubkey}_mention`}>
                   <UserIcon
                     user={u}
                     options={{

diff --git a/client-web/src/defaults.ts b/client-web/src/defaults.ts
@@ -1,4 +1,4 @@
-export const MAX_EVENTS = 25;
+export const MAX_EVENTS = 50;
 export const DEFAULT_RELAYS = {
   "wss://relay.shitforce.one": {
     read: true,

diff --git a/client-web/src/layouts/primary.tsx b/client-web/src/layouts/primary.tsx
@@ -20,6 +20,7 @@ import FormatListBulletedIcon from "mdi-react/FormatListBulletedIcon";
 import AccountKeyIcon from "mdi-react/AccountKeyIcon";
 import AccountMultipleIcon from "mdi-react/AccountMultipleIcon";
 import TrayFullIcon from "mdi-react/TrayFullIcon";
+import PlaylistStarIcon from "mdi-react/PlaylistStarIcon";
 import AccountEditIcon from "mdi-react/AccountEditIcon";
 import { ConnectModal } from "../components/connect-modal";
 
@@ -72,6 +73,12 @@ export function PrimaryLayout() {
             leftIcon={<Icon as={AccountMultipleIcon} marginRight={1} />}
           /> */}
 
+          <MenuItem
+            label="Following feed"
+            to="/following-feed"
+            leftIcon={<Icon as={PlaylistStarIcon} marginRight={1} />}
+          />
+
           <MenuItem
             label="Following"
             value={followingUsers.length}

diff --git a/client-web/src/main.tsx b/client-web/src/main.tsx
@@ -14,6 +14,7 @@ import { RelaysRoute } from "./routes/relays.tsx";
 import { PublishingQueueRoute } from "./routes/queue.tsx";
 import { UserMentionsRoute } from "./routes/mentions.tsx";
 import { UserProfileRoute } from "./routes/user-profile.tsx";
+import { FollowingFeedRoute } from "./routes/following-feed.tsx";
 import "./index.css";
 
 const init = async () => {
@@ -34,6 +35,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/account" element={<AccountRoute />} />
             <Route path="/profile" element={<UserProfileRoute />} />
             <Route path="/following" element={<FollowingRoute />} />
+            <Route path="/following-feed" element={<FollowingFeedRoute />} />
             <Route path="/mentions/:pubkey" element={<UserMentionsRoute />} />
             <Route path="/subscriptions" element={<SubscriptionsRoute />} />
             <Route path="/relays" element={<RelaysRoute />} />

diff --git a/client-web/src/routes/following-feed.tsx b/client-web/src/routes/following-feed.tsx
@@ -0,0 +1,80 @@
+import { Heading, Box, Text, Grid } from "@chakra-ui/react";
+import { NEVENT_KIND, NFilters } from "@nostr-ts/common";
+import { useEffect } from "react";
+import { useNClient } from "../state/client";
+import { Events } from "../components/events";
+import { MAX_EVENTS } from "../defaults";
+import { CreateEventForm } from "../components/create-event-form";
+import { User } from "../components/user";
+
+export function FollowingFeedRoute() {
+  const [connected, eventsEqualOrMoreThanMax, followingUserIds] = useNClient(
+    (state) => [
+      state.connected,
+      state.events.length >= state.maxEvents,
+      state.followingUserIds,
+    ]
+  );
+  const filters = new NFilters({
+    limit: MAX_EVENTS,
+    authors: followingUserIds,
+    kinds: [NEVENT_KIND.SHORT_TEXT_NOTE, NEVENT_KIND.LONG_FORM_CONTENT],
+  });
+
+  const view = `following-feed`;
+
+  const init = async () => {
+    if (!connected) return;
+
+    await useNClient.getState().setMaxEvents(MAX_EVENTS);
+    await useNClient.getState().clearEvents();
+    await useNClient.getState().setViewSubscription(view, filters);
+  };
+
+  /**
+   * Handle initial load
+   */
+  useEffect(() => {
+    init();
+  }, []);
+
+  /**
+   * Remove subscription when we hit the limit
+   */
+  useEffect(() => {
+    const remove = async () => {
+      if (!connected) return;
+      await useNClient.getState().removeViewSubscription(view);
+    };
+
+    if (eventsEqualOrMoreThanMax) {
+      remove();
+    }
+  }, [eventsEqualOrMoreThanMax]);
+
+  return (
+    <Grid templateColumns={["1fr", "2fr 1fr"]} gap={20}>
+      <Box maxHeight="80vh" overflowY="auto">
+        <Box>
+          {connected ? (
+            <Events
+              userComponent={User}
+              view={view}
+              filters={filters}
+              connected={connected}
+            />
+          ) : (
+            <Text>Not connected.</Text>
+          )}
+        </Box>
+      </Box>
+
+      <Box display="flex" flexDirection="column">
+        <Heading as="h2" size="md" marginBottom={4}>
+          Broadcast to the Network
+        </Heading>
+        <CreateEventForm />
+      </Box>
+    </Grid>
+  );
+}
diff --git a/client-web/src/routes/profile.tsx b/client-web/src/routes/profile.tsx
@@ -36,6 +36,7 @@ export function ProfileRoute() {
     // USER
 
     if (!userRecord || userRecord.user.pubkey !== pubkey) {
+      await useNClient.getState().setMaxEvents(MAX_EVENTS);
       await useNClient.getState().clearEvents();
       await useNClient.getState().setViewSubscription(view, defaultFilters);
 

diff --git a/client-web/src/routes/welcome.tsx b/client-web/src/routes/welcome.tsx
@@ -22,6 +22,7 @@ export function WelcomeRoute() {
   const init = async () => {
     if (!connected || initDone.current) return;
     initDone.current = true;
+    await useNClient.getState().setMaxEvents(MAX_EVENTS);
     await useNClient.getState().clearEvents();
     await useNClient.getState().setViewSubscription("welcome", defaultFilters);
   };
@@ -60,12 +61,14 @@ export function WelcomeRoute() {
     <Grid templateColumns={["1fr", "2fr 1fr"]} gap={20}>
       <Box>
         {connected ? (
-          <Events
-            userComponent={User}
-            view="welcome"
-            filters={defaultFilters}
-            connected={connected}
-          />
+          <Box maxHeight="80vh" overflowY="auto">
+            <Events
+              userComponent={User}
+              view="welcome"
+              filters={defaultFilters}
+              connected={connected}
+            />
+          </Box>
         ) : (
           <Box maxWidth={600}>
             <Heading size="lg">About Nostr</Heading>