fix: commenting fixes

apps/space/components/issues/peek-overview/comment-detail-card.tsx

@@ -21,43 +21,29 @@ type Props = {
 export const CommentCard: React.FC<Props> = observer((props) => {
   const { comment, workspaceSlug } = props;
   // store
-  const { user: userStore, issue: issueStore, issueDetails: issueDetailStore } = useMobxStore();
+  const { user: userStore, issueDetails: issueDetailStore } = useMobxStore();
   // states
   const [isEditing, setIsEditing] = useState(false);
 
   const {
     formState: { isSubmitting },
     handleSubmit,
-    setFocus,
     control,
   } = useForm<any>({
     defaultValues: { comment_html: comment.comment_html },
   });
 
-  const handleDelete = async () => {
+  const handleDelete = () => {
     if (!workspaceSlug || !issueDetailStore.peekId) return;
-
+    issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
-    await issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
   };
 
   const handleCommentUpdate = async (formData: Comment) => {
     if (!workspaceSlug || !issueDetailStore.peekId) return;
-
+    issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
-    console.log("formData", formData);
-    const response = await issueDetailStore.updateIssueComment(
-      workspaceSlug,
-      comment.project,
-      issueDetailStore.peekId,
-      comment.id,
-      formData
-    );
     setIsEditing(false);
   };
 
-  useEffect(() => {
-    isEditing && setFocus("comment_html");
-  }, [isEditing, setFocus]);
-
   return (
     <div className="relative flex items-start space-x-3">
       <div className="relative px-1">
@@ -133,6 +119,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
+            {comment.comment_html}
             <TipTapEditor
               workspaceSlug={workspaceSlug.toString()}
               value={comment.comment_html}
@@ -185,9 +172,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                   <div className="py-1">
                     <button
                       type="button"
-                      onClick={() => {
+                      onClick={handleDelete}
-                        handleDelete();
-                      }}
                       className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
                         active ? "bg-custom-background-80" : ""
                       }`}

apps/space/components/issues/peek-overview/header.tsx

@@ -64,7 +64,7 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {
       <div className="flex justify-between items-center">
         <div className="flex items-center gap-4">
           {issueDetailStore.peekMode === "side" && (
-            <button type="button" onClick={handleClose}>
+            <button type="button" onClick={handleClose} autoFocus={false}>
               <East
                 sx={{
                   fontSize: "14px",

apps/space/components/issues/peek-overview/issue-activity.tsx

@@ -20,7 +20,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
 
   const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
 
-  console.log("comments", comments);
+  console.log("issueDetailStore", issueDetailStore);
 
   return (
     <div>

apps/space/components/tiptap/index.tsx

@@ -1,9 +1,10 @@
+import { useImperativeHandle, useRef, forwardRef, useEffect } from "react";
 import { useEditor, EditorContent, Editor } from "@tiptap/react";
 import { useDebouncedCallback } from "use-debounce";
+// components
 import { EditorBubbleMenu } from "./bubble-menu";
 import { TiptapExtensions } from "./extensions";
 import { TiptapEditorProps } from "./props";
-import { useImperativeHandle, useRef, forwardRef } from "react";
 import { ImageResizer } from "./extensions/image-resize";
 
 export interface ITipTapRichTextEditor {
@@ -36,7 +37,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
     borderOnFocus,
     customClassName,
   } = props;
-
+  console.log("tiptap_value", value);
   const editor = useEditor({
     editable: editable ?? true,
     editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
@@ -54,6 +55,12 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
     },
   });
 
+  useEffect(() => {
+    if (editor) {
+      editor.commands.setContent(value);
+    }
+  }, [value]);
+
   const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
 
   useImperativeHandle(forwardedRef, () => ({
@@ -75,8 +82,8 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
 
   const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
       ${noBorder ? "" : "border border-custom-border-200"} ${
-        borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-      } ${customClassName}`;
+  } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;

apps/space/store/issue_details.ts

@@ -137,11 +137,10 @@ class IssueDetailStore implements IssueDetailStore {
         commentId,
         data
       );
-      //   const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
 
       if (issueCommentUpdateResponse) {
+        const remainingComments = this.details[issueId].comments.filter((com) => com.id != commentId);
         runInAction(() => {
-          const remainingComments = this.details[issueId].comments.filter((com) => com.id === commentId);
           this.details = {
             ...this.details,
             [issueId]: {
@@ -159,25 +158,17 @@ class IssueDetailStore implements IssueDetailStore {
 
   deleteIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, comment_id: string) => {
     try {
-      const issueVoteResponse = await this.issueService.deleteIssueComment(
+      await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, comment_id);
-        workspaceSlug,
+      const remainingComments = this.details[issueId].comments.filter((c) => c.id != comment_id);
-        projectId,
+      runInAction(() => {
-        issueId,
+        this.details = {
-        comment_id
+          ...this.details,
-      );
+          [issueId]: {
-      const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+            ...this.details[issueId],
-
+            comments: remainingComments,
-      if (issueVoteResponse) {
+          },
-        runInAction(() => {
+        };
-          this.details = {
+      });
-            ...this.details,
-            [issueId]: {
-              ...this.details[issueId],
-              comments: issueComments,
-            },
-          };
-        });
-      }
     } catch (error) {
       console.log("Failed to add issue vote");
     }