code changes for pagination

slategroup · Nov 25, 2024 · ee2be43 · ee2be43
1 parent b751a91
commit ee2be43
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 21 deletions.
diff --git a/client/src/core/client/stream/constants.ts b/client/src/core/client/stream/constants.ts
@@ -6,7 +6,7 @@ export const POST_COMMENT_FORM_ID = "post-comment-form";
 
 export const MAX_REPLY_INDENT_DEPTH = 7;
 
-export const NUM_INITIAL_COMMENTS = 20;
+export const NUM_INITIAL_COMMENTS = 20; // has to be changed in tandem with AllCommentsTabContainer.tx
 
 export const RTE_ELEMENT_ID = "Coral-RTE";
 

diff --git a/...nt/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx b/...nt/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
@@ -244,27 +244,20 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = ({
   );
 
   const commentSeenEnabled = useCommentSeenEnabled();
-  const [loadMore, isLoadingMore] = useLoadMore(relay, 99999);
+  // calling loadMore will query GraphQL for 20 more comments
+  const [loadMore, isLoadingMore] = useLoadMore(relay, 20); // 99999 instead of 20 will effectively load all remaining comments
   const beginLoadMoreEvent = useViewerNetworkEvent(LoadMoreAllCommentsEvent);
   const beginViewNewCommentsEvent = useViewerNetworkEvent(
     ViewNewCommentsNetworkEvent
   );
 
-  useEffect(() => {
-    setLocal({ commentsFullyLoaded: !hasMore });
-    if (hasMore && !isLoadingMore) {
-      void loadMoreAndEmit();
-    }
-  }, []);
-
   const loadMoreAndEmit = useCallback(async () => {
     const loadMoreEvent = beginLoadMoreEvent({
       storyID: story.id,
       keyboardShortcutsConfig,
     });
     try {
       await loadMore();
-      setLocal({ commentsFullyLoaded: true });
       loadMoreEvent.success();
     } catch (error) {
       loadMoreEvent.error({ message: error.message, code: error.code });
@@ -629,7 +622,9 @@ const enhanced = withPaginationContainer<
     story: graphql`
       fragment AllCommentsTabContainer_story on Story
       @argumentDefinitions(
-        count: { type: "Int", defaultValue: 20 }
+        # this count defines the number of comments that are initially requested
+        # from GraphQL and rendered on the page
+        count: { type: "Int", defaultValue: 5 }
         cursor: { type: "Cursor" }
         orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
         tag: { type: "TAG" }

diff --git a/...e/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabVirtualizedComments.tsx b/...e/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabVirtualizedComments.tsx
@@ -82,10 +82,11 @@ const AllCommentsTabVirtualizedComments: FunctionComponent<Props> = ({
     const commentsOnLoad = { length: comments.length, hasMore };
     const commentsOnLoadLessThanInitialComments =
       commentsOnLoad.length < NUM_INITIAL_COMMENTS;
+
     return commentsOnLoadLessThanInitialComments
       ? false
       : commentsOnLoad.hasMore;
-  }, []);
+  }, [hasMore]); // watching for changes on hasMore to determine whether the Load More button should render
 
   // We determine whether to display the Load all comments button based on whether:
   // 1. If there are more comments to display than 20 AND fewer than 20 weren't initially loaded.
@@ -169,13 +170,13 @@ const AllCommentsTabVirtualizedComments: FunctionComponent<Props> = ({
             id={
               loadAllButtonDisabled
                 ? "comments-loadAll-loading"
-                : "comments-loadAll"
+                : "comments-loadMore"
             }
           >
             <Button
               key={`comments-loadAll-${comments.length}`}
               id="comments-loadAll"
-              onClick={onDisplayLoadAllButtonClick}
+              onClick={loadMoreAndEmit}
               color="secondary"
               variant="outlined"
               fullWidth
@@ -189,7 +190,7 @@ const AllCommentsTabVirtualizedComments: FunctionComponent<Props> = ({
               data-key-stop
               data-is-load-more
             >
-              Load All Comments
+              Load More
             </Button>
           </Localized>
         )}
@@ -222,11 +223,7 @@ const AllCommentsTabVirtualizedComments: FunctionComponent<Props> = ({
           top: increaseViewportBy,
           bottom: increaseViewportBy,
         }}
-        totalCount={
-          displayLoadAllButton
-            ? NUM_INITIAL_COMMENTS + newCommentsLength
-            : comments.length
-        }
+        totalCount={comments.length} // always render new comments as they get returned from GraphQL
         overscan={overscan}
         itemContent={useCallback(
           (index: number) => {

diff --git a/server/src/core/server/graph/loaders/Comments.ts b/server/src/core/server/graph/loaders/Comments.ts
@@ -482,14 +482,18 @@ export default (ctx: GraphContext) => ({
       throw new StoryNotFoundError(comment.storyID);
     }
 
+    // does this determine whether we keep querying for all comments on load?
+    // no doesn't seem to do anything
+    console.log('allChildComments retrieving all child comments (9999)')
+
     const cacheAvailable = await ctx.cache.available(ctx.tenant.id);
     if (!cacheAvailable) {
       return retrieveChildrenForParentConnection(
         ctx.mongo,
         ctx.tenant.id,
         comment,
         {
-          first: 9999,
+          first: 9999, // dev here 9999
           orderBy: defaultTo(orderBy, GQLCOMMENT_SORT.CREATED_AT_ASC),
         },
         story.isArchived