chore: issue comment reaction workflow and mutation update (#2537)

web/components/issues/issue-peek-overview/activity/card.tsx

@@ -12,6 +12,7 @@ import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/d
 interface IssueActivityCard {
   workspaceSlug: string;
   projectId: string;
+  issueId: string;
   user: any;
   issueComments: any;
   issueCommentUpdate: (comment: any) => void;
@@ -24,6 +25,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
   const {
     workspaceSlug,
     projectId,
+    issueId,
     user,
     issueComments,
     issueCommentUpdate,
@@ -118,6 +120,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
                 <IssueCommentCard
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
+                  issueId={issueId}
                   user={user}
                   comment={activityItem}
                   onSubmit={issueCommentUpdate}

web/components/issues/issue-peek-overview/activity/comment-card.tsx

@@ -23,6 +23,7 @@ type IIssueCommentCard = {
   showAccessSpecifier?: boolean;
   workspaceSlug: string;
   projectId: string;
+  issueId: string;
   user: any;
   issueCommentReactionCreate: (commentId: string, reaction: string) => void;
   issueCommentReactionRemove: (commentId: string, reaction: string) => void;
@@ -36,6 +37,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
     showAccessSpecifier = false,
     workspaceSlug,
     projectId,
+    issueId,
     user,
     issueCommentReactionCreate,
     issueCommentReactionRemove,
@@ -157,6 +159,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
               <IssueCommentReaction
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
+                issueId={issueId}
                 user={user}
                 comment={comment}
                 issueCommentReactionCreate={issueCommentReactionCreate}

web/components/issues/issue-peek-overview/activity/comment-reaction.tsx

@@ -9,8 +9,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 interface IIssueCommentReaction {
-  workspaceSlug: any;
+  workspaceSlug: string;
-  projectId: any;
+  projectId: string;
+  issueId: string;
   user: any;
 
   comment: any;
@@ -19,7 +20,8 @@ interface IIssueCommentReaction {
 }
 
 export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props) => {
-  const { workspaceSlug, projectId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } = props;
+  const { workspaceSlug, projectId, issueId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } =
+    props;
 
   const { issueDetail: issueDetailStore }: RootStore = useMobxStore();
 
@@ -32,15 +34,18 @@ export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props)
   };
 
   useSWR(
-    workspaceSlug && projectId && comment && comment?.id ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}` : null,
+    workspaceSlug && projectId && issueId && comment && comment?.id
+      ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}`
+      : null,
     () => {
-      if (workspaceSlug && projectId && comment && comment.id) {
+      if (workspaceSlug && projectId && issueId && comment && comment.id) {
-        issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, comment?.id);
+        issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, issueId, comment?.id);
       }
     }
   );
 
-  const issueReactions = issueDetailStore?.getIssueCommentReactionsByCommentId(comment.id) || [];
+  let issueReactions = issueDetailStore?.getIssueCommentReactions || null;
+  issueReactions = issueReactions && comment.id ? issueReactions?.[comment.id] : [];
 
   return (
     <div>

web/components/issues/issue-peek-overview/activity/view.tsx

@@ -6,6 +6,7 @@ import { IssueCommentEditor } from "./comment-editor";
 interface IIssueComment {
   workspaceSlug: string;
   projectId: string;
+  issueId: string;
   user: any;
   issueComments: any;
   issueCommentCreate: (comment: any) => void;
@@ -19,6 +20,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
   const {
     workspaceSlug,
     projectId,
+    issueId,
     user,
     issueComments,
     issueCommentCreate,
@@ -46,6 +48,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
         <IssueActivityCard
           workspaceSlug={workspaceSlug}
           projectId={projectId}
+          issueId={issueId}
           user={user}
           issueComments={issueComments}
           issueCommentUpdate={issueCommentUpdate}

web/components/issues/issue-peek-overview/reactions/root.tsx

@@ -15,7 +15,7 @@ export const IssueReaction: FC<IIssueReaction> = (props) => {
 
   const handleReaction = (reaction: string) => {
     const isReactionAvailable =
-      issueReactions[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
+      issueReactions?.[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
 
     if (isReactionAvailable) issueReactionRemove(reaction);
     else issueReactionCreate(reaction);

web/components/issues/issue-peek-overview/root.tsx

@@ -50,10 +50,10 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
 
   const issueCommentReactionCreate = (commentId: string, reaction: string) =>
-    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
+    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
 
   const issueCommentReactionRemove = (commentId: string, reaction: string) =>
-    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
+    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
 
   return (
     <IssueView

web/components/issues/issue-peek-overview/view.tsx

@@ -215,6 +215,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                       <IssueComment
                         workspaceSlug={workspaceSlug}
                         projectId={projectId}
+                        issueId={issueId}
                         user={user}
                         issueComments={issueComments}
                         issueCommentCreate={issueCommentCreate}
@@ -242,6 +243,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         <IssueComment
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
+                          issueId={issueId}
                           user={user}
                           issueComments={issueComments}
                           issueCommentCreate={issueCommentCreate}

web/store/issue/issue_detail.store.ts

@@ -22,7 +22,9 @@ export interface IIssueDetailStore {
     [issueId: string]: any;
   };
   issue_comment_reactions: {
-    [issueId: string]: any;
+    [issueId: string]: {
+      [comment_id: string]: any;
+    };
   };
 
   setPeekId: (issueId: string | null) => void;
@@ -31,7 +33,7 @@ export interface IIssueDetailStore {
   getIssue: IIssue | null;
   getIssueReactions: any | null;
   getIssueComments: any | null;
-  getIssueCommentReactionsByCommentId: any | null;
+  getIssueCommentReactions: any | null;
 
   // fetch issue details
   fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
@@ -59,16 +61,23 @@ export interface IIssueDetailStore {
   ) => Promise<void>;
   removeIssueComment: (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => Promise<void>;
 
-  fetchIssueCommentReactions: (workspaceSlug: string, projectId: string, commentId: string) => Promise<void>;
+  fetchIssueCommentReactions: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string
+  ) => Promise<void>;
   creationIssueCommentReaction: (
     workspaceSlug: string,
     projectId: string,
+    issueId: string,
     commentId: string,
     reaction: string
   ) => Promise<void>;
   removeIssueCommentReaction: (
     workspaceSlug: string,
     projectId: string,
+    issueId: string,
     commentId: string,
     reaction: string
   ) => Promise<void>;
@@ -114,11 +123,10 @@ export class IssueDetailStore implements IIssueDetailStore {
       getIssue: computed,
       getIssueReactions: computed,
       getIssueComments: computed,
+      getIssueCommentReactions: computed,
 
       setPeekId: action,
 
-      getIssueCommentReactionsByCommentId: action,
-
       fetchIssueDetails: action,
       createIssue: action,
       updateIssue: action,
@@ -164,11 +172,11 @@ export class IssueDetailStore implements IIssueDetailStore {
     return _comments || null;
   }
 
-  getIssueCommentReactionsByCommentId = (commentId: string) => {
+  get getIssueCommentReactions() {
-    if (!commentId) return null;
+    if (!this.peekId) return null;
-    const _reactions = this.issue_comment_reactions[commentId];
+    const _commentReactions = this.issue_comment_reactions[this.peekId];
-    return _reactions || null;
+    return _commentReactions || null;
-  };
+  }
 
   setPeekId = (issueId: string | null) => (this.peekId = issueId);
 
@@ -513,13 +521,16 @@ export class IssueDetailStore implements IIssueDetailStore {
   };
 
   // comment reaction
-  fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, commentId: string) => {
+  fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
     try {
       const _reactions = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
 
       const _issue_comment_reactions = {
         ...this.issue_comment_reactions,
+        [issueId]: {
+          ...this.issue_comment_reactions[issueId],
           [commentId]: groupReactionEmojis(_reactions),
+        },
       };
 
       runInAction(() => {
@@ -533,10 +544,12 @@ export class IssueDetailStore implements IIssueDetailStore {
   creationIssueCommentReaction = async (
     workspaceSlug: string,
     projectId: string,
+    issueId: string,
     commentId: string,
     reaction: string
   ) => {
-    let _currentReactions = this.getIssueCommentReactionsByCommentId(commentId);
+    let _currentReactions = this.getIssueCommentReactions;
+    _currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
 
     try {
       const _reaction = await this.issueReactionService.createIssueCommentReaction(
@@ -550,14 +563,19 @@ export class IssueDetailStore implements IIssueDetailStore {
 
       _currentReactions = {
         ..._currentReactions,
-        [reaction]: [..._currentReactions[reaction], { ..._reaction }],
+        [reaction]: [..._currentReactions?.[reaction], { ..._reaction }],
+      };
+
+      const _issue_comment_reactions = {
+        ...this.issue_comment_reactions,
+        [issueId]: {
+          ...this.issue_comment_reactions[issueId],
+          [commentId]: _currentReactions,
+        },
       };
 
       runInAction(() => {
-        this.issue_comment_reactions = {
+        this.issue_comment_reactions = _issue_comment_reactions;
-          ...this.issue_comment_reactions,
-          [commentId]: _currentReactions,
-        };
       });
     } catch (error) {
       console.warn("error removing the issue comment", error);
@@ -567,10 +585,12 @@ export class IssueDetailStore implements IIssueDetailStore {
   removeIssueCommentReaction = async (
     workspaceSlug: string,
     projectId: string,
+    issueId: string,
     commentId: string,
     reaction: string
   ) => {
-    let _currentReactions = this.getIssueCommentReactionsByCommentId(commentId);
+    let _currentReactions = this.getIssueCommentReactions;
+    _currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
 
     try {
       const user = this.rootStore.user.currentUser;
@@ -578,14 +598,19 @@ export class IssueDetailStore implements IIssueDetailStore {
       if (user) {
         _currentReactions = {
           ..._currentReactions,
-          [reaction]: [..._currentReactions[reaction].filter((r: any) => r.actor !== user.id)],
+          [reaction]: [..._currentReactions?.[reaction].filter((r: any) => r.actor !== user.id)],
+        };
+
+        const _issue_comment_reactions = {
+          ...this.issue_comment_reactions,
+          [issueId]: {
+            ...this.issue_comment_reactions[issueId],
+            [commentId]: _currentReactions,
+          },
         };
 
         runInAction(() => {
-          this.issue_comment_reactions = {
+          this.issue_comment_reactions = _issue_comment_reactions;
-            ...this.issue_comment_reactions,
-            [commentId]: _currentReactions,
-          };
         });
 
         await this.issueReactionService.deleteIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);