Adds a state to disable reply button when editing

OxfordRSE · Jan 16, 2024 · 95931bc · 95931bc
1 parent 8d756e1
commit 95931bc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/components/content/Comment.tsx b/components/content/Comment.tsx
@@ -13,6 +13,7 @@ import { TinyButton } from "./Thread"
 import deleteCommentAction from "lib/actions/deleteComment"
 import useUser from "lib/hooks/useUser"
 import { useRecoilState, atom } from "recoil"
+import { set } from "cypress/types/lodash"
 
 export const textAreaValue = atom({
   key: "textAreaValue",
@@ -25,9 +26,19 @@ interface Props {
   deleteComment: (comment: Comment) => void
   saveComment?: (placeholder: Comment) => void
   isPlaceholder?: boolean
+  threadEditing?: boolean
+  setThreadEditing?: (editing: boolean) => void
 }
 
-const CommentView = ({ comment, mutateComment, deleteComment, isPlaceholder, saveComment }: Props) => {
+const CommentView = ({
+  comment,
+  mutateComment,
+  deleteComment,
+  isPlaceholder,
+  saveComment,
+  threadEditing,
+  setThreadEditing,
+}: Props) => {
   const { control, handleSubmit, reset, watch } = useForm<Comment>()
   const { userProfile, isLoading, error } = useProfile()
   const [editing, setEditing] = useState(comment.markdown === "")
@@ -47,16 +58,19 @@ const CommentView = ({ comment, mutateComment, deleteComment, isPlaceholder, sav
       mutateComment(comment)
     })
     setEditing(false)
+    setThreadEditing && setThreadEditing(false)
   }
 
   const onSubmitPlaceholder = (data: Comment) => {
     if (!saveComment) return
     saveComment(data)
     setEditing(false)
+    setThreadEditing && setThreadEditing(false)
   }
 
   const onEdit = () => {
     setEditing(true)
+    setThreadEditing && setThreadEditing(true)
   }
 
   const onDelete = () => {

diff --git a/components/content/Thread.tsx b/components/content/Thread.tsx
@@ -89,6 +89,7 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
   const { user, isLoading: userIsLoading, error: userError } = useUser(commentThread?.createdByEmail)
   const { userProfile, isLoading: profileLoading, error: profileError } = useProfile()
   const [activeEvent, setActiveEvent] = useActiveEvent()
+  const [threadEditing, setThreadEditing] = useState(false)
   const {
     event: eventData,
     error: eventError,
@@ -261,6 +262,8 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
                   saveComment={savePlaceholder}
                   deleteComment={deleteComment}
                   isPlaceholder={true}
+                  threadEditing={threadEditing}
+                  setThreadEditing={setThreadEditing}
                 />
               </RecoilRoot>
             ))}
@@ -273,6 +276,8 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
                   mutateComment={mutateComment}
                   deleteComment={deleteComment}
                   isPlaceholder={false}
+                  threadEditing={threadEditing}
+                  setThreadEditing={setThreadEditing}
                 />
               </RecoilRoot>
             ))}
@@ -289,12 +294,13 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
                   </TinyButton>
                 </Tooltip>
               )}
-
-              <Tooltip content="Reply in Thread" placement="top">
-                <TinyButton onClick={handleReply}>
-                  <BiReply className="h-4 w-4" data-cy={`Thread:${threadId}:Reply`} />
-                </TinyButton>
-              </Tooltip>
+              {!threadEditing && (
+                <Tooltip content="Reply in Thread" placement="top">
+                  <TinyButton onClick={handleReply}>
+                    <BiReply className="h-4 w-4" data-cy={`Thread:${threadId}:Reply`} />
+                  </TinyButton>
+                </Tooltip>
+              )}
             </Stack>
           )}
         </div>