[C-4937] Adding some pagination buttons

packages/web/src/components/comments/CommentSectionContext.tsx

@@ -36,6 +36,8 @@ type CommentSectionContextType = CommentSectionContextProps & {
   handleEditComment: (commentId: ID, newMessage: string) => void
   handleDeleteComment: (commentId: ID) => void
   handleReportComment: (commentId: ID) => void
+  handleLoadMoreRootComments: () => void
+  handleLoadMoreReplies: (commentId: ID) => void
   fetchComments: () => void
 }
 
@@ -52,6 +54,8 @@ const initialContextValues: CommentSectionContextType = {
   handleEditComment: emptyFn,
   handleDeleteComment: emptyFn,
   handleReportComment: emptyFn,
+  handleLoadMoreRootComments: emptyFn,
+  handleLoadMoreReplies: emptyFn,
   fetchComments: emptyFn
 }
 
@@ -136,6 +140,12 @@ export const CommentSectionProvider = ({
   const handleReportComment = (commentId: ID) => {
     console.log('Clicked report for ', commentId)
   }
+  const handleLoadMoreRootComments = () => {
+    console.log('Loading more root comments')
+  }
+  const handleLoadMoreReplies = (commentId: ID) => {
+    console.log('Loading more replies for', commentId)
+  }
 
   // TODO: move this to audius-query
   // load comments logic
@@ -178,7 +188,9 @@ export const CommentSectionProvider = ({
         handleEditComment,
         handleDeleteComment,
         handleReportComment,
-        fetchComments
+        handleLoadMoreReplies,
+        handleLoadMoreRootComments,
+        fetchComments // todo: temporary - remove later
       }}
     >
       {children}

packages/web/src/components/comments/CommentSectionDesktop.tsx

@@ -1,13 +1,18 @@
-import { Divider, Flex, Paper, Skeleton } from '@audius/harmony'
+import { Button, Divider, Flex, Paper, Skeleton } from '@audius/harmony'
 
 import { CommentForm } from './CommentForm'
 import { CommentHeader } from './CommentHeader'
 import { useCurrentCommentSection } from './CommentSectionContext'
 import { CommentThread } from './CommentThread'
 
 export const CommentSectionDesktop = () => {
-  const { userId, isLoading, comments, handlePostComment } =
-    useCurrentCommentSection()
+  const {
+    userId,
+    isLoading,
+    comments,
+    handlePostComment,
+    handleLoadMoreRootComments
+  } = useCurrentCommentSection()
   const commentPostAllowed = userId !== null
 
   // Loading state
@@ -50,6 +55,16 @@ export const CommentSectionDesktop = () => {
         ) : null}
         <Flex gap='s' p='xl' w='100%' direction='column'>
           <CommentThread />
+          {/* TODO: this button is temporary; will be replaced with endless scroll */}
+          <Button
+            onClick={() => {
+              handleLoadMoreRootComments()
+            }}
+            size='small'
+            css={{ width: 'max-content', marginTop: '16px' }}
+          >
+            Load more comments
+          </Button>
         </Flex>
       </Paper>
     </Flex>

packages/web/src/components/comments/CommentThread.tsx

@@ -15,11 +15,13 @@ import { useCurrentCommentSection } from './CommentSectionContext'
 
 const messages = {
   noCommentsTitle: 'Nothing here yet',
-  noCommentsSubtitle: 'Be the first to comment on this track' // TODO: make this derive from entity type
+  noCommentsSubtitle: 'Be the first to comment on this track', // TODO: make this derive from entity type
+  showMoreReplies: 'Show More Replies'
 }
 
 export const CommentThread = () => {
-  const { comments, fetchComments } = useCurrentCommentSection()
+  const { comments, fetchComments, handleLoadMoreReplies } =
+    useCurrentCommentSection()
   // TODO: this feels sub-optimal? Maybe fine
   const [hiddenReplies, setHiddenReplies] = useState<{
     [parentCommentId: number]: boolean
@@ -61,20 +63,25 @@ export const CommentThread = () => {
                 {hiddenReplies[rootComment.id] ? 'Show' : 'Hide'} Replies
               </TextLink>
             ) : null}
+            {hiddenReplies[rootComment.id] ||
+            (rootComment?.replies?.length ?? 0) === 0 ? null : (
+              <Flex direction='column' mt='l' gap='l'>
+                {rootComment?.replies?.map((reply) => (
+                  <Flex w='100%' key={reply.id}>
+                    <CommentBlock
+                      comment={reply}
+                      parentCommentId={rootComment.id}
+                      parentCommentIndex={i}
+                    />
+                  </Flex>
+                ))}
+              </Flex>
+            )}
+            {/* TODO: need a way to hide this when no more to load */}
+            <TextLink onClick={() => handleLoadMoreReplies(rootComment.id)}>
+              {messages.showMoreReplies}
+            </TextLink>
           </Flex>
-          {hiddenReplies[rootComment.id] ? null : (
-            <Flex ml='56px' direction='column' mt='l' gap='l'>
-              {rootComment?.replies?.map((reply) => (
-                <Flex w='100%' key={reply.id}>
-                  <CommentBlock
-                    comment={reply}
-                    parentCommentId={rootComment.id}
-                    parentCommentIndex={i}
-                  />
-                </Flex>
-              ))}
-            </Flex>
-          )}
         </Flex>
       ))}
     </Flex>