removed ThreadedItemReply

Signed-off-by: Matt Krick <[email protected]>

packages/client/components/DiscussionThreadInput.tsx

@@ -51,7 +51,6 @@ interface Props {
   getMaxSortOrder: () => number
   discussion: DiscussionThreadInput_discussion$key
   viewer: DiscussionThreadInput_viewer$key
-  threadParentId?: string
   isReply?: boolean
   isDisabled?: boolean
   isCreatingPoll?: boolean
@@ -62,7 +61,6 @@ const DiscussionThreadInput = (props: Props) => {
     allowedThreadables,
     getMaxSortOrder,
     discussion: discussionRef,
-    threadParentId,
     viewer: viewerRef,
     isCreatingPoll
   } = props
@@ -186,6 +184,7 @@ const DiscussionThreadInput = (props: Props) => {
 
   const addComment = (rawContent: string) => {
     submitMutation()
+    const threadParentId = replyingTo?.threadParentId ?? replyingTo?.id
     const comment = {
       content: rawContent,
       isAnonymous: isAnonymousComment,
@@ -234,6 +233,7 @@ const DiscussionThreadInput = (props: Props) => {
 
   const addTask = () => {
     const {viewerId} = atmosphere
+    const threadParentId = replyingTo?.threadParentId ?? replyingTo?.id
     const newTask = {
       status: 'active',
       sortOrder: dndNoise(),

packages/client/components/ThreadedCommentBase.tsx

@@ -14,36 +14,36 @@ import anonymousAvatar from '../styles/theme/images/anonymous-avatar.svg'
 import deletedAvatar from '../styles/theme/images/deleted-avatar-placeholder.svg'
 import {PARABOL_AI_USER_ID} from '../utils/constants'
 import SendClientSideEvent from '../utils/SendClientSideEvent'
+import DiscussionThreadInput from './DiscussionThreadInput'
 import {DiscussionThreadables} from './DiscussionThreadList'
 import {TipTapEditor} from './promptResponse/TipTapEditor'
 import ThreadedAvatarColumn from './ThreadedAvatarColumn'
 import ThreadedCommentFooter from './ThreadedCommentFooter'
 import ThreadedCommentHeader from './ThreadedCommentHeader'
-import ThreadedItemReply from './ThreadedItemReply'
 import ThreadedItemWrapper from './ThreadedItemWrapper'
 
 interface Props {
   allowedThreadables: DiscussionThreadables[]
   comment: ThreadedCommentBase_comment$key
-  children?: ReactNode // the replies, listed here to avoid a circular reference
   discussion: ThreadedCommentBase_discussion$key
-  isReply?: boolean // this comment is a reply & should be indented
-
   viewer: ThreadedCommentBase_viewer$key
+  repliesList?: ReactNode
+  getMaxSortOrder: () => number
 }
 
 const ThreadedCommentBase = (props: Props) => {
   const {
     allowedThreadables,
-    children,
     comment: commentRef,
     discussion: discussionRef,
-    viewer: viewerRef
+    viewer: viewerRef,
+    repliesList,
+    getMaxSortOrder
   } = props
   const viewer = useFragment(
     graphql`
       fragment ThreadedCommentBase_viewer on User {
-        ...ThreadedItemReply_viewer
+        ...DiscussionThreadInput_viewer
         billingTier
       }
     `,
@@ -53,11 +53,13 @@ const ThreadedCommentBase = (props: Props) => {
     graphql`
       fragment ThreadedCommentBase_discussion on Discussion {
         ...DiscussionThreadInput_discussion
-        ...ThreadedItemReply_discussion
         id
         meetingId
         teamId
         discussionTopicId
+        replyingTo {
+          id
+        }
       }
     `,
     discussionRef
@@ -66,7 +68,6 @@ const ThreadedCommentBase = (props: Props) => {
     graphql`
       fragment ThreadedCommentBase_comment on Comment {
         ...ThreadedCommentHeader_comment
-        ...ThreadedItemReply_threadable
         id
         isActive
         content
@@ -80,21 +81,13 @@ const ThreadedCommentBase = (props: Props) => {
           id
           isViewerReactji
         }
-        threadParentId
       }
     `,
     commentRef
   )
-  const isReply = !!props.isReply
-  const {id: discussionId, meetingId, teamId, discussionTopicId} = discussion
-  const {
-    id: commentId,
-    content,
-    createdByUserNullable,
-    isActive,
-    reactjis,
-    threadParentId
-  } = comment
+  const isReply = !repliesList
+  const {id: discussionId, meetingId, teamId, discussionTopicId, replyingTo} = discussion
+  const {id: commentId, content, createdByUserNullable, isActive, reactjis} = comment
   const picture = isActive ? (createdByUserNullable?.picture ?? anonymousAvatar) : deletedAvatar
   const {submitMutation, submitting, onError, onCompleted} = useMutationProps()
   const atmosphere = useAtmosphere()
@@ -143,7 +136,6 @@ const ThreadedCommentBase = (props: Props) => {
     commitLocalUpdate(atmosphere, (store) => {
       const comment = store.get(commentId)
       if (!comment) return
-      comment.setValue(threadParentId, 'threadParentId')
       store
         .getRoot()
         .getLinkedRecord('viewer')
@@ -193,13 +185,16 @@ const ThreadedCommentBase = (props: Props) => {
             onReply={onReply}
           />
         )}
-        {children}
-        <ThreadedItemReply
-          allowedThreadables={allowedThreadables}
-          discussion={discussion}
-          threadable={comment}
-          viewer={viewer}
-        />
+        {repliesList}
+        {replyingTo?.id === comment.id && (
+          <DiscussionThreadInput
+            allowedThreadables={allowedThreadables}
+            isReply
+            getMaxSortOrder={getMaxSortOrder}
+            discussion={discussion}
+            viewer={viewer}
+          />
+        )}
       </div>
     </ThreadedItemWrapper>
   )

packages/client/components/ThreadedItem.tsx

@@ -60,13 +60,17 @@ export const ThreadedItem = (props: Props) => {
         __typename
         replies {
           ...ThreadedRepliesList_replies
+          threadSortOrder
         }
       }
     `,
     threadableRef
   )
   const {__typename, replies} = threadable
-  const child = (
+  const getMaxSortOrder = () => {
+    return replies ? Math.max(0, ...replies.map((reply) => reply.threadSortOrder || 0)) : 0
+  }
+  const repliesList = (
     <ThreadedRepliesList
       allowedThreadables={allowedThreadables}
       discussion={discussion}
@@ -81,9 +85,9 @@ export const ThreadedItem = (props: Props) => {
         task={threadable}
         discussion={discussion}
         viewer={viewer}
-      >
-        {child}
-      </ThreadedTaskBase>
+        repliesList={repliesList}
+        getMaxSortOrder={getMaxSortOrder}
+      />
     )
   }
   if (__typename === 'Poll') {
@@ -101,9 +105,9 @@ export const ThreadedItem = (props: Props) => {
       comment={threadable}
       discussion={discussion}
       viewer={viewer}
-    >
-      {child}
-    </ThreadedCommentBase>
+      repliesList={repliesList}
+      getMaxSortOrder={getMaxSortOrder}
+    />
   )
 }
 

packages/client/components/ThreadedRepliesList.tsx

@@ -46,16 +46,17 @@ const ThreadedRepliesList = (props: Props) => {
         ...ThreadedCommentBase_comment
         __typename
         id
+        threadSortOrder
       }
     `,
     repliesRef
   )
-  // https://sentry.io/organizations/parabol/issues/1569570376/?project=107196&query=is%3Aunresolved
-  // not sure why this is required addComment and createTask but request replies
-  if (!replies) return null
+  const getMaxSortOrder = () => {
+    return replies ? Math.max(0, ...replies.map((reply) => reply.threadSortOrder || 0)) : 0
+  }
   return (
     <>
-      {replies.map((reply) => {
+      {replies?.map((reply) => {
         const {__typename, id} = reply
         return __typename === 'Task' ? (
           <ThreadedTaskBase
@@ -64,15 +65,16 @@ const ThreadedRepliesList = (props: Props) => {
             task={reply}
             discussion={discussion}
             viewer={viewer}
+            getMaxSortOrder={getMaxSortOrder}
           />
         ) : (
           <ThreadedCommentBase
             allowedThreadables={allowedThreadables}
             key={id}
-            isReply
             comment={reply}
             discussion={discussion}
             viewer={viewer}
+            getMaxSortOrder={getMaxSortOrder}
           />
         )
       })}