refactor: issue peek overview (#3001)

* refactor: peek overview components

* fix: issue reactions

* chore: update comment types

* fix: access sepcifier value

* chore: remove unused vars

* fix: build errors

* build-error: build error resolved

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: gurusainath <gurusainath007@gmail.com>

web/components/inbox/issue-activity.tsx

@@ -10,7 +10,7 @@ import { IssueService, IssueCommentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import { IIssue, IIssueComment } from "types";
+import { IIssue, IIssueActivity } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
@@ -41,7 +41,7 @@ export const InboxIssueActivity: React.FC<Props> = observer(({ issueDetails }) =
 
   const user = userStore.currentUser;
 
-  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
+  const handleCommentUpdate = async (commentId: string, data: Partial<any>) => {
     if (!workspaceSlug || !projectId || !issueDetails.id || !user) return;
 
     await issueCommentService
@@ -86,7 +86,7 @@ export const InboxIssueActivity: React.FC<Props> = observer(({ issueDetails }) =
       });
   };
 
-  const handleAddComment = async (formData: IIssueComment) => {
+  const handleAddComment = async (formData: IIssueActivity) => {
     if (!workspaceSlug || !issueDetails || !user) return;
 
     await issueCommentService

web/components/inbox/main-content.tsx

@@ -37,13 +37,10 @@ export const InboxMainContent: React.FC = observer(() => {
   const {
     inboxIssues: inboxIssuesStore,
     inboxIssueDetails: inboxIssueDetailsStore,
-    user: userStore,
+    user: { currentUser, currentProjectRole },
     projectState: { states },
   } = useMobxStore();
 
-  const user = userStore.currentUser;
-  const userRole = userStore.currentProjectRole;
-
   const { reset, control, watch } = useForm<IIssue>({
     defaultValues,
   });
@@ -156,7 +153,7 @@ export const InboxMainContent: React.FC = observer(() => {
       </div>
     );
 
-  const isAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
+  const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>
@@ -249,12 +246,17 @@ export const InboxMainContent: React.FC = observer(() => {
                   id: issueDetails.id,
                 }}
                 handleFormSubmit={submitChanges}
-                isAllowed={isAllowed || user?.id === issueDetails.created_by}
+                isAllowed={isAllowed || currentUser?.id === issueDetails.created_by}
               />
             </div>
 
-            <IssueReaction projectId={projectId} workspaceSlug={workspaceSlug} issueId={issueDetails.id} />
+            {workspaceSlug && projectId && (
-
+              <IssueReaction
+                workspaceSlug={workspaceSlug.toString()}
+                projectId={projectId.toString()}
+                issueId={issueDetails.id}
+              />
+            )}
             <InboxIssueActivity issueDetails={issueDetails} />
           </div>
 

web/components/issues/activity.tsx

@@ -11,12 +11,12 @@ import { Loader, Tooltip } from "@plane/ui";
 // helpers
 import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
 // types
-import { IIssueActivity, IIssueComment } from "types";
+import { IIssueActivity } from "types";
 import { History } from "lucide-react";
 
 type Props = {
   activity: IIssueActivity[] | undefined;
-  handleCommentUpdate: (commentId: string, data: Partial<IIssueComment>) => Promise<void>;
+  handleCommentUpdate: (commentId: string, data: Partial<IIssueActivity>) => Promise<void>;
   handleCommentDelete: (commentId: string) => Promise<void>;
   showAccessSpecifier?: boolean;
 };
@@ -130,7 +130,7 @@ export const IssueActivitySection: React.FC<Props> = ({
             return (
               <div key={activityItem.id} className="mt-4">
                 <CommentCard
-                  comment={activityItem as IIssueComment}
+                  comment={activityItem as IIssueActivity}
                   handleCommentDeletion={handleCommentDelete}
                   onSubmit={handleCommentUpdate}
                   showAccessSpecifier={showAccessSpecifier}

web/components/issues/comment/add-comment.tsx

@@ -11,17 +11,17 @@ import { Button } from "@plane/ui";
 import { Globe2, Lock } from "lucide-react";
 
 // types
-import type { IIssueComment } from "types";
+import type { IIssueActivity } from "types";
 import useEditorSuggestions from "hooks/use-editor-suggestions";
 
-const defaultValues: Partial<IIssueComment> = {
+const defaultValues: Partial<IIssueActivity> = {
   access: "INTERNAL",
   comment_html: "",
 };
 
 type Props = {
   disabled?: boolean;
-  onSubmit: (data: IIssueComment) => Promise<void>;
+  onSubmit: (data: IIssueActivity) => Promise<void>;
   showAccessSpecifier?: boolean;
 };
 
@@ -59,9 +59,9 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
     formState: { isSubmitting },
     handleSubmit,
     reset,
-  } = useForm<IIssueComment>({ defaultValues });
+  } = useForm<IIssueActivity>({ defaultValues });
 
-  const handleAddComment = async (formData: IIssueComment) => {
+  const handleAddComment = async (formData: IIssueActivity) => {
     if (!formData.comment_html || isSubmitting) return;
 
     await onSubmit(formData).then(() => {
@@ -96,7 +96,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
                     onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
                     commentAccessSpecifier={
                       showAccessSpecifier
-                        ? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
+                        ? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess }
                         : undefined
                     }
                     mentionSuggestions={editorSuggestions.mentionSuggestions}

web/components/issues/comment/comment-card.tsx

@@ -14,16 +14,16 @@ import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-te
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
-import type { IIssueComment } from "types";
+import type { IIssueActivity } from "types";
 import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 // services
 const fileService = new FileService();
 
 type Props = {
-  comment: IIssueComment;
+  comment: IIssueActivity;
   handleCommentDeletion: (comment: string) => void;
-  onSubmit: (commentId: string, data: Partial<IIssueComment>) => void;
+  onSubmit: (commentId: string, data: Partial<IIssueActivity>) => void;
   showAccessSpecifier?: boolean;
   workspaceSlug: string;
 };
@@ -50,11 +50,11 @@ export const CommentCard: React.FC<Props> = ({
     setFocus,
     watch,
     setValue,
-  } = useForm<IIssueComment>({
+  } = useForm<IIssueActivity>({
     defaultValues: comment,
   });
 
-  const onEnter = (formData: Partial<IIssueComment>) => {
+  const onEnter = (formData: Partial<IIssueActivity>) => {
     if (isSubmitting) return;
     setIsEditing(false);
 
@@ -110,13 +110,10 @@ export const CommentCard: React.FC<Props> = ({
                 deleteFile={fileService.deleteImage}
                 restoreFile={fileService.restoreImage}
                 ref={editorRef}
-                value={watch("comment_html")}
+                value={watch("comment_html") ?? ""}
                 debouncedUpdatesEnabled={false}
                 customClassName="min-h-[50px] p-3 shadow-sm"
-                onChange={(comment_json: Object, comment_html: string) => {
+                onChange={(comment_json: Object, comment_html: string) => setValue("comment_html", comment_html)}
-                  setValue("comment_json", comment_json);
-                  setValue("comment_html", comment_html);
-                }}
                 mentionSuggestions={editorSuggestions.mentionSuggestions}
                 mentionHighlights={editorSuggestions.mentionHighlights}
               />
@@ -147,7 +144,7 @@ export const CommentCard: React.FC<Props> = ({
             )}
             <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
-              value={comment.comment_html}
+              value={comment.comment_html ?? ""}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
               mentionHighlights={editorSuggestions.mentionHighlights}
             />

web/components/issues/draft-issue-modal.tsx

@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import { IssueService, IssueDraftService } from "services/issue";
+import { IssueService } from "services/issue";
 import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";

web/components/issues/index.ts

@@ -7,7 +7,7 @@ export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./form";
 export * from "./issue-layouts";
-export * from "./issue-peek-overview";
+export * from "./peek-overview";
 export * from "./main-content";
 export * from "./modal";
 export * from "./parent-issues-list-modal";

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -31,9 +31,9 @@ interface IBaseCalendarRoot {
   calendarViewStore: IIssueCalendarViewStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
-    [EIssueActions.DELETE]: (issue: IIssue) => void;
+    [EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: IIssue) => void;
+    [EIssueActions.UPDATE]?: (issue: IIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: IIssue) => void;
+    [EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
   };
   viewId?: string;
   handleDragDrop: (source: any, destination: any, issues: any, issueWithIds: any) => void;
@@ -64,9 +64,9 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   };
 
   const handleIssues = useCallback(
-    (date: string, issue: IIssue, action: EIssueActions) => {
+    async (date: string, issue: IIssue, action: EIssueActions) => {
       if (issueActions[action]) {
-        issueActions[action]!(issue);
+        await issueActions[action]!(issue);
       }
     },
     [issueActions]
@@ -108,8 +108,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={(issueToUpdate) =>
+          handleIssue={async (issueToUpdate) =>
-            handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, EIssueActions.UPDATE)
+            await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, EIssueActions.UPDATE)
           }
         />
       )}

web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx

@@ -14,46 +14,50 @@ export const CycleCalendarLayout: React.FC = observer(() => {
     cycleIssues: cycleIssueStore,
     cycleIssuesFilter: cycleIssueFilterStore,
     cycleIssueCalendarView: cycleIssueCalendarViewStore,
-    calendarHelpers: calendarHelperStore,
+    calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query as {
+  const { workspaceSlug, projectId, cycleId } = router.query;
-    workspaceSlug: string;
-    projectId: string;
-    cycleId: string;
-  };
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
-      cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+      await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
-      cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+      await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
-      if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
+      if (!workspaceSlug || !cycleId || !projectId || !issue.bridge_id) return;
-      cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+      await cycleIssueStore.removeIssueFromCycle(
+        workspaceSlug.toString(),
+        issue.project,
+        cycleId.toString(),
+        issue.id,
+        issue.bridge_id
+      );
     },
   };
 
   const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
-    if (calendarHelperStore.handleDragDrop)
+    if (workspaceSlug && projectId && cycleId)
-      calendarHelperStore.handleDragDrop(
+      handleCalenderDragDrop(
         source,
         destination,
-        workspaceSlug,
+        workspaceSlug.toString(),
-        projectId,
+        projectId.toString(),
         cycleIssueStore,
         issues,
         issueWithIds,
-        cycleId
+        cycleId.toString()
       );
   };
 
+  if (!cycleId) return null;
+
   return (
     <BaseCalendarRoot
       issueStore={cycleIssueStore}
@@ -61,7 +65,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
       calendarViewStore={cycleIssueCalendarViewStore}
       QuickActions={CycleIssueQuickActions}
       issueActions={issueActions}
-      viewId={cycleId}
+      viewId={cycleId.toString()}
       handleDragDrop={handleDragDrop}
     />
   );

web/components/issues/issue-layouts/calendar/roots/module-root.tsx

@@ -14,7 +14,7 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
     moduleIssues: moduleIssueStore,
     moduleIssuesFilter: moduleIssueFilterStore,
     moduleIssueCalendarView: moduleIssueCalendarViewStore,
-    calendarHelpers: calendarHelperStore,
+    calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
   const router = useRouter();
@@ -25,32 +25,31 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
   };
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (issue: IIssue) => {
+    [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
-      moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
+      await moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
     },
-    [EIssueActions.DELETE]: (issue: IIssue) => {
+    [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
-      moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+      await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
     },
-    [EIssueActions.REMOVE]: (issue: IIssue) => {
+    [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
-      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+      await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
     },
   };
 
   const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
-    if (calendarHelperStore.handleDragDrop)
+    handleCalenderDragDrop(
-      calendarHelperStore.handleDragDrop(
+      source,
-        source,
+      destination,
-        destination,
+      workspaceSlug,
-        workspaceSlug,
+      projectId,
-        projectId,
+      moduleIssueStore,
-        moduleIssueStore,
+      issues,
-        issues,
+      issueWithIds,
-        issueWithIds,
+      moduleId
-        moduleId
+    );
-      );
   };
 
   return (

web/components/issues/issue-layouts/calendar/roots/project-root.tsx

@@ -10,35 +10,35 @@ import { useRouter } from "next/router";
 
 export const CalendarLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   const {
     projectIssues: issueStore,
     issueCalendarView: issueCalendarViewStore,
     projectIssuesFilter: projectIssueFiltersStore,
-    calendarHelpers: calendarHelperStore,
+    calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+      await issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
+      await issueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
     },
   };
 
   const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
-    if (calendarHelperStore.handleDragDrop)
+    if (workspaceSlug && projectId)
-      calendarHelperStore.handleDragDrop(
+      handleCalenderDragDrop(
         source,
         destination,
-        workspaceSlug,
+        workspaceSlug.toString(),
-        projectId,
+        projectId.toString(),
         issueStore,
         issues,
         issueWithIds

web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx

@@ -14,32 +14,32 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
     viewIssues: projectViewIssuesStore,
     viewIssuesFilter: projectIssueViewFiltersStore,
     projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
-    calendarHelpers: calendarHelperStore,
+    calendarHelpers: { handleDragDrop: handleCalenderDragDrop },
   } = useMobxStore();
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   const issueActions = {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      projectViewIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
+      await projectViewIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      projectViewIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
+      await projectViewIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
     },
   };
 
   const handleDragDrop = (source: any, destination: any, issues: IIssue[], issueWithIds: any) => {
-    if (calendarHelperStore.handleDragDrop)
+    if (workspaceSlug && projectId)
-      calendarHelperStore.handleDragDrop(
+      handleCalenderDragDrop(
         source,
         destination,
-        workspaceSlug,
+        workspaceSlug.toString(),
-        projectId,
+        projectId.toString(),
         projectViewIssuesStore,
         issues,
         issueWithIds

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@@ -26,7 +25,6 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
     projectState: projectStateStore,
     projectMember: { projectMembers },
     projectViews: projectViewsStore,
-    projectViewFilters: projectViewFiltersStore,
     viewIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
 

web/components/issues/issue-layouts/gantt/base-gantt-root.tsx

@@ -54,11 +54,11 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
 
   const issues = issueIds.map((id) => issuesResponse?.[id]);
 
-  const updateIssue = (issue: IIssue, payload: IBlockUpdateData) => {
+  const updateIssue = async (issue: IIssue, payload: IBlockUpdateData) => {
     if (!workspaceSlug) return;
 
     //Todo fix sort order in the structure
-    issueStore.updateIssue(
+    await issueStore.updateIssue(
       workspaceSlug.toString(),
       issue.project,
       issue.id,
@@ -101,9 +101,9 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={(issueToUpdate) => {
+          handleIssue={async (issueToUpdate) => {
             // TODO: update the logic here
-            updateIssue(issueToUpdate as IIssue, {});
+            await updateIssue(issueToUpdate as IIssue, {});
           }}
         />
       )}

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -52,9 +52,9 @@ export interface IBaseKanBanLayout {
   kanbanViewStore: IIssueKanBanViewStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
-    [EIssueActions.DELETE]: (issue: IIssue) => void;
+    [EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: IIssue) => void;
+    [EIssueActions.UPDATE]?: (issue: IIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: IIssue) => void;
+    [EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
   };
   showLoader?: boolean;
   viewId?: string;
@@ -169,7 +169,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const handleIssues = useCallback(
     async (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => {
       if (issueActions[action]) {
-        issueActions[action]!(issue);
+        await issueActions[action]!(issue);
       }
     },
     [issueActions]
@@ -345,8 +345,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={(issueToUpdate) =>
+          handleIssue={async (issueToUpdate) =>
-            handleIssues(sub_group_by, group_by, issueToUpdate as IIssue, EIssueActions.UPDATE)
+            await handleIssues(sub_group_by, group_by, issueToUpdate as IIssue, EIssueActions.UPDATE)
           }
         />
       )}

web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx

@@ -17,11 +17,7 @@ export interface ICycleKanBanLayout {}
 
 export const CycleKanBanLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query as {
+  const { workspaceSlug, projectId, cycleId } = router.query;
-    workspaceSlug: string;
-    projectId: string;
-    cycleId: string;
-  };
 
   // store
   const {
@@ -35,15 +31,23 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
 
-      cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+      await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
-      cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+
+      await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
-      cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+
+      await cycleIssueStore.removeIssueFromCycle(
+        workspaceSlug.toString(),
+        issue.project,
+        cycleId.toString(),
+        issue.id,
+        issue.bridge_id
+      );
     },
   };
 
@@ -55,18 +59,18 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     issues: IIssueResponse | undefined,
     issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
   ) => {
-    if (kanBanHelperStore.handleDragDrop)
+    if (workspaceSlug && projectId && cycleId)
       return await kanBanHelperStore.handleDragDrop(
         source,
         destination,
-        workspaceSlug,
+        workspaceSlug.toString(),
-        projectId,
+        projectId.toString(),
         cycleIssueStore,
         subGroupBy,
         groupBy,
         issues,
         issueWithIds,
-        cycleId
+        cycleId.toString()
       );
   };
 
@@ -78,10 +82,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
       kanbanViewStore={cycleIssueKanBanViewStore}
       showLoader={true}
       QuickActions={CycleIssueQuickActions}
-      viewId={cycleId}
+      viewId={cycleId?.toString() ?? ""}
       currentStore={EProjectStore.CYCLE}
       handleDragDrop={handleDragDrop}
-      addIssuesToView={(issues: string[]) => cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, issues)}
+      addIssuesToView={(issues: string[]) =>
+        cycleIssueStore.addIssueToCycle(workspaceSlug?.toString() ?? "", cycleId?.toString() ?? "", issues)
+      }
     />
   );
 });

web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx

@@ -14,7 +14,7 @@ export interface IKanBanLayout {}
 
 export const DraftKanBanLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string };
+  const { workspaceSlug } = router.query;
 
   const {
     projectDraftIssues: issueStore,
@@ -26,12 +26,12 @@ export const DraftKanBanLayout: React.FC = observer(() => {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
+      await issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug) return;
 
-      await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
+      await issueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
     },
   };
 

web/components/issues/issue-layouts/kanban/roots/module-root.tsx

@@ -17,11 +17,7 @@ export interface IModuleKanBanLayout {}
 
 export const ModuleKanBanLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query as {
+  const { workspaceSlug, projectId, moduleId } = router.query;
-    workspaceSlug: string;
-    projectId: string;
-    moduleId: string;
-  };
 
   // store
   const {
@@ -35,15 +31,23 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
     [EIssueActions.UPDATE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
 
-      moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId);
+      await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId.toString());
     },
     [EIssueActions.DELETE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
-      moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+
+      await moduleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, moduleId.toString());
     },
     [EIssueActions.REMOVE]: async (issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
-      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+
+      await moduleIssueStore.removeIssueFromModule(
+        workspaceSlug.toString(),
+        issue.project,
+        moduleId.toString(),
+        issue.id,
+        issue.bridge_id
+      );
     },
   };
 
@@ -55,18 +59,18 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
     issues: IIssueResponse | undefined,
     issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
   ) => {
-    if (kanBanHelperStore.handleDragDrop)
+    if (workspaceSlug && projectId && moduleId)
       return await kanBanHelperStore.handleDragDrop(
         source,
         destination,
-        workspaceSlug,
+        workspaceSlug.toString(),
-        projectId,
+        projectId.toString(),
         moduleIssueStore,
         subGroupBy,
         groupBy,
         issues,
         issueWithIds,
-        moduleId
+        moduleId.toString()
       );
   };
   return (
@@ -77,10 +81,12 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
       kanbanViewStore={moduleIssueKanBanViewStore}
       showLoader={true}
       QuickActions={ModuleIssueQuickActions}
-      viewId={moduleId}
+      viewId={moduleId?.toString() ?? ""}
       currentStore={EProjectStore.MODULE}
       handleDragDrop={handleDragDrop}
-      addIssuesToView={(issues: string[]) => moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, issues)}
+      addIssuesToView={(issues: string[]) =>
+        moduleIssueStore.addIssueToModule(workspaceSlug?.toString() ?? "", moduleId?.toString() ?? "", issues)
+      }
     />
   );
 });

web/components/issues/issue-layouts/kanban/roots/project-root.tsx

@@ -45,20 +45,18 @@ export const KanBanLayout: React.FC = observer(() => {
     groupBy: string | null,
     issues: IIssueResponse | undefined,
     issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
-  ) => {
+  ) =>
-    if (kanBanHelperStore.handleDragDrop)
+    await kanBanHelperStore.handleDragDrop(
-      return await kanBanHelperStore.handleDragDrop(
+      source,
-        source,
+      destination,
-        destination,
+      workspaceSlug,
-        workspaceSlug,
+      projectId,
-        projectId,
+      issueStore,
-        issueStore,
+      subGroupBy,
-        subGroupBy,
+      groupBy,
-        groupBy,
+      issues,
-        issues,
+      issueWithIds
-        issueWithIds
+    );
-      );
-  };
 
   return (
     <BaseKanBanRoot

web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx

@@ -45,20 +45,18 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
     groupBy: string | null,
     issues: IIssueResponse | undefined,
     issueWithIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined
-  ) => {
+  ) =>
-    if (kanBanHelperStore.handleDragDrop)
+    await kanBanHelperStore.handleDragDrop(
-      return await kanBanHelperStore.handleDragDrop(
+      source,
-        source,
+      destination,
-        destination,
+      workspaceSlug,
-        workspaceSlug,
+      projectId,
-        projectId,
+      projectViewIssuesStore,
-        projectViewIssuesStore,
+      subGroupBy,
-        subGroupBy,
+      groupBy,
-        groupBy,
+      issues,
-        issues,
+      issueWithIds
-        issueWithIds
+    );
-      );
-  };
 
   return (
     <BaseKanBanRoot

web/components/issues/issue-layouts/list/base-list-root.tsx

@@ -50,9 +50,9 @@ interface IBaseListRoot {
     | IProfileIssuesStore;
   QuickActions: FC<IQuickActionProps>;
   issueActions: {
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => void;
+    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (group_by: string | null, issue: IIssue) => void;
+    [EIssueActions.UPDATE]?: (group_by: string | null, issue: IIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (group_by: string | null, issue: IIssue) => void;
+    [EIssueActions.REMOVE]?: (group_by: string | null, issue: IIssue) => Promise<void>;
   };
   getProjects: (projectStore: IProjectStore) => IProject[] | null;
   viewId?: string;
@@ -105,7 +105,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   const members = projectMembers?.map((m) => m.member) ?? null;
   const handleIssues = async (issue: IIssue, action: EIssueActions) => {
     if (issueActions[action]) {
-      issueActions[action]!(group_by, issue);
+      await issueActions[action]!(group_by, issue);
     }
   };
 
@@ -160,7 +160,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={(issueToUpdate) => handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
+          handleIssue={async (issueToUpdate) => await handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
         />
       )}
     </>

web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx

@@ -21,10 +21,10 @@ export const ArchivedIssueListLayout: FC = observer(() => {
     useMobxStore();
 
   const issueActions = {
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
 
-      archivedIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
+      await archivedIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
     },
   };
 

web/components/issues/issue-layouts/list/roots/cycle-root.tsx

@@ -22,17 +22,20 @@ export const CycleListLayout: React.FC = observer(() => {
   const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
-      cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
+
+      await cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
     },
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !cycleId) return;
-      cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
+
+      await cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
     },
-    [EIssueActions.REMOVE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.REMOVE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
-      cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
+
+      await cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
     },
   };
   const getProjects = (projectStore: IProjectStore) => {

web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx

@@ -23,13 +23,15 @@ export const DraftIssueListLayout: FC = observer(() => {
   const { projectDraftIssuesFilter: projectIssuesFilterStore, projectDraftIssues: projectIssuesStore } = useMobxStore();
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
-      projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
+
+      await projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
     },
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
-      projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
+
+      await projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
     },
   };
 

web/components/issues/issue-layouts/list/roots/module-root.tsx

@@ -22,17 +22,20 @@ export const ModuleListLayout: React.FC = observer(() => {
   const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
-      moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
+
+      await moduleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, moduleId);
     },
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !moduleId) return;
-      moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
+
+      await moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
     },
-    [EIssueActions.REMOVE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.REMOVE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
-      moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
+
+      await moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
     },
   };
 

web/components/issues/issue-layouts/list/roots/project-root.tsx

@@ -23,13 +23,15 @@ export const ListLayout: FC = observer(() => {
   const { projectIssuesFilter: projectIssuesFilterStore, projectIssues: projectIssuesStore } = useMobxStore();
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
-      projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
+
+      await projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
     },
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
-      projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
+
+      await projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
     },
   };
 

web/components/issues/issue-layouts/list/roots/project-view-root.tsx

@@ -26,13 +26,15 @@ export const ProjectViewListLayout: React.FC = observer(() => {
   if (!workspaceSlug || !projectId) return null;
 
   const issueActions = {
-    [EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
-      projectViewIssueStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
+
+      await projectViewIssueStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
     },
-    [EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
+    [EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
       if (!workspaceSlug || !projectId) return;
-      projectViewIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
+
+      await projectViewIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
     },
   };
 

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -21,8 +21,8 @@ type Props = {
   members?: IUserLite[] | undefined;
   labels?: IIssueLabel[] | undefined;
   states?: IState[] | undefined;
-  quickActions: (issue: IIssue,customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: IIssue, customActionButton: any) => React.ReactNode; // TODO: replace any with type
-  handleIssues: (issue: IIssue, action: EIssueActions) => void;
+  handleIssues: (issue: IIssue, action: EIssueActions) => Promise<void>;
   openIssuesListModal?: (() => void) | null;
   quickAddCallback?: (
     workspaceSlug: string,
@@ -189,7 +189,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug.toString()}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={(issueToUpdate: any) => handleIssues(issueToUpdate, EIssueActions.UPDATE)}
+          handleIssue={async (issueToUpdate: any) => await handleIssues(issueToUpdate, EIssueActions.UPDATE)}
         />
       )}
     </div>

web/components/issues/issue-peek-overview/index.ts

@@ -1 +0,0 @@
-export * from "./root";

web/components/issues/issue-reaction.tsx

@@ -1,22 +1,25 @@
 // hooks
-import useUserAuth from "hooks/use-user-auth";
 import useIssueReaction from "hooks/use-issue-reaction";
 // components
 import { ReactionSelector } from "components/core";
 // string helpers
 import { renderEmoji } from "helpers/emoji.helper";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // types
 type Props = {
-  workspaceSlug?: string | string[];
+  workspaceSlug: string;
-  projectId?: string | string[];
+  projectId: string;
-  issueId?: string | string[];
+  issueId: string;
 };
 
-export const IssueReaction: React.FC<Props> = (props) => {
+export const IssueReaction: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issueId } = props;
 
-  const { user } = useUserAuth();
+  const {
+    user: { currentUser },
+  } = useMobxStore();
 
   const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
     workspaceSlug,
@@ -27,7 +30,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
   const handleReactionClick = (reaction: string) => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
-    const isSelected = reactions?.some((r) => r.actor === user?.id && r.reaction === reaction);
+    const isSelected = reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction);
 
     if (isSelected) {
       handleReactionDelete(reaction);
@@ -41,7 +44,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
       <ReactionSelector
         size="md"
         position="top"
-        value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []}
+        value={reactions?.filter((reaction) => reaction.actor === currentUser?.id).map((r) => r.reaction) || []}
         onSelect={handleReactionClick}
       />
 
@@ -56,7 +59,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
               }}
               key={reaction}
               className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
-                reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction)
                   ? "bg-custom-primary-100/10"
                   : "bg-custom-background-80"
               }`}
@@ -64,7 +67,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
               <span>{renderEmoji(reaction)}</span>
               <span
                 className={
-                  reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                  reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction)
                     ? "text-custom-primary-100"
                     : ""
                 }
@@ -76,4 +79,4 @@ export const IssueReaction: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+});

web/components/issues/main-content.tsx

@@ -24,9 +24,10 @@ import { SubIssuesRoot } from "./sub-issues";
 // ui
 import { CustomMenu, LayersIcon, StateGroupIcon } from "@plane/ui";
 // types
-import { IIssue, IIssueComment } from "types";
+import { IIssue, IIssueActivity } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
+// constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
@@ -41,24 +42,22 @@ const issueCommentService = new IssueCommentService();
 
 export const IssueMainContent: React.FC<Props> = observer((props) => {
   const { issueDetails, submitChanges, uneditable = false } = props;
-
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
-
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
-
+  // toast alert
   const { setToastAlert } = useToast();
-
+  // mobx store
   const {
-    user: userStore,
+    user: { currentUser, currentProjectRole },
     project: projectStore,
     projectState: { states },
     trackEvent: { postHogEventTracker },
     workspace: { currentWorkspace }
   } = useMobxStore();
-  const user = userStore.currentUser ?? undefined;
+
-  const userRole = userStore.currentProjectRole;
   const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined;
   const currentIssueState = projectId
     ? states[projectId.toString()]?.find((s) => s.id === issueDetails.state)
@@ -67,7 +66,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
   const { data: siblingIssues } = useSWR(
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
-      ? () => issueService.subIssues(workspaceSlug as string, projectId as string, issueDetails.parent ?? "")
+      ? () => issueService.subIssues(workspaceSlug.toString(), projectId.toString(), issueDetails.parent ?? "")
       : null
   );
   const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
@@ -79,7 +78,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       : null
   );
 
-  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
+  const handleCommentUpdate = async (commentId: string, data: Partial<IIssueActivity>) => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
     await issueCommentService
@@ -103,7 +102,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
   };
 
   const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !issueId || !user) return;
+    if (!workspaceSlug || !projectId || !issueId || !currentUser) return;
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
@@ -126,8 +125,8 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       );
   };
 
-  const handleAddComment = async (formData: IIssueComment) => {
+  const handleAddComment = async (formData: IIssueActivity) => {
-    if (!workspaceSlug || !issueDetails || !user) return;
+    if (!workspaceSlug || !issueDetails || !currentUser) return;
 
     await issueCommentService
       .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData)
@@ -155,7 +154,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
       );
   };
 
-  const isAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
+  const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>
@@ -238,10 +237,16 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           isAllowed={isAllowed || !uneditable}
         />
 
-        <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
+        {workspaceSlug && projectId && (
+          <IssueReaction
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            issueId={issueDetails.id}
+          />
+        )}
 
         <div className="mt-2 space-y-2">
-          <SubIssuesRoot parentIssue={issueDetails} user={user} />
+          <SubIssuesRoot parentIssue={issueDetails} user={currentUser ?? undefined} />
         </div>
       </div>
       <div className="flex flex-col gap-3 py-3">

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

@@ -2,32 +2,34 @@ import { FC } from "react";
 import Link from "next/link";
 import { History } from "lucide-react";
 // packages
-import { Tooltip } from "@plane/ui";
+import { Loader, Tooltip } from "@plane/ui";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { IssueCommentCard } from "./comment-card";
 // helpers
 import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
+// types
+import { IIssueActivity, IUser } from "types";
 
-interface IssueActivityCard {
+interface IIssueActivityCard {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
-  user: any;
+  user: IUser | null;
-  issueComments: any;
+  issueActivity: IIssueActivity[] | null;
   issueCommentUpdate: (comment: any) => void;
   issueCommentRemove: (commentId: string) => void;
   issueCommentReactionCreate: (commentId: string, reaction: string) => void;
   issueCommentReactionRemove: (commentId: string, reaction: string) => void;
 }
 
-export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
+export const IssueActivityCard: FC<IIssueActivityCard> = (props) => {
   const {
     workspaceSlug,
     projectId,
     issueId,
     user,
-    issueComments,
+    issueActivity,
     issueCommentUpdate,
     issueCommentRemove,
     issueCommentReactionCreate,
@@ -37,9 +39,9 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
-        {issueComments &&
+        {issueActivity ? (
-          issueComments.length > 0 &&
+          issueActivity.length > 0 &&
-          issueComments.map((activityItem: any, index: any) => {
+          issueActivity.map((activityItem, index) => {
             // determines what type of action is performed
             const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
 
@@ -47,7 +49,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
               return (
                 <li key={activityItem.id}>
                   <div className="relative pb-1">
-                    {issueComments.length > 1 && index !== issueComments.length - 1 ? (
+                    {issueActivity.length > 1 && index !== issueActivity.length - 1 ? (
                       <span
                         className="absolute top-5 left-5 -ml-[1.5px] h-full w-0.5 bg-custom-background-100"
                         aria-hidden="true"
@@ -114,7 +116,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
                   </div>
                 </li>
               );
-            } else if ("comment_json" in activityItem)
+            } else if ("comment_html" in activityItem)
               return (
                 <div key={activityItem.id} className="mt-4">
                   <IssueCommentCard
@@ -131,7 +133,15 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
                   />
                 </div>
               );
-          })}
+          })
+        ) : (
+          <Loader className="space-y-3 mb-3">
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+          </Loader>
+        )}
       </ul>
     </div>
   );

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

@@ -12,20 +12,20 @@ import { IssueCommentReaction } from "./comment-reaction";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
-import type { IIssueComment } from "types";
+import type { IIssueActivity, IUser } from "types";
 
 // services
 const fileService = new FileService();
 
 type IIssueCommentCard = {
-  comment: IIssueComment;
+  comment: IIssueActivity;
   handleCommentDeletion: (comment: string) => void;
-  onSubmit: (data: Partial<IIssueComment>) => void;
+  onSubmit: (data: Partial<IIssueActivity>) => void;
   showAccessSpecifier?: boolean;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
-  user: any;
+  user: IUser | null;
   issueCommentReactionCreate: (commentId: string, reaction: string) => void;
   issueCommentReactionRemove: (commentId: string, reaction: string) => void;
 };
@@ -57,11 +57,11 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
     setFocus,
     watch,
     setValue,
-  } = useForm<IIssueComment>({
+  } = useForm<IIssueActivity>({
     defaultValues: comment,
   });
 
-  const formSubmit = (formData: Partial<IIssueComment>) => {
+  const formSubmit = (formData: Partial<IIssueActivity>) => {
     if (isSubmitting) return;
 
     setIsEditing(false);
@@ -119,13 +119,10 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
                 deleteFile={fileService.deleteImage}
                 restoreFile={fileService.restoreImage}
                 ref={editorRef}
-                value={watch("comment_html")}
+                value={watch("comment_html") ?? ""}
                 debouncedUpdatesEnabled={false}
                 customClassName="min-h-[50px] p-3 shadow-sm"
-                onChange={(comment_json: Object, comment_html: string) => {
+                onChange={(comment_json: Object, comment_html: string) => setValue("comment_html", comment_html)}
-                  setValue("comment_json", comment_json);
-                  setValue("comment_html", comment_html);
-                }}
                 mentionSuggestions={editorSuggestions.mentionSuggestions}
                 mentionHighlights={editorSuggestions.mentionHighlights}
               />
@@ -158,7 +155,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
             )}
             <LiteReadOnlyEditorWithRef
               ref={showEditorRef}
-              value={comment.comment_html}
+              value={comment.comment_html ?? ""}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
               mentionHighlights={editorSuggestions.mentionHighlights}
             />

web/components/issues/peek-overview/activity/comment-editor.tsx

@@ -11,16 +11,16 @@ import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // ui
 import { Button } from "@plane/ui";
 // types
-import type { IIssueComment } from "types";
+import type { IIssueActivity } from "types";
 
-const defaultValues: Partial<IIssueComment> = {
+const defaultValues: Partial<IIssueActivity> = {
   access: "INTERNAL",
   comment_html: "",
 };
 
 type IIssueCommentEditor = {
   disabled?: boolean;
-  onSubmit: (data: IIssueComment) => Promise<void>;
+  onSubmit: (data: IIssueActivity) => Promise<void>;
   showAccessSpecifier?: boolean;
 };
 
@@ -60,9 +60,9 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
     formState: { isSubmitting },
     handleSubmit,
     reset,
-  } = useForm<IIssueComment>({ defaultValues });
+  } = useForm<IIssueActivity>({ defaultValues });
 
-  const handleAddComment = async (formData: IIssueComment) => {
+  const handleAddComment = async (formData: IIssueActivity) => {
     if (!formData.comment_html || isSubmitting) return;
 
     await onSubmit(formData).then(() => {
@@ -99,7 +99,7 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
                     onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
                     commentAccessSpecifier={
                       showAccessSpecifier
-                        ? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
+                        ? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess }
                         : undefined
                     }
                     submitButton={

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

@@ -2,7 +2,7 @@ import { FC } from "react";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // components
-import { IssueReaction } from "../reactions";
+import { IssuePeekOverviewReactions } from "components/issues";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";
 // types
@@ -49,7 +49,7 @@ export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props)
 
   return (
     <div>
-      <IssueReaction
+      <IssuePeekOverviewReactions
         issueReactions={issueReactions}
         user={user}
         issueReactionCreate={handleCommentReactionCreate}

web/components/issues/peek-overview/activity/index.ts

@@ -1,5 +1,5 @@
-export * from "./view";
-
 export * from "./card";
+export * from "./comment-card";
 export * from "./comment-editor";
 export * from "./comment-reaction";
+export * from "./view";

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

@@ -1,29 +1,30 @@
 import { FC } from "react";
 // components
-import { IssueActivityCard } from "./card";
+import { IssueActivityCard, IssueCommentEditor } from "components/issues";
-import { IssueCommentEditor } from "./comment-editor";
+// types
+import { IIssueActivity, IUser } from "types";
 
-interface IIssueComment {
+type Props = {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
-  user: any;
+  user: IUser | null;
-  issueComments: any;
+  issueActivity: IIssueActivity[] | null;
   issueCommentCreate: (comment: any) => void;
   issueCommentUpdate: (comment: any) => void;
   issueCommentRemove: (commentId: string) => void;
   issueCommentReactionCreate: (commentId: string, reaction: string) => void;
   issueCommentReactionRemove: (commentId: string, reaction: string) => void;
   showCommentAccessSpecifier: boolean;
-}
+};
 
-export const IssueComment: FC<IIssueComment> = (props) => {
+export const IssueActivity: FC<Props> = (props) => {
   const {
     workspaceSlug,
     projectId,
     issueId,
     user,
-    issueComments,
+    issueActivity,
     issueCommentCreate,
     issueCommentUpdate,
     issueCommentRemove,
@@ -47,7 +48,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
           projectId={projectId}
           issueId={issueId}
           user={user}
-          issueComments={issueComments}
+          issueActivity={issueActivity}
           issueCommentUpdate={issueCommentUpdate}
           issueCommentRemove={issueCommentRemove}
           issueCommentReactionCreate={issueCommentReactionCreate}

web/components/issues/peek-overview/index.ts

@@ -0,0 +1,6 @@
+export * from "./activity";
+export * from "./reactions";
+export * from "./issue-detail";
+export * from "./properties";
+export * from "./root";
+export * from "./view";

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

@@ -1,19 +1,22 @@
 import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import debounce from "lodash/debounce";
 // packages
 import { RichTextEditor } from "@plane/rich-text-editor";
-// components
+// mobx store
-import { TextArea } from "@plane/ui";
+import { useMobxStore } from "lib/mobx/store-provider";
-import { IssueReaction } from "./reactions";
 // hooks
-import debounce from "lodash/debounce";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 import useEditorSuggestions from "hooks/use-editor-suggestions";
+// components
+import { IssuePeekOverviewReactions } from "components/issues";
+// ui
+import { TextArea } from "@plane/ui";
 // types
-import { IIssue } from "types";
+import { IIssue, IUser } from "types";
 // services
 import { FileService } from "services/file.service";
-import { useMobxStore } from "lib/mobx/store-provider";
+// constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 
 const fileService = new FileService();
@@ -22,7 +25,7 @@ interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
   issue: IIssue;
   issueReactions: any;
-  user: any;
+  user: IUser | null;
   issueUpdate: (issue: Partial<IIssue>) => void;
   issueReactionCreate: (reaction: string) => void;
   issueReactionRemove: (reaction: string) => void;
@@ -89,7 +92,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
       setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
       setLocalTitleValue(issue.name);
     }
-  }, [issue.id]);
+  }, [issue.id, issue.description_html, issue.name]);
 
   const debouncedFormSave = debounce(async () => {
     handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
@@ -104,7 +107,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
     } else if (isSubmitting === "submitting") {
       setShowAlert(true);
     }
-  }, [isSubmitting, setShowAlert]);
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
 
   // reset form values
   useEffect(() => {
@@ -165,7 +168,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
         <Controller
           name="description_html"
           control={control}
-          render={({ field: { value, onChange } }) => (
+          render={({ field: { onChange } }) => (
             <RichTextEditor
               cancelUploadImage={fileService.cancelUpload}
               uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
@@ -190,7 +193,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
           )}
         />
       </div>
-      <IssueReaction
+      <IssuePeekOverviewReactions
         issueReactions={issueReactions}
         user={user}
         issueReactionCreate={issueReactionCreate}

web/components/issues/peek-overview/properties.tsx

@@ -47,8 +47,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
   const {
     user: { currentProjectRole },
-    cycleIssues: cycleIssueStore,
-    moduleIssues: { addIssueToModule },
     issueDetail: { fetchPeekIssueDetails },
   } = useMobxStore();
 

web/components/issues/peek-overview/reactions/index.ts

@@ -1,3 +1,3 @@
+export * from "./preview";
 export * from "./root";
 export * from "./selector";
-export * from "./preview";

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

@@ -1,16 +1,18 @@
 import { FC } from "react";
 // components
-import { IssueReactionPreview, IssueReactionSelector } from "./";
+import { IssueReactionPreview, IssueReactionSelector } from "components/issues";
+// types
+import { IUser } from "types";
 
 interface IIssueReaction {
   issueReactions: any;
-  user: any;
+  user: IUser | null;
   issueReactionCreate: (reaction: string) => void;
   issueReactionRemove: (reaction: string) => void;
   position?: "top" | "bottom";
 }
 
-export const IssueReaction: FC<IIssueReaction> = (props) => {
+export const IssuePeekOverviewReactions: FC<IIssueReaction> = (props) => {
   const { issueReactions, user, issueReactionCreate, issueReactionRemove, position = "bottom" } = props;
 
   const handleReaction = (reaction: string) => {

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

@@ -1,17 +1,17 @@
-import { FC, Fragment, ReactNode, useEffect } from "react";
+import { FC, Fragment, ReactNode, useCallback, useEffect } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { IssueView } from "./view";
+import { IssueView } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
+// constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 
 interface IIssuePeekOverview {
@@ -30,27 +30,45 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   const { peekIssueId } = router.query;
 
   const {
-    user: userStore,
+    user: { currentProjectRole },
-    issue: issueStore,
+    issue: { removeIssueFromStructure },
-    issueDetail: issueDetailStore,
+    issueDetail: {
-    archivedIssueDetail: archivedIssueDetailStore,
+      createIssueComment,
-    archivedIssues: archivedIssuesStore,
+      updateIssueComment,
-    project: projectStore,
+      removeIssueComment,
+      creationIssueCommentReaction,
+      removeIssueCommentReaction,
+      createIssueReaction,
+      removeIssueReaction,
+      createIssueSubscription,
+      removeIssueSubscription,
+      getIssue,
+      loader,
+      fetchPeekIssueDetails,
+      setPeekId,
+      fetchIssueActivity,
+    },
+    archivedIssueDetail: {
+      getIssue: getArchivedIssue,
+      loader: archivedIssueLoader,
+      fetchPeekIssueDetails: fetchArchivedPeekIssueDetails,
+    },
+    archivedIssues: { deleteArchivedIssue },
+    project: { currentProjectDetails },
   } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
-  const fetchIssueDetail = async () => {
+  const fetchIssueDetail = useCallback(async () => {
     if (workspaceSlug && projectId && peekIssueId) {
-      if (isArchived)
+      if (isArchived) await fetchArchivedPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
-        await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
+      else await fetchPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
-      else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, peekIssueId as string);
     }
-  };
+  }, [fetchArchivedPeekIssueDetails, fetchPeekIssueDetails, workspaceSlug, projectId, peekIssueId, isArchived]);
 
   useEffect(() => {
     fetchIssueDetail();
-  }, [workspaceSlug, projectId, peekIssueId]);
+  }, [workspaceSlug, projectId, peekIssueId, fetchIssueDetail]);
 
   const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -72,44 +90,43 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     });
   };
 
-  const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
+  const issue = isArchived ? getArchivedIssue : getIssue;
-  const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;
+  const isLoading = isArchived ? archivedIssueLoader : loader;
 
-  const issueUpdate = (_data: Partial<IIssue>) => {
+  const issueUpdate = async (_data: Partial<IIssue>) => {
-    if (handleIssue) handleIssue(_data);
+    if (handleIssue) {
+      await handleIssue(_data);
+      fetchIssueActivity(workspaceSlug, projectId, issueId);
+    }
   };
 
-  const issueReactionCreate = (reaction: string) =>
+  const issueReactionCreate = (reaction: string) => createIssueReaction(workspaceSlug, projectId, issueId, reaction);
-    issueDetailStore.createIssueReaction(workspaceSlug, projectId, issueId, reaction);
 
-  const issueReactionRemove = (reaction: string) =>
+  const issueReactionRemove = (reaction: string) => removeIssueReaction(workspaceSlug, projectId, issueId, reaction);
-    issueDetailStore.removeIssueReaction(workspaceSlug, projectId, issueId, reaction);
 
-  const issueCommentCreate = (comment: any) =>
+  const issueCommentCreate = (comment: any) => createIssueComment(workspaceSlug, projectId, issueId, comment);
-    issueDetailStore.createIssueComment(workspaceSlug, projectId, issueId, comment);
 
   const issueCommentUpdate = (comment: any) =>
-    issueDetailStore.updateIssueComment(workspaceSlug, projectId, issueId, comment?.id, comment);
+    updateIssueComment(workspaceSlug, projectId, issueId, comment?.id, comment);
 
-  const issueCommentRemove = (commentId: string) =>
+  const issueCommentRemove = (commentId: string) => removeIssueComment(workspaceSlug, projectId, issueId, commentId);
-    issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
 
   const issueCommentReactionCreate = (commentId: string, reaction: string) =>
-    issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
+    creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
 
   const issueCommentReactionRemove = (commentId: string, reaction: string) =>
-    issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
+    removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
 
-  const issueSubscriptionCreate = () => issueDetailStore.createIssueSubscription(workspaceSlug, projectId, issueId);
+  const issueSubscriptionCreate = () => createIssueSubscription(workspaceSlug, projectId, issueId);
 
-  const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);
+  const issueSubscriptionRemove = () => removeIssueSubscription(workspaceSlug, projectId, issueId);
 
   const handleDeleteIssue = async () => {
-    if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
+    if (isArchived) await deleteArchivedIssue(workspaceSlug, projectId, issue!);
-    else await issueStore.removeIssueFromStructure(workspaceSlug, projectId, issue!);
+    else removeIssueFromStructure(workspaceSlug, projectId, issue!);
     const { query } = router;
     if (query.peekIssueId) {
-      issueDetailStore.setPeekId(null);
+      setPeekId(null);
       delete query.peekIssueId;
       delete query.peekProjectId;
       router.push({
@@ -119,7 +136,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     }
   };
 
-  const userRole = userStore.currentProjectRole ?? EUserWorkspaceRoles.GUEST;
+  const userRole = currentProjectRole ?? EUserWorkspaceRoles.GUEST;
 
   return (
     <Fragment>
@@ -144,7 +161,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         issueSubscriptionRemove={issueSubscriptionRemove}
         handleDeleteIssue={handleDeleteIssue}
         disableUserActions={[5, 10].includes(userRole)}
-        showCommentAccessSpecifier={projectStore.currentProjectDetails?.is_deployed}
+        showCommentAccessSpecifier={currentProjectDetails?.is_deployed}
       >
         {children}
       </IssueView>

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

@@ -3,16 +3,21 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { PeekOverviewIssueDetails } from "./issue-detail";
+import {
-import { PeekOverviewProperties } from "./properties";
+  DeleteArchivedIssueModal,
-import { IssueComment } from "./activity";
+  DeleteIssueModal,
+  IssueActivity,
+  IssueUpdateStatus,
+  PeekOverviewIssueDetails,
+  PeekOverviewProperties,
+} from "components/issues";
+// ui
 import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
-import { DeleteIssueModal, DeleteArchivedIssueModal, IssueUpdateStatus } from "components/issues/";
 // types
 import { IIssue } from "types";
-// hooks
-import { useMobxStore } from "lib/mobx/store-provider";
 
 interface IIssueView {
   workspaceSlug: string;
@@ -41,7 +46,7 @@ interface IIssueView {
 
 type TPeekModes = "side-peek" | "modal" | "full-screen";
 
-const peekOptions: { key: TPeekModes; icon: any; title: string }[] = [
+const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
   {
     key: "side-peek",
     icon: SidePanelIcon,
@@ -86,9 +91,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   } = props;
 
   const router = useRouter();
-  const { peekIssueId } = router.query as { peekIssueId: string };
+  const { peekIssueId } = router.query;
 
-  const { user: userStore, issueDetail: issueDetailStore } = useMobxStore();
+  const {
+    user: { currentUser },
+    issueDetail: { fetchIssueSubscription, getIssueActivity, getIssueReactions, getIssueSubscription, setPeekId },
+  } = useMobxStore();
 
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -96,7 +104,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   const updateRoutePeekId = () => {
     if (issueId != peekIssueId) {
-      issueDetailStore.setPeekId(issueId);
+      setPeekId(issueId);
       const { query } = router;
       router.push({
         pathname: router.pathname,
@@ -104,10 +112,13 @@ export const IssueView: FC<IIssueView> = observer((props) => {
       });
     }
   };
+
   const removeRoutePeekId = () => {
     const { query } = router;
+
     if (query.peekIssueId) {
-      issueDetailStore.setPeekId(null);
+      setPeekId(null);
+
       delete query.peekIssueId;
       delete query.peekProjectId;
       router.push({
@@ -123,18 +134,16 @@ export const IssueView: FC<IIssueView> = observer((props) => {
       : null,
     async () => {
       if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
-        await issueDetailStore.fetchIssueSubscription(workspaceSlug, projectId, issueId);
+        await fetchIssueSubscription(workspaceSlug, projectId, issueId);
       }
     }
   );
 
-  const issueReactions = issueDetailStore.getIssueReactions || [];
+  const issueReactions = getIssueReactions || [];
-  const issueComments = issueDetailStore.getIssueComments || [];
+  const issueActivity = getIssueActivity;
-  const issueSubscription = issueDetailStore.getIssueSubscription || [];
+  const issueSubscription = getIssueSubscription || [];
 
-  const user = userStore?.currentUser;
+  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
-
-  const currentMode = peekOptions.find((m) => m.key === peekMode);
 
   return (
     <>
@@ -198,7 +207,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         </button>
                       }
                     >
-                      {peekOptions.map((mode) => (
+                      {PEEK_OPTIONS.map((mode) => (
                         <CustomSelect.Option key={mode.key} value={mode.key}>
                           <div
                             className={`flex items-center gap-1.5 ${
@@ -219,8 +228,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
               <div className="flex items-center gap-x-4">
                 <IssueUpdateStatus isSubmitting={isSubmitting} />
                 <div className="flex items-center gap-4">
-                  {issue?.created_by !== user?.id &&
+                  {issue?.created_by !== currentUser?.id &&
-                    !issue?.assignees.includes(user?.id ?? "") &&
+                    !issue?.assignees.includes(currentUser?.id ?? "") &&
                     !router.pathname.includes("[archivedIssueId]") && (
                       <Button
                         size="sm"
@@ -269,7 +278,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           issue={issue}
                           issueUpdate={issueUpdate}
                           issueReactions={issueReactions}
-                          user={user}
+                          user={currentUser}
                           issueReactionCreate={issueReactionCreate}
                           issueReactionRemove={issueReactionRemove}
                         />
@@ -280,12 +289,12 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           disableUserActions={disableUserActions}
                         />
 
-                        <IssueComment
+                        <IssueActivity
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
                           issueId={issueId}
-                          user={user}
+                          user={currentUser}
-                          issueComments={issueComments}
+                          issueActivity={issueActivity}
                           issueCommentCreate={issueCommentCreate}
                           issueCommentUpdate={issueCommentUpdate}
                           issueCommentRemove={issueCommentRemove}
@@ -305,17 +314,17 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               issue={issue}
                               issueReactions={issueReactions}
                               issueUpdate={issueUpdate}
-                              user={user}
+                              user={currentUser}
                               issueReactionCreate={issueReactionCreate}
                               issueReactionRemove={issueReactionRemove}
                             />
 
-                            <IssueComment
+                            <IssueActivity
                               workspaceSlug={workspaceSlug}
                               projectId={projectId}
                               issueId={issueId}
-                              user={user}
+                              user={currentUser}
-                              issueComments={issueComments}
+                              issueActivity={issueActivity}
                               issueCommentCreate={issueCommentCreate}
                               issueCommentUpdate={issueCommentUpdate}
                               issueCommentRemove={issueCommentRemove}

web/components/issues/sub-issues/issue.tsx

@@ -65,7 +65,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
           workspaceSlug={workspaceSlug}
           projectId={peekProjectId.toString()}
           issueId={peekIssueId.toString()}
-          handleIssue={(issueToUpdate) => handleUpdateIssue(issue, { ...issue, ...issueToUpdate })}
+          handleIssue={async (issueToUpdate) => await handleUpdateIssue(issue, { ...issue, ...issueToUpdate })}
         />
       )}
       <div>

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -26,7 +26,7 @@ import { NextPageWithLayout } from "types/app";
 import { IPage, IIssue } from "types";
 // fetch-keys
 import { PAGE_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
-import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { IssuePeekOverview } from "components/issues/peek-overview";
 import { IssueService } from "services/issue";
 import useToast from "hooks/use-toast";
 import useReloadConfirmations from "hooks/use-reload-confirmation";

web/services/issue/issue_comment.service.ts

@@ -1,6 +1,6 @@
 import { APIService } from "services/api.service";
 // types
-import { IIssueComment } from "types";
+import { IIssueActivity } from "types";
 // helper
 import { API_BASE_URL } from "helpers/common.helper";
 
@@ -21,7 +21,7 @@ export class IssueCommentService extends APIService {
     workspaceSlug: string,
     projectId: string,
     issueId: string,
-    data: Partial<IIssueComment>
+    data: Partial<IIssueActivity>
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`, data)
       .then((response) => response?.data)
@@ -35,7 +35,7 @@ export class IssueCommentService extends APIService {
     projectId: string,
     issueId: string,
     commentId: string,
-    data: Partial<IIssueComment>
+    data: Partial<IIssueActivity>
   ): Promise<any> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,

web/services/issue/issue_reaction.service.ts

@@ -2,7 +2,7 @@ import { API_BASE_URL } from "helpers/common.helper";
 // services
 import { APIService } from "services/api.service";
 // types
-import type { IssueReaction, IssueCommentReaction, IssueReactionForm, IssueCommentReactionForm } from "types";
+import type { IssueCommentReaction, IssueReactionForm, IssueCommentReactionForm, IIssueReaction } from "types";
 
 export class IssueReactionService extends APIService {
   constructor() {
@@ -22,7 +22,7 @@ export class IssueReactionService extends APIService {
       });
   }
 
-  async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<IssueReaction[]> {
+  async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssueReaction[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`)
       .then((response) => response?.data)
       .catch((error) => {

web/store/archived-issues/issue_detail.store.ts

@@ -173,7 +173,7 @@ export class ArchivedIssueDetailStore implements IArchivedIssueDetailStore {
     try {
       const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
       await this.rootStore.issueDetail.fetchIssueReactions(workspaceSlug, projectId, issueId);
-      await this.rootStore.issueDetail.fetchIssueComments(workspaceSlug, projectId, issueId);
+      await this.rootStore.issueDetail.fetchIssueActivity(workspaceSlug, projectId, issueId);
 
       runInAction(() => {
         this.loader = false;

web/store/event-tracker.store.ts

@@ -34,7 +34,6 @@ export class TrackEventStore implements ITrackEventStore {
     group?: { isGrouping: boolean | null; groupType: string | null; gorupId: string | null } | null
   ) => {
     try {
-      console.log("POSTHOG_EVENT: ", eventName);
       let extras: any = {
         workspace_name: this.rootStore.workspace.currentWorkspace?.name ?? "",
         workspace_id: this.rootStore.workspace.currentWorkspace?.id ?? "",
@@ -70,9 +69,8 @@ export class TrackEventStore implements ITrackEventStore {
           element: this.trackElement ?? "",
         });
       }
-      console.log(payload);
     } catch (error) {
-      console.log(error);
+      throw error;
     }
     this.setTrackElement("");
   };

web/store/issue/issue_detail.store.ts

@@ -4,7 +4,7 @@ import { IssueService, IssueReactionService, IssueCommentService } from "service
 import { NotificationService } from "services/notification.service";
 // types
 import { RootStore } from "../root";
-import { IIssue } from "types";
+import type { IIssue, IIssueActivity } from "types";
 // constants
 import { groupReactionEmojis } from "constants/issue";
 
@@ -16,18 +16,18 @@ export interface IIssueDetailStore {
   issues: {
     [issueId: string]: IIssue;
   };
-  issue_reactions: {
+  issueReactions: {
     [issueId: string]: any;
   };
-  issue_comments: {
+  issueActivity: {
-    [issueId: string]: any;
+    [issueId: string]: IIssueActivity[];
   };
-  issue_comment_reactions: {
+  issueCommentReactions: {
     [issueId: string]: {
       [comment_id: string]: any;
     };
   };
-  issue_subscription: {
+  issueSubscription: {
     [issueId: string]: any;
   };
 
@@ -36,7 +36,7 @@ export interface IIssueDetailStore {
   // computed
   getIssue: IIssue | null;
   getIssueReactions: any | null;
-  getIssueComments: any | null;
+  getIssueActivity: IIssueActivity[] | null;
   getIssueCommentReactions: any | null;
   getIssueSubscription: any | null;
 
@@ -51,7 +51,7 @@ export interface IIssueDetailStore {
   createIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
   removeIssueReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<void>;
 
-  fetchIssueComments: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  fetchIssueActivity: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   createIssueComment: (workspaceSlug: string, projectId: string, issueId: string, data: any) => Promise<void>;
   updateIssueComment: (
     workspaceSlug: string,
@@ -96,16 +96,16 @@ export class IssueDetailStore implements IIssueDetailStore {
   issues: {
     [issueId: string]: IIssue;
   } = {};
-  issue_reactions: {
+  issueReactions: {
     [issueId: string]: any;
   } = {};
-  issue_comments: {
+  issueActivity: {
+    [issueId: string]: IIssueActivity[];
+  } = {};
+  issueCommentReactions: {
     [issueId: string]: any;
   } = {};
-  issue_comment_reactions: {
+  issueSubscription: {
-    [issueId: string]: any;
-  } = {};
-  issue_subscription: {
     [issueId: string]: any;
   } = {};
 
@@ -125,14 +125,14 @@ export class IssueDetailStore implements IIssueDetailStore {
 
       peekId: observable.ref,
       issues: observable.ref,
-      issue_reactions: observable.ref,
+      issueReactions: observable.ref,
-      issue_comments: observable.ref,
+      issueActivity: observable.ref,
-      issue_comment_reactions: observable.ref,
+      issueCommentReactions: observable.ref,
-      issue_subscription: observable.ref,
+      issueSubscription: observable.ref,
 
       getIssue: computed,
       getIssueReactions: computed,
-      getIssueComments: computed,
+      getIssueActivity: computed,
       getIssueCommentReactions: computed,
       getIssueSubscription: computed,
 
@@ -147,7 +147,7 @@ export class IssueDetailStore implements IIssueDetailStore {
       createIssueReaction: action,
       removeIssueReaction: action,
 
-      fetchIssueComments: action,
+      fetchIssueActivity: action,
       createIssueComment: action,
       updateIssueComment: action,
       removeIssueComment: action,
@@ -196,25 +196,25 @@ export class IssueDetailStore implements IIssueDetailStore {
 
   get getIssueReactions() {
     if (!this.peekId) return null;
-    const _reactions = this.issue_reactions[this.peekId];
+    const _reactions = this.issueReactions[this.peekId];
     return _reactions || null;
   }
 
-  get getIssueComments() {
+  get getIssueActivity() {
     if (!this.peekId) return null;
-    const _comments = this.issue_comments[this.peekId];
+    const activity = this.issueActivity[this.peekId];
-    return _comments || null;
+    return activity || null;
   }
 
   get getIssueCommentReactions() {
     if (!this.peekId) return null;
-    const _commentReactions = this.issue_comment_reactions[this.peekId];
+    const _commentReactions = this.issueCommentReactions[this.peekId];
     return _commentReactions || null;
   }
 
   get getIssueSubscription() {
     if (!this.peekId) return null;
-    const _commentSubscription = this.issue_subscription[this.peekId];
+    const _commentSubscription = this.issueSubscription[this.peekId];
     return _commentSubscription || null;
   }
 
@@ -292,7 +292,7 @@ export class IssueDetailStore implements IIssueDetailStore {
 
       const issueDetailsResponse = await this.issueService.retrieve(workspaceSlug, projectId, issueId);
       await this.fetchIssueReactions(workspaceSlug, projectId, issueId);
-      await this.fetchIssueComments(workspaceSlug, projectId, issueId);
+      await this.fetchIssueActivity(workspaceSlug, projectId, issueId);
 
       runInAction(() => {
         this.loader = false;
@@ -319,13 +319,13 @@ export class IssueDetailStore implements IIssueDetailStore {
     try {
       const _reactions = await this.issueReactionService.listIssueReactions(workspaceSlug, projectId, issueId);
 
-      const _issue_reactions = {
+      const _issueReactions = {
-        ...this.issue_reactions,
+        ...this.issueReactions,
         [issueId]: groupReactionEmojis(_reactions),
       };
 
       runInAction(() => {
-        this.issue_reactions = _issue_reactions;
+        this.issueReactions = _issueReactions;
       });
     } catch (error) {
       console.warn("error creating the issue reaction", error);
@@ -346,15 +346,15 @@ export class IssueDetailStore implements IIssueDetailStore {
       };
 
       runInAction(() => {
-        this.issue_reactions = {
+        this.issueReactions = {
-          ...this.issue_reactions,
+          ...this.issueReactions,
           [issueId]: _currentReactions,
         };
       });
     } catch (error) {
       runInAction(() => {
-        this.issue_reactions = {
+        this.issueReactions = {
-          ...this.issue_reactions,
+          ...this.issueReactions,
           [issueId]: _currentReactions,
         };
       });
@@ -375,8 +375,8 @@ export class IssueDetailStore implements IIssueDetailStore {
         };
 
         runInAction(() => {
-          this.issue_reactions = {
+          this.issueReactions = {
-            ...this.issue_reactions,
+            ...this.issueReactions,
             [issueId]: _currentReactions,
           };
         });
@@ -385,8 +385,8 @@ export class IssueDetailStore implements IIssueDetailStore {
       }
     } catch (error) {
       runInAction(() => {
-        this.issue_reactions = {
+        this.issueReactions = {
-          ...this.issue_reactions,
+          ...this.issueReactions,
           [issueId]: _currentReactions,
         };
       });
@@ -395,24 +395,25 @@ export class IssueDetailStore implements IIssueDetailStore {
     }
   };
 
-  // comments
+  fetchIssueActivity = async (workspaceSlug: string, projectId: string, issueId: string) => {
-  fetchIssueComments = async (workspaceSlug: string, projectId: string, issueId: string) => {
     try {
-      const _issueCommentResponse = await this.issueService.getIssueActivities(workspaceSlug, projectId, issueId);
+      const issueActivityResponse = await this.issueService.getIssueActivities(workspaceSlug, projectId, issueId);
 
       const _issueComments = {
-        ...this.issue_comments,
+        ...this.issueActivity,
-        [issueId]: [..._issueCommentResponse],
+        [issueId]: [...issueActivityResponse],
       };
 
       runInAction(() => {
-        this.issue_comments = _issueComments;
+        this.issueActivity = _issueComments;
       });
     } catch (error) {
       console.warn("error creating the issue comment", error);
       throw error;
     }
   };
+
+  // comments
   createIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
     try {
       const _issueCommentResponse = await this.issueCommentService.createIssueComment(
@@ -423,18 +424,19 @@ export class IssueDetailStore implements IIssueDetailStore {
       );
 
       const _issueComments = {
-        ...this.issue_comments,
+        ...this.issueActivity,
-        [issueId]: [...this.issue_comments[issueId], _issueCommentResponse],
+        [issueId]: [...this.issueActivity[issueId], _issueCommentResponse],
       };
 
       runInAction(() => {
-        this.issue_comments = _issueComments;
+        this.issueActivity = _issueComments;
       });
     } catch (error) {
       console.warn("error creating the issue comment", error);
       throw error;
     }
   };
+
   updateIssueComment = async (
     workspaceSlug: string,
     projectId: string,
@@ -452,31 +454,32 @@ export class IssueDetailStore implements IIssueDetailStore {
       );
 
       const _issueComments = {
-        ...this.issue_comments,
+        ...this.issueActivity,
-        [issueId]: this.issue_comments[issueId].map((comment: any) =>
+        [issueId]: this.issueActivity[issueId].map((comment) =>
           comment.id === commentId ? _issueCommentResponse : comment
         ),
       };
 
       runInAction(() => {
-        this.issue_comments = _issueComments;
+        this.issueActivity = _issueComments;
       });
     } catch (error) {
       console.warn("error updating the issue comment", error);
       throw error;
     }
   };
+
   removeIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
     try {
       const _issueComments = {
-        ...this.issue_comments,
+        ...this.issueActivity,
-        [issueId]: this.issue_comments[issueId].filter((comment: any) => comment.id != commentId),
+        [issueId]: this.issueActivity[issueId]?.filter((comment) => comment.id != commentId),
       };
 
       await this.issueCommentService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId);
 
       runInAction(() => {
-        this.issue_comments = _issueComments;
+        this.issueActivity = _issueComments;
       });
     } catch (error) {
       console.warn("error removing the issue comment", error);
@@ -484,27 +487,28 @@ export class IssueDetailStore implements IIssueDetailStore {
     }
   };
 
-  // comment reaction
+  // comment reactions
   fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
     try {
       const _reactions = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
 
-      const _issue_comment_reactions = {
+      const _issueCommentReactions = {
-        ...this.issue_comment_reactions,
+        ...this.issueCommentReactions,
         [issueId]: {
-          ...this.issue_comment_reactions[issueId],
+          ...this.issueCommentReactions[issueId],
           [commentId]: groupReactionEmojis(_reactions),
         },
       };
 
       runInAction(() => {
-        this.issue_comment_reactions = _issue_comment_reactions;
+        this.issueCommentReactions = _issueCommentReactions;
       });
     } catch (error) {
       console.warn("error removing the issue comment", error);
       throw error;
     }
   };
+
   creationIssueCommentReaction = async (
     workspaceSlug: string,
     projectId: string,
@@ -530,22 +534,23 @@ export class IssueDetailStore implements IIssueDetailStore {
         [reaction]: [..._currentReactions?.[reaction], { ..._reaction }],
       };
 
-      const _issue_comment_reactions = {
+      const _issueCommentReactions = {
-        ...this.issue_comment_reactions,
+        ...this.issueCommentReactions,
         [issueId]: {
-          ...this.issue_comment_reactions[issueId],
+          ...this.issueCommentReactions[issueId],
           [commentId]: _currentReactions,
         },
       };
 
       runInAction(() => {
-        this.issue_comment_reactions = _issue_comment_reactions;
+        this.issueCommentReactions = _issueCommentReactions;
       });
     } catch (error) {
       console.warn("error removing the issue comment", error);
       throw error;
     }
   };
+
   removeIssueCommentReaction = async (
     workspaceSlug: string,
     projectId: string,
@@ -565,16 +570,16 @@ export class IssueDetailStore implements IIssueDetailStore {
           [reaction]: [..._currentReactions?.[reaction].filter((r: any) => r.actor !== user.id)],
         };
 
-        const _issue_comment_reactions = {
+        const _issueCommentReactions = {
-          ...this.issue_comment_reactions,
+          ...this.issueCommentReactions,
           [issueId]: {
-            ...this.issue_comment_reactions[issueId],
+            ...this.issueCommentReactions[issueId],
             [commentId]: _currentReactions,
           },
         };
 
         runInAction(() => {
-          this.issue_comment_reactions = _issue_comment_reactions;
+          this.issueCommentReactions = _issueCommentReactions;
         });
 
         await this.issueReactionService.deleteIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
@@ -585,7 +590,7 @@ export class IssueDetailStore implements IIssueDetailStore {
     }
   };
 
-  // subscription
+  // subscriptions
   fetchIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
     try {
       const _subscription = await this.notificationService.getIssueNotificationSubscriptionStatus(
@@ -594,13 +599,13 @@ export class IssueDetailStore implements IIssueDetailStore {
         issueId
       );
 
-      const _issue_subscription = {
+      const _issueSubscription = {
-        ...this.issue_subscription,
+        ...this.issueSubscription,
         [issueId]: _subscription,
       };
 
       runInAction(() => {
-        this.issue_subscription = _issue_subscription;
+        this.issueSubscription = _issueSubscription;
       });
     } catch (error) {
       console.warn("error fetching the issue subscription", error);
@@ -611,13 +616,13 @@ export class IssueDetailStore implements IIssueDetailStore {
     try {
       await this.notificationService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
 
-      const _issue_subscription = {
+      const _issueSubscription = {
-        ...this.issue_subscription,
+        ...this.issueSubscription,
         [issueId]: { subscribed: true },
       };
 
       runInAction(() => {
-        this.issue_subscription = _issue_subscription;
+        this.issueSubscription = _issueSubscription;
       });
     } catch (error) {
       console.warn("error creating the issue subscription", error);
@@ -626,13 +631,13 @@ export class IssueDetailStore implements IIssueDetailStore {
   };
   removeIssueSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
     try {
-      const _issue_subscription = {
+      const _issueSubscription = {
-        ...this.issue_subscription,
+        ...this.issueSubscription,
         [issueId]: { subscribed: false },
       };
 
       runInAction(() => {
-        this.issue_subscription = _issue_subscription;
+        this.issueSubscription = _issueSubscription;
       });
 
       await this.notificationService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);

web/types/issues.d.ts

@@ -181,18 +181,20 @@ export interface IIssueLabelTree extends IIssueLabel {
 }
 
 export interface IIssueActivity {
+  access?: "EXTERNAL" | "INTERNAL";
   actor: string;
   actor_detail: IUserLite;
   attachments: any[];
-  comment: string;
+  comment?: string;
+  comment_html?: string;
+  comment_stripped?: string;
   created_at: Date;
   created_by: string;
   field: string | null;
   id: string;
   issue: string | null;
-  issue_comment: string | null;
+  issue_comment?: string | null;
   issue_detail: {
-    description: any;
     description_html: string;
     id: string;
     name: string;
@@ -212,13 +214,6 @@ export interface IIssueActivity {
   workspace_detail?: IWorkspaceLite;
 }
 
-export interface IIssueComment extends IIssueActivity {
-  access: "EXTERNAL" | "INTERNAL";
-  comment_html: string;
-  comment_json: any;
-  comment_stripped: string;
-}
-
 export interface IIssueLite {
   id: string;
   name: string;

web/types/reaction.d.ts

@@ -1,14 +1,17 @@
-export interface IssueReaction {
+import { IUserLite } from "./users";
-  id: string;
+
-  created_at: Date;
+export interface IIssueReaction {
-  updated_at: Date;
-  reaction: string;
-  created_by: string;
-  updated_by: string;
-  project: string;
-  workspace: string;
   actor: string;
+  actor_detail: IUserLite;
+  created_at: Date;
+  created_by: string;
+  id: string;
   issue: string;
+  project: string;
+  reaction: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
 }
 
 export interface IssueReactionForm {