fix more items text for spaces where there is less items than limited

daostack · Apr 4, 2024 · 5f404f4 · 5f404f4
1 parent 7fdb4fa
commit 5f404f4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx
@@ -65,6 +65,7 @@ export const ProjectFeedItem: FC<ProjectFeedItemProps> = (props) => {
   const commonId = item.data.id;
   const {
     data: feedItems,
+    hasMoreItems,
     fetched,
     fetchFeedItems,
     onFeedItemUpdate,
@@ -196,13 +197,15 @@ export const ProjectFeedItem: FC<ProjectFeedItemProps> = (props) => {
                 level={level}
                 onFeedItemUpdate={onFeedItemUpdate}
               />
-              <NavLink
-                className={styles.moreItemsTextContainer}
-                to={commonPath}
-              >
-                More items in {common.name}
-                <OpenIcon className={styles.moreItemsTextIcon} />
-              </NavLink>
+              {hasMoreItems && (
+                <NavLink
+                  className={styles.moreItemsTextContainer}
+                  to={commonPath}
+                >
+                  More items in {common.name}
+                  <OpenIcon className={styles.moreItemsTextIcon} />
+                </NavLink>
+              )}
             </>
           )}
         </CommonCard>

diff --git a/src/pages/common/components/FeedItem/components/ProjectFeedItem/hooks/useFeedItems.ts b/src/pages/common/components/FeedItem/components/ProjectFeedItem/hooks/useFeedItems.ts
@@ -20,6 +20,7 @@ const ITEMS_LIMIT = 5;
 type State = LoadingState<FeedItemFollowLayoutItem[]>;
 
 interface Return extends State {
+  hasMoreItems: boolean;
   fetchFeedItems: () => void;
   onFeedItemUpdate: (item: CommonFeed, isRemoved: boolean) => void;
 }
@@ -42,6 +43,7 @@ export const useFeedItems = (
     fetched: false,
     data: [],
   });
+  const [hasMoreItems, setHasMoreItems] = useState(false);
   const feedState = useSelector(selectFeedStateByCommonId(commonId));
 
   const updateCachedFeedState = (
@@ -94,6 +96,7 @@ export const useFeedItems = (
         fetched: true,
         data: cachedFeedItems.slice(0, ITEMS_LIMIT),
       });
+      setHasMoreItems(cachedFeedItems.length > ITEMS_LIMIT);
     } else {
       setState({
         loading: true,
@@ -110,7 +113,7 @@ export const useFeedItems = (
         await Promise.all([
           CommonFeedService.getCommonFeedItemsByUpdatedAt(commonId, userId, {
             commonMember,
-            limit: ITEMS_LIMIT,
+            limit: ITEMS_LIMIT + 2,
           }),
           CommonFeedService.getCommonPinnedFeedItems(commonId),
         ]);
@@ -129,19 +132,16 @@ export const useFeedItems = (
         }));
 
       if (currentLoadingIdRef.current === loadingId) {
+        const finalItems = [...convertedPinnedFeedItems, ...convertedFeedItems];
+
         setState({
           loading: false,
           fetched: true,
-          data: [...convertedPinnedFeedItems, ...convertedFeedItems].slice(
-            0,
-            ITEMS_LIMIT,
-          ),
+          data: finalItems.slice(0, ITEMS_LIMIT),
         });
+        setHasMoreItems(finalItems.length > ITEMS_LIMIT);
 
-        if (
-          cachedFeedItems.length <
-          convertedFeedItems.length + convertedPinnedFeedItems.length
-        ) {
+        if (cachedFeedItems.length < finalItems.length) {
           updateCachedFeedState(convertedFeedItems, convertedPinnedFeedItems);
         }
       }
@@ -220,6 +220,7 @@ export const useFeedItems = (
 
   return {
     ...state,
+    hasMoreItems,
     fetchFeedItems,
     onFeedItemUpdate: handleFeedItemUpdate,
   };