From d4873ffa184ad1b627f0fe4a4823381828a85568 Mon Sep 17 00:00:00 2001
From: gintil <michael994664@gmail.com>
Date: Sat, 28 Dec 2024 19:14:01 -0500
Subject: [PATCH] Show total count in feed list

---
 .../SelectableUserFeedList.tsx                | 120 ++++++++++--------
 .../CopyUserFeedSettingsDialog/index.tsx      |   9 +-
 .../index.tsx                                 |   7 +-
 3 files changed, 74 insertions(+), 62 deletions(-)

diff --git a/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/SelectableUserFeedList.tsx b/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/SelectableUserFeedList.tsx
index 926e17e7a..4254d3965 100644
--- a/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/SelectableUserFeedList.tsx
+++ b/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/SelectableUserFeedList.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Checkbox, Divider, Spinner, Stack, chakra } from "@chakra-ui/react";
+import { Box, Center, Checkbox, Divider, Spinner, Stack, Text, chakra } from "@chakra-ui/react";
 import { useInView } from "react-intersection-observer";
 import { useCallback, useEffect } from "react";
 import { useUserFeedsInfinite } from "../../hooks/useUserFeedsInfinite";
@@ -15,6 +15,7 @@ export const SelectableUserFeedList = ({ selectedIds, onSelectedIdsChange }: Pro
     useUserFeedsInfinite({
       limit: 10,
     });
+  const totalCount = data?.pages[0].total;
 
   const fetchMoreOnBottomReached = useCallback(() => {
     if (inView && !isFetchingNextPage && hasNextPage) {
@@ -26,64 +27,71 @@ export const SelectableUserFeedList = ({ selectedIds, onSelectedIdsChange }: Pro
     fetchMoreOnBottomReached();
   }, [fetchMoreOnBottomReached]);
 
+  const fetchedSoFarCount = data?.pages.reduce((acc, page) => acc + page.results.length, 0) ?? 0;
+
   return (
-    <Stack
-      gap={1}
-      bg="blackAlpha.300"
-      px={4}
-      py={3}
-      borderRadius="md"
-      maxHeight={350}
-      border="2px"
-      borderColor="gray.600"
-      overflow="auto"
-      divider={<Divider />}
-    >
-      {data?.pages.map((page) => {
-        if (!page.results.length) {
-          return null;
-        }
+    <Stack>
+      <Stack
+        gap={1}
+        bg="blackAlpha.300"
+        px={4}
+        py={3}
+        borderRadius="md"
+        maxHeight={350}
+        border="2px"
+        borderColor="gray.600"
+        overflow="auto"
+        divider={<Divider />}
+      >
+        {data?.pages.map((page) => {
+          if (!page.results.length) {
+            return null;
+          }
 
-        return (
-          <Stack gap={1} divider={<Divider />}>
-            {page.results.map((userFeed) => (
-              <Box key={`feed-${userFeed.id}`}>
-                <Checkbox
-                  width="100%"
-                  onChange={(e) => {
-                    if (e.target.checked && !selectedIds.includes(userFeed.id)) {
-                      onSelectedIdsChange([...selectedIds, userFeed.id]);
-                    } else if (!e.target.checked && selectedIds.includes(userFeed.id)) {
-                      onSelectedIdsChange(selectedIds.filter((id) => id !== userFeed.id));
-                    }
-                  }}
-                  isChecked={selectedIds.includes(userFeed.id)}
-                >
-                  <chakra.span ml={2} display="block" fontSize="sm" fontWeight={600}>
-                    {userFeed.title}
-                  </chakra.span>
-                  <chakra.span
-                    ml={2}
-                    display="block"
-                    color="whiteAlpha.600"
-                    fontSize="sm"
-                    whiteSpace="nowrap"
+          return (
+            <Stack gap={1} divider={<Divider />}>
+              {page.results.map((userFeed) => (
+                <Box key={`feed-${userFeed.id}`}>
+                  <Checkbox
+                    width="100%"
+                    onChange={(e) => {
+                      if (e.target.checked && !selectedIds.includes(userFeed.id)) {
+                        onSelectedIdsChange([...selectedIds, userFeed.id]);
+                      } else if (!e.target.checked && selectedIds.includes(userFeed.id)) {
+                        onSelectedIdsChange(selectedIds.filter((id) => id !== userFeed.id));
+                      }
+                    }}
+                    isChecked={selectedIds.includes(userFeed.id)}
                   >
-                    {userFeed.url}
-                  </chakra.span>
-                </Checkbox>
-              </Box>
-            ))}
-          </Stack>
-        );
-      })}
-      {(status === "loading" || isFetchingNextPage) && (
-        <Center>
-          <Spinner margin={4} />
-        </Center>
-      )}
-      {error && <InlineErrorAlert title="Failed to list feeds" description={error.message} />}
-      <div ref={scrollRef} />
+                    <chakra.span ml={2} display="block" fontSize="sm" fontWeight={600}>
+                      {userFeed.title}
+                    </chakra.span>
+                    <chakra.span
+                      ml={2}
+                      display="block"
+                      color="whiteAlpha.600"
+                      fontSize="sm"
+                      whiteSpace="nowrap"
+                    >
+                      {userFeed.url}
+                    </chakra.span>
+                  </Checkbox>
+                </Box>
+              ))}
+            </Stack>
+          );
+        })}
+        {(status === "loading" || isFetchingNextPage) && (
+          <Center>
+            <Spinner margin={4} />
+          </Center>
+        )}
+        {error && <InlineErrorAlert title="Failed to list feeds" description={error.message} />}
+        <div ref={scrollRef} />
+      </Stack>
+      <Text color="whiteAlpha.600" fontSize="sm">
+        Showing {fetchedSoFarCount} of {totalCount} feeds
+      </Text>
     </Stack>
   );
 };
diff --git a/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx b/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
index 0c0e8ff75..2bb9f5b2e 100644
--- a/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
@@ -251,10 +251,6 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
                   onSelectedIdsChange={setCheckedUserFeeds}
                   selectedIds={checkedUserFeeds}
                 />
-                <Text>
-                  Selected {checkedUserFeeds.length}{" "}
-                  {checkedUserFeeds.length === 1 ? "feed" : "feeds"}
-                </Text>
               </Stack>
             </Stack>
             {error && (
@@ -280,7 +276,10 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
                 checkedSettings.length === 0 || status === "loading"
               }
             >
-              <span>Confirm</span>
+              <span>
+                Copy to{" "}
+                {checkedUserFeeds.length === 1 ? "1 feed" : `${checkedUserFeeds.length} feeds`}
+              </span>
             </Button>
           </HStack>
         </ModalFooter>
diff --git a/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx b/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
index bb63de8ce..c5cfe107a 100644
--- a/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
+++ b/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
@@ -404,7 +404,12 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
                 status === "loading"
               }
             >
-              <span>Confirm</span>
+              <span>
+                Copy to{" "}
+                {checkedConnections.length === 1
+                  ? "1 connection"
+                  : `${checkedConnections.length} connections`}
+              </span>
             </Button>
           </HStack>
         </ModalFooter>