chore: address merge conflict

packages/components/src/CommentList/CommentList.stories.tsx

@@ -58,6 +58,56 @@ export const WithNestedComments: StoryFn<typeof CommentList> = () => {
   )
 }
 
+export const WithNestedCommentsAndReplies: StoryFn<typeof CommentList> = () => {
+  const comments = [
+    fakeComment({
+      replies: [fakeComment(), fakeComment()],
+    }),
+    fakeComment(),
+    fakeComment(),
+  ]
+
+  return (
+    <CommentList
+      supportReplies={true}
+      comments={comments}
+      setCommentBeingRepliedTo={() => {}}
+      handleDelete={() => Promise.resolve()}
+      handleEditRequest={() => Promise.resolve()}
+      handleEdit={() => Promise.resolve()}
+      onMoreComments={() => Promise.resolve()}
+    />
+  )
+}
+
+export const WithNestedCommentsAndRepliesMaxDepthTwo: StoryFn<
+  typeof CommentList
+> = () => {
+  const comments = [
+    fakeComment({
+      replies: [
+        fakeComment({
+          replies: [fakeComment()],
+        }),
+      ],
+    }),
+  ]
+
+  return (
+    <CommentList
+      supportReplies={true}
+      currentDepth={0}
+      maxDepth={2}
+      comments={comments}
+      setCommentBeingRepliedTo={() => {}}
+      handleDelete={() => Promise.resolve()}
+      handleEditRequest={() => Promise.resolve()}
+      handleEdit={() => Promise.resolve()}
+      onMoreComments={() => Promise.resolve()}
+    />
+  )
+}
+
 const highlightedCommentList = createFakeComments(20, { isEditable: false })
 
 export const Highlighted: StoryFn<typeof CommentList> = () => (

packages/components/src/CommentList/CommentList.test.tsx

@@ -119,4 +119,33 @@ describe('CommentList', () => {
       getAllByText(`1 reply to ${visibleReply.creatorName}`),
     ).toThrow()
   })
+
+  it('does not show reply once max depth is reached', () => {
+    const mockComments = [
+      fakeComment({
+        replies: [
+          fakeComment({
+            replies: [fakeComment()],
+          }),
+        ],
+      }),
+    ]
+
+    const screen = render(
+      <CommentList
+        currentDepth={0}
+        maxDepth={2}
+        supportReplies={true}
+        comments={mockComments}
+        replyForm={() => <></>}
+        setCommentBeingRepliedTo={() => {}}
+        handleEdit={mockHandleEdit}
+        handleEditRequest={mockHandleEditRequest}
+        handleDelete={mockHandleDelete}
+        onMoreComments={mockOnMoreComments}
+      />,
+    )
+
+    expect(screen.getAllByText('reply')).toHaveLength(2)
+  })
 })

packages/components/src/DiscussionContainer/DiscussionContainer.stories.tsx

@@ -21,16 +21,26 @@ export const Default: Story = {
   render: () => {
     return (
       <DiscussionContainer
+<<<<<<< HEAD
         comment={''}
+=======
+>>>>>>> production
         comments={fakeComments}
         handleDelete={() => Promise.resolve()}
         handleEditRequest={() => Promise.resolve()}
         handleEdit={() => Promise.resolve()}
         maxLength={1000}
+<<<<<<< HEAD
         onChange={() => null}
         onMoreComments={() => null}
         onSubmit={() => null}
         onSubmitReply={() => Promise.resolve()}
+=======
+        comment={''}
+        onChange={() => null}
+        onMoreComments={() => null}
+        onSubmit={() => null}
+>>>>>>> production
         isLoggedIn={false}
       />
     )
@@ -50,7 +60,10 @@ export const NoComments: Story = {
         onChange={() => null}
         onMoreComments={() => null}
         onSubmit={() => null}
+<<<<<<< HEAD
         onSubmitReply={() => Promise.resolve()}
+=======
+>>>>>>> production
         isLoggedIn={false}
       />
     )
@@ -72,7 +85,10 @@ export const LoggedIn: Story = {
         onChange={setComment}
         onMoreComments={() => null}
         onSubmit={() => null}
+<<<<<<< HEAD
         onSubmitReply={() => Promise.resolve()}
+=======
+>>>>>>> production
         isLoggedIn={true}
       />
     )
@@ -94,7 +110,10 @@ export const Expandable: Story = {
         onChange={setComment}
         onMoreComments={() => null}
         onSubmit={() => null}
+<<<<<<< HEAD
         onSubmitReply={() => Promise.resolve()}
+=======
+>>>>>>> production
         isLoggedIn={true}
       />
     )
@@ -106,6 +125,10 @@ export const WithReplies: Story = {
     const [comment, setComment] = useState<string>('')
 
     const fakeComments = createFakeComments(3)
+<<<<<<< HEAD
+=======
+
+>>>>>>> production
     fakeComments[0].replies = createFakeComments(2)
 
     return (

packages/components/src/DiscussionContainer/DiscussionContainer.test.tsx

@@ -12,6 +12,7 @@ describe('DiscussionContainer', () => {
     expect(getByText('Leave a comment')).toBeInTheDocument()
 
     expect(() => getByText('reply')).toThrow()
+<<<<<<< HEAD
   })
 
   it('allows replying to a comment', async () => {
@@ -58,5 +59,95 @@ describe('DiscussionContainer', () => {
         screen.getAllByText('Send your reply')
       }).toThrow()
     })
+=======
+>>>>>>> production
   })
+
+  it('allows replying to a comment', async () => {
+    const screen = render(<WithReplies.render />)
+
+    const replyButton = screen.getAllByText('reply')[0]
+    expect(replyButton).toBeInTheDocument()
+
+    // Show reply form
+    await act(async () => {
+      await fireEvent.click(replyButton)
+      expect(screen.getAllByText('Send your reply')).toHaveLength(1)
+    })
+
+    // Hide reply form
+    await act(async () => {
+      await fireEvent.click(replyButton)
+      expect(() => {
+        screen.getAllByText('Send your reply')
+      }).toThrow()
+    })
+
+    const SecondReplyButton = screen.getAllByText('reply')[2]
+    expect(SecondReplyButton).toBeInTheDocument()
+
+    // Show reply form
+    await act(async () => {
+      await fireEvent.click(SecondReplyButton)
+      expect(screen.getAllByText('Send your reply')).toHaveLength(1)
+    })
+
+    // Hide reply form
+    await act(async () => {
+      await fireEvent.click(SecondReplyButton)
+      expect(() => {
+        screen.getAllByText('Send your reply')
+      }).toThrow()
+    })
+  })
+
+  it('does not show the reply form more than once', async () => {
+    const screen = render(<WithReplies.render />)
+
+    const replyButton = screen.getAllByText('reply')[0]
+    expect(replyButton).toBeInTheDocument()
+
+    // Show first reply form
+    await act(async () => {
+      await fireEvent.click(replyButton)
+      expect(screen.getAllByText('Send your reply')).toHaveLength(1)
+    })
+
+    const SecondReplyButton = screen.getAllByText('reply')[2]
+    expect(SecondReplyButton).toBeInTheDocument()
+
+    // Show second reply form
+    await act(async () => {
+      await fireEvent.click(SecondReplyButton)
+      expect(screen.getAllByText('Send your reply')).toHaveLength(1)
+    })
+  })
+
+  it.todo('allows replying to a comment', async () => {
+    // const handleSubmitReply: any = vi.fn()
+    // const screen = render(
+    //   <WithReplies.render
+    //     {...WithReplies.args}
+    //     onSubmitReply={handleSubmitReply}
+    //   />,
+    // )
+    // const replyButton = screen.getAllByText('reply')[0]
+    // expect(replyButton).toBeInTheDocument()
+    // // Show reply form
+    // await act(async () => {
+    //   await fireEvent.click(replyButton)
+    //   expect(screen.getAllByText('Send your reply')).toHaveLength(1)
+    //   const textarea = screen.getAllByPlaceholderText(
+    //     'Leave your questions or feedback...',
+    //   )[0]
+    //   await fireEvent.change(textarea, { target: { value: 'New comment' } })
+    //   await fireEvent.click(screen.getByText('Send your reply'))
+    //   expect(handleSubmitReply).toHaveBeenCalled()
+    // })
+  })
+
+  it.todo(
+    'adding a reply to a comment does not affect the primary create comment form',
+    async () => {},
+  )
 })

packages/components/src/DiscussionContainer/DiscussionContainer.tsx

@@ -1,7 +1,13 @@
 import { useMemo, useState } from 'react'
+<<<<<<< HEAD
 import { Flex } from 'theme-ui'
 
 import { CommentList, CreateComment, DiscussionTitle } from '..'
+=======
+import { Box, Flex } from 'theme-ui'
+
+import { CommentList, CreateComment, DiscussionTitle } from '../'
+>>>>>>> production
 import { transformToTree } from './transformToStructuredComments'
 
 import type { IComment } from '..'
@@ -18,7 +24,12 @@ export interface IProps {
   onChange: (comment: string) => void
   onMoreComments: () => void
   onSubmit: (comment: string) => void
+<<<<<<< HEAD
   onSubmitReply: (_id: string, reply: string) => Promise<void>
+=======
+  onSubmitReply?: (_id: string, comment: string) => Promise<void>
+  isLoggedIn: boolean
+>>>>>>> production
   supportReplies?: boolean
 }
 
@@ -47,6 +58,40 @@ export const DiscussionContainer = (props: IProps) => {
     [comments],
   )
 
+<<<<<<< HEAD
+=======
+  const reployForm = (commentId: string) => {
+    if (commentId !== commentBeingRepliedTo) {
+      return <></>
+    }
+
+    return (
+      <Box
+        sx={{
+          background: 'softblue',
+          borderRadius: 2,
+          padding: 3,
+          mt: 3,
+        }}
+      >
+        <CreateComment
+          maxLength={maxLength}
+          comment={comment}
+          onChange={onChange}
+          onSubmit={() => {
+            if (commentId && onSubmitReply) {
+              onSubmitReply(commentId, comment)
+            }
+            setCommentBeingRepliedTo(null)
+          }}
+          buttonLabel="Send your reply"
+          isLoggedIn={isLoggedIn}
+        />
+      </Box>
+    )
+  }
+
+>>>>>>> production
   const handleSetCommentBeingRepliedTo = (commentId: string | null): void => {
     if (commentId === commentBeingRepliedTo) {
       return setCommentBeingRepliedTo(null)
@@ -59,7 +104,14 @@ export const DiscussionContainer = (props: IProps) => {
       <DiscussionTitle length={comments.length} />
 
       <CommentList
+<<<<<<< HEAD
+        supportReplies={supportReplies}
+=======
+        currentDepth={0}
+        maxDepth={1}
         supportReplies={supportReplies}
+        replyForm={reployForm}
+>>>>>>> production
         comments={structuredComments}
         handleDelete={handleDelete}
         handleEdit={handleEdit}
@@ -68,7 +120,10 @@ export const DiscussionContainer = (props: IProps) => {
         isLoggedIn={isLoggedIn}
         maxLength={maxLength}
         onMoreComments={onMoreComments}
+<<<<<<< HEAD
         onSubmitReply={onSubmitReply}
+=======
+>>>>>>> production
         setCommentBeingRepliedTo={handleSetCommentBeingRepliedTo}
       />