diff --git a/client/src/core/client/stream/constants.ts b/client/src/core/client/stream/constants.ts index 8a2ba30684..b1de0a7a8d 100644 --- 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/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx b/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx index 2b1d4ba0c9..3b73922f09 100644 --- a/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx +++ b/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx @@ -244,19 +244,13 @@ export const AllCommentsTabContainer: FunctionComponent = ({ ); 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, @@ -264,7 +258,6 @@ export const AllCommentsTabContainer: FunctionComponent = ({ }); 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/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabVirtualizedComments.tsx b/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabVirtualizedComments.tsx index 1e56bcf278..0f3f68bd5e 100644 --- a/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabVirtualizedComments.tsx +++ b/client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabVirtualizedComments.tsx @@ -82,10 +82,11 @@ const AllCommentsTabVirtualizedComments: FunctionComponent = ({ 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 = ({ id={ loadAllButtonDisabled ? "comments-loadAll-loading" - : "comments-loadAll" + : "comments-loadMore" } > )} @@ -222,11 +223,7 @@ const AllCommentsTabVirtualizedComments: FunctionComponent = ({ 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 index 3e9f3d3f8b..079dc94b2b 100644 --- a/server/src/core/server/graph/loaders/Comments.ts +++ b/server/src/core/server/graph/loaders/Comments.ts @@ -482,6 +482,10 @@ 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( @@ -489,7 +493,7 @@ export default (ctx: GraphContext) => ({ ctx.tenant.id, comment, { - first: 9999, + first: 9999, // dev here 9999 orderBy: defaultTo(orderBy, GQLCOMMENT_SORT.CREATED_AT_ASC), }, story.isArchived