chore: comment crud in store mutation

web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx

@@ -5,11 +5,19 @@ import { useIssueDetail } from "hooks/store";
 // components
 import { IssueActivityList } from "./activity/activity-list";
 import { IssueCommentCard } from "./comments/comment-card";
+// types
+import { TActivityOperations } from "./root";
 
-type TIssueActivityCommentRoot = { workspaceSlug: string; projectId: string; issueId: string; disabled: boolean };
+type TIssueActivityCommentRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  activityOperations: TActivityOperations;
+  disabled: boolean;
+};
 
 export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled } = props;
+  const { workspaceSlug, projectId, issueId, activityOperations, disabled } = props;
   // hooks
   const {
     activity: { getActivityCommentByIssueId },
@@ -28,6 +36,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
             projectId={projectId}
             issueId={issueId}
             commentId={activityComment.id}
+            activityOperations={activityOperations}
             disabled={disabled}
             ends={index === 0 ? "top" : index === activityComments.length - 1 ? "bottom" : undefined}
           />

web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
+import { Check, Globe2, Lock, Pencil, Trash2, X } from "lucide-react";
 // hooks
 import { useIssueDetail, useMention, useUser } from "hooks/store";
 // components
@@ -101,9 +101,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
                 </>
               )}
               <CustomMenu.MenuItem
-                onClick={() => {
+                onClick={() => activityOperations.removeComment(comment.id)}
-                  activityOperations.removeComment(comment.id);
-                }}
                 className="flex items-center gap-1"
               >
                 <Trash2 className="h-3 w-3" />

web/components/issues/issue-detail/issue-activity/comments/comment-create-update.tsx

@@ -25,7 +25,6 @@ export const IssueCommentCreateUpdate: FC<TIssueCommentCreateUpdate> = (props) =
   const {
     handleSubmit,
     control,
-    watch,
     formState: { isSubmitting },
     reset,
   } = useForm<Partial<TIssueComment>>({ defaultValues: { comment_html: "<p></p>" } });

web/components/issues/issue-detail/issue-activity/root.tsx

@@ -191,7 +191,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
         <div className="min-h-[200px]">
           {activityTab === "all" ? (
             <>
-              <IssueActivityCommentRoot {...componentCommonProps} />
+              <IssueActivityCommentRoot {...componentCommonProps} activityOperations={activityOperations} />
               <IssueCommentCreateUpdate
                 workspaceSlug={workspaceSlug}
                 activityOperations={activityOperations}

web/store/issue/issue-details/activity.store.ts

@@ -3,7 +3,7 @@ import set from "lodash/set";
 import sortBy from "lodash/sortBy";
 import update from "lodash/update";
 import concat from "lodash/concat";
-import merge from "lodash/merge";
+import uniq from "lodash/uniq";
 // services
 import { IssueActivityService } from "services/issue";
 // types
@@ -122,7 +122,7 @@ export class IssueActivityStore implements IIssueActivityStore {
       runInAction(() => {
         update(this.activities, issueId, (_activityIds) => {
           if (!_activityIds) return activityIds;
-          return merge(_activityIds, activityIds);
+          return uniq(concat(_activityIds, activityIds));
         });
         activities.forEach((activity) => {
           set(this.activityMap, activity.id, activity);

web/store/issue/issue-details/comment.store.ts

@@ -2,7 +2,8 @@ import { action, makeObservable, observable, runInAction } from "mobx";
 import set from "lodash/set";
 import update from "lodash/update";
 import concat from "lodash/concat";
-import merge from "lodash/merge";
+import uniq from "lodash/uniq";
+import pull from "lodash/pull";
 // services
 import { IssueCommentService } from "services/issue";
 // types
@@ -97,7 +98,7 @@ export class IssueCommentStore implements IIssueCommentStore {
       runInAction(() => {
         update(this.comments, issueId, (_commentIds) => {
           if (!_commentIds) return commentIds;
-          return merge(_commentIds, commentIds);
+          return uniq(concat(_commentIds, commentIds));
         });
         comments.forEach((comment) => {
           set(this.commentMap, comment.id, comment);
@@ -116,8 +117,11 @@ export class IssueCommentStore implements IIssueCommentStore {
       const response = await this.issueCommentService.createIssueComment(workspaceSlug, projectId, issueId, data);
 
       runInAction(() => {
-        this.comments[issueId].push(response.id);
+        update(this.comments, issueId, (_commentIds) => {
-        set(this.rootIssueDetail.activity.activityMap, response.id, response);
+          if (!_commentIds) return [response.id];
+          return uniq(concat(_commentIds, [response.id]));
+        });
+        set(this.commentMap, response.id, response);
       });
 
       return response;
@@ -159,12 +163,10 @@ export class IssueCommentStore implements IIssueCommentStore {
     try {
       const response = await this.issueCommentService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId);
 
-      const reactionIndex = this.comments[issueId].findIndex((_comment) => _comment === commentId);
+      runInAction(() => {
-      if (reactionIndex >= 0)
+        pull(this.comments[issueId], commentId);
-        runInAction(() => {
+        delete this.commentMap[commentId];
-          this.comments[issueId].splice(reactionIndex, 1);
+      });
-          delete this.commentMap[commentId];
-        });
 
       return response;
     } catch (error) {

web/store/issue/issue-details/issue.store.ts

@@ -95,8 +95,16 @@ export class IssueStore implements IIssueStore {
     }
   };
 
-  updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) =>
+  updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
-    this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
+    const issue = await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(
+      workspaceSlug,
+      projectId,
+      issueId,
+      data
+    );
+    await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return issue;
+  };
 
   removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
     this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);

web/store/issue/issue-details/reaction.store.ts

@@ -126,6 +126,8 @@ export class IssueReactionStore implements IIssueReactionStore {
         set(this.reactionMap, response.id, response);
       });
 
+      // fetching activity
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
       return response;
     } catch (error) {
       throw error;
@@ -152,6 +154,8 @@ export class IssueReactionStore implements IIssueReactionStore {
 
       const response = await this.issueReactionService.deleteIssueReaction(workspaceSlug, projectId, issueId, reaction);
 
+      // fetching activity
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
       return response;
     } catch (error) {
       throw error;

web/store/issue/issue-details/relation.store.ts

@@ -124,6 +124,8 @@ export class IssueRelationStore implements IIssueRelationStore {
           });
         });
 
+      // fetching activity
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
       return response;
     } catch (error) {
       throw error;
@@ -149,6 +151,8 @@ export class IssueRelationStore implements IIssueRelationStore {
         related_issue,
       });
 
+      // fetching activity
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
       return response;
     } catch (error) {
       this.fetchRelations(workspaceSlug, projectId, issueId);