From f9c3f02d1514aff7c3305ebb2962b478e2f5dc8a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sun, 23 Jul 2023 14:38:07 +0530
Subject: [PATCH] refactor: issue activity message logic (#1614)

---
 apps/app/components/issues/activity.tsx       | 575 ++++++++++--------
 .../issues/comment/comment-card.tsx           |   2 +-
 apps/app/types/issues.d.ts                    |  54 +-
 apps/app/types/users.d.ts                     |   8 +-
 4 files changed, 335 insertions(+), 304 deletions(-)

diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 617b35266..58808d8a1 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -6,8 +6,6 @@ import useSWR from "swr";
 
 // services
 import issuesService from "services/issues.service";
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { CommentCard } from "components/issues/comment";
 // ui
@@ -17,88 +15,288 @@ import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon } from "components/icons";
 // helpers
 import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssueComment, IIssueLabels } from "types";
+import { ICurrentUserResponse, IIssueActivity, IIssueComment } from "types";
 // fetch-keys
-import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 const activityDetails: {
   [key: string]: {
-    message?: string;
-    icon: JSX.Element;
+    message: (activity: IIssueActivity) => React.ReactNode;
+    icon: React.ReactNode;
   };
 } = {
   assignee: {
-    message: "removed the assignee",
+    message: (activity) => (
+      <>
+        removed the assignee{" "}
+        <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+      </>
+    ),
     icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
   },
   assignees: {
-    message: "added a new assignee",
+    message: (activity) => (
+      <>
+        added a new assignee{" "}
+        <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+      </>
+    ),
     icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
   },
-  blocks: {
-    message: "marked this issue being blocked by",
-    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  archived_at: {
+    message: (activity) => {
+      if (activity.new_value === "restore") return "restored the issue.";
+      else return "archived the issue.";
+    },
+    icon: <Icon iconName="archive" className="!text-sm" aria-hidden="true" />,
+  },
+  attachment: {
+    message: (activity) => {
+      if (activity.verb === "created") return "uploaded a new attachment.";
+      else return "removed the attachment.";
+    },
+    icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
   },
   blocking: {
-    message: "marked this issue is blocking",
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue is blocking issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the blocking issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
     icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
   },
+  blocks: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked this issue is being blocked by{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed this issue being blocked by issue{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
+  },
   cycles: {
-    message: "set the cycle to",
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this issue to the cycle{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the cycle to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the issue from the cycle{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
     icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
   },
+  description: {
+    message: (activity) => "updated the description.",
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
+  },
   estimate_point: {
-    message: "set the estimate point to",
+    message: (activity) => {
+      if (!activity.new_value) return "removed the estimate point.";
+      else
+        return (
+          <>
+            set the estimate point to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+    },
     icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
   },
   labels: {
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new label{" "}
+            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{
+                  backgroundColor: "#000000",
+                }}
+                aria-hidden="true"
+              />
+              <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            </span>
+          </>
+        );
+      else
+        return (
+          <>
+            removed the label{" "}
+            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{
+                  backgroundColor: "#000000",
+                }}
+                aria-hidden="true"
+              />
+              <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            </span>
+          </>
+        );
+    },
     icon: <Icon iconName="sell" className="!text-sm" aria-hidden="true" />,
   },
-  modules: {
-    message: "set the module to",
-    icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
-  },
-  state: {
-    message: "set the state to",
-    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
-  },
-  priority: {
-    message: "set the priority to",
-    icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
-  },
-  name: {
-    message: "set the name to",
-    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
-  },
-  description: {
-    message: "updated the description.",
-    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
-  },
-  target_date: {
-    message: "set the due date to",
-    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
-  },
-  parent: {
-    message: "set the parent to",
-    icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
-  },
-  estimate: {
-    message: "updated the estimate",
-    icon: <Icon iconName="change_history" className="!text-sm" aria-hidden="true" />,
-  },
   link: {
-    message: "updated the link",
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this{" "}
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-custom-text-100"
+            >
+              link
+            </a>{" "}
+            to the issue.
+          </>
+        );
+      else
+        return (
+          <>
+            removed this{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-custom-text-100"
+            >
+              link
+            </a>{" "}
+            from the issue.
+          </>
+        );
+    },
     icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
   },
-  attachment: {
-    message: "updated the attachment",
-    icon: <Icon iconName="attach_file" className="!text-sm" aria-hidden="true" />,
+  modules: {
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this issue to the module{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the module to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the issue from the module{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <Icon iconName="dataset" className="!text-sm" aria-hidden="true" />,
   },
-  archived_at: {
-    message: "archived",
-    icon: <Icon iconName="archive" className="!text-sm" aria-hidden="true" />,
+  name: {
+    message: (activity) => `set the name to ${activity.new_value}.`,
+    icon: <Icon iconName="chat" className="!text-sm" aria-hidden="true" />,
+  },
+  parent: {
+    message: (activity) => {
+      if (!activity.old_value)
+        return (
+          <>
+            set the parent to{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the parent{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <Icon iconName="supervised_user_circle" className="!text-sm" aria-hidden="true" />,
+  },
+  priority: {
+    message: (activity) => (
+      <>
+        set the priority to{" "}
+        <span className="font-medium text-custom-text-100">
+          {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
+        </span>
+        .
+      </>
+    ),
+    icon: <Icon iconName="signal_cellular_alt" className="!text-sm" aria-hidden="true" />,
+  },
+  state: {
+    message: (activity) => (
+      <>
+        set the state to{" "}
+        <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+      </>
+    ),
+    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
+  },
+  target_date: {
+    message: (activity) => {
+      if (!activity.new_value) return "removed the due date.";
+      else
+        return (
+          <>
+            set the due date to{" "}
+            <span className="font-medium text-custom-text-100">
+              {renderShortDateWithYearFormat(activity.new_value)}
+            </span>
+            .
+          </>
+        );
+    },
+    icon: <Icon iconName="calendar_today" className="!text-sm" aria-hidden="true" />,
   },
 };
 
@@ -111,29 +309,17 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { isEstimateActive, estimatePoints } = useEstimateOption();
-
   const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
-    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug as string,
-            projectId as string,
-            issueId as string
-          )
-      : null
-  );
-
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId ? PROJECT_ISSUES_ACTIVITY(issueId) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () =>
+          issuesService.getIssueActivities(workspaceSlug as string, projectId as string, issueId)
       : null
   );
 
   const handleCommentUpdate = async (comment: IIssueComment) => {
     if (!workspaceSlug || !projectId || !issueId) return;
+
     await issuesService
       .patchIssueComment(
         workspaceSlug as string,
@@ -143,9 +329,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
         comment,
         user
       )
-      .then((res) => {
-        mutateIssueActivities();
-      });
+      .then((res) => mutateIssueActivities());
   };
 
   const handleCommentDelete = async (commentId: string) => {
@@ -164,15 +348,6 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
       .then(() => mutateIssueActivities());
   };
 
-  const getLabelColor = (labelId: string) => {
-    if (!issueLabels) return;
-    const label = issueLabels.find((label) => label.id === labelId);
-    if (typeof label !== "undefined") {
-      return label.color !== "" ? label.color : "#000000";
-    }
-    return "#000000";
-  };
-
   if (!issueActivities) {
     return (
       <Loader className="space-y-4">
@@ -195,207 +370,75 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
-        {issueActivities.map((activityItem, activityItemIdx) => {
+        {issueActivities.map((activityItem, index) => {
           // determines what type of action is performed
-          let action = activityDetails[activityItem.field as keyof typeof activityDetails]?.message;
-          if (activityItem.field === "labels") {
-            action = activityItem.new_value !== "" ? "added a new label" : "removed the label";
-          } else if (activityItem.field === "blocking") {
-            action =
-              activityItem.new_value !== ""
-                ? "marked this issue is blocking"
-                : "removed the issue from blocking";
-          } else if (activityItem.field === "blocks") {
-            action =
-              activityItem.new_value !== ""
-                ? "marked this issue being blocked by"
-                : "removed blocker";
-          } else if (activityItem.field === "target_date") {
-            action =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? "set the due date to"
-                : "removed the due date";
-          } else if (activityItem.field === "parent") {
-            action =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? "set the parent to"
-                : "removed the parent";
-          } else if (activityItem.field === "priority") {
-            action =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? "set the priority to"
-                : "removed the priority";
-          } else if (activityItem.field === "description") {
-            action = "updated the";
-          } else if (activityItem.field === "attachment") {
-            action = `${activityItem.verb} the`;
-          } else if (activityItem.field === "link") {
-            action = `${activityItem.verb} the`;
-          } else if (activityItem.field === "estimate") {
-            action = "updated the";
-          } else if (activityItem.field === "cycles") {
-            action =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? "set the cycle to"
-                : "removed the cycle";
-          } else if (activityItem.field === "modules") {
-            action =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? "set the module to"
-                : "removed the module";
-          } else if (activityItem.field === "archived_at") {
-            action =
-              activityItem.new_value && activityItem.new_value === "restore"
-                ? "restored the issue"
-                : "archived the issue";
-          }
-          // for values that are after the action clause
-          let value: any = activityItem.new_value ? activityItem.new_value : activityItem.old_value;
-          if (
-            activityItem.verb === "created" &&
-            activityItem.field !== "cycles" &&
-            activityItem.field !== "modules" &&
-            activityItem.field !== "attachment" &&
-            activityItem.field !== "link" &&
-            activityItem.field !== "estimate"
-          ) {
-            value = <span className="text-custom-text-200">created this issue.</span>;
-          } else if (activityItem.field === "state") {
-            value = activityItem.new_value ? addSpaceIfCamelCase(activityItem.new_value) : "None";
-          } else if (activityItem.field === "labels") {
-            let name;
-            let id = "#000000";
-            if (activityItem.new_value !== "") {
-              name = activityItem.new_value;
-              id = activityItem.new_identifier ? activityItem.new_identifier : id;
-            } else {
-              name = activityItem.old_value;
-              id = activityItem.old_identifier ? activityItem.old_identifier : id;
-            }
-
-            value = (
-              <span className="relative inline-flex items-center rounded-full border border-custom-border-200 px-2 py-0.5 text-xs">
-                <span className="absolute flex flex-shrink-0 items-center justify-center">
-                  <span
-                    className="h-1.5 w-1.5 rounded-full"
-                    style={{
-                      backgroundColor: getLabelColor(id),
-                    }}
-                    aria-hidden="true"
-                  />
-                </span>
-                <span className="ml-3 font-medium text-custom-text-100">{name}</span>
-              </span>
-            );
-          } else if (activityItem.field === "assignees") {
-            value = activityItem.new_value;
-          } else if (activityItem.field === "target_date") {
-            const date =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? activityItem.new_value
-                : activityItem.old_value;
-            value = renderShortDateWithYearFormat(date as string);
-          } else if (activityItem.field === "description") {
-            value = "description";
-          } else if (activityItem.field === "attachment") {
-            value = "attachment";
-          } else if (activityItem.field === "cycles") {
-            const cycles =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? activityItem.new_value
-                : activityItem.old_value;
-            value = cycles ? addSpaceIfCamelCase(cycles) : "None";
-          } else if (activityItem.field === "modules") {
-            const modules =
-              activityItem.new_value && activityItem.new_value !== ""
-                ? activityItem.new_value
-                : activityItem.old_value;
-            value = modules ? addSpaceIfCamelCase(modules) : "None";
-          } else if (activityItem.field === "link") {
-            value = "link";
-          } else if (activityItem.field === "estimate_point") {
-            value = activityItem.new_value
-              ? isEstimateActive
-                ? estimatePoints.find((e) => e.key === parseInt(activityItem.new_value ?? "", 10))
-                    ?.value
-                : activityItem.new_value +
-                  ` Point${parseInt(activityItem.new_value ?? "", 10) > 1 ? "s" : ""}`
-              : "None";
-          }
+          const message = activityItem.field
+            ? activityDetails[activityItem.field as keyof typeof activityDetails].message(
+                activityItem
+              )
+            : "created the issue.";
 
           if ("field" in activityItem && activityItem.field !== "updated_by") {
             return (
               <li key={activityItem.id}>
                 <div className="relative pb-1">
-                  {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
+                  {issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
                     <span
                       className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                       aria-hidden="true"
                     />
                   ) : null}
                   <div className="relative flex items-start space-x-2">
-                    <>
-                      <div>
-                        <div className="relative px-1.5">
-                          <div className="mt-1.5">
-                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                              {activityItem.field ? (
-                                activityItem.new_value === "restore" ? (
-                                  <Icon
-                                    iconName="history"
-                                    className="text-sm text-custom-text-200"
-                                  />
-                                ) : (
-                                  activityDetails[
-                                    activityItem.field as keyof typeof activityDetails
-                                  ]?.icon
-                                )
-                              ) : activityItem.actor_detail.avatar &&
-                                activityItem.actor_detail.avatar !== "" ? (
-                                <img
-                                  src={activityItem.actor_detail.avatar}
-                                  alt={activityItem.actor_detail.first_name}
-                                  height={24}
-                                  width={24}
-                                  className="rounded-full"
-                                />
+                    <div>
+                      <div className="relative px-1.5">
+                        <div className="mt-1.5">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
+                            {activityItem.field ? (
+                              activityItem.new_value === "restore" ? (
+                                <Icon iconName="history" className="text-sm text-custom-text-200" />
                               ) : (
-                                <div
-                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                                >
-                                  {activityItem.actor_detail.first_name.charAt(0)}
-                                </div>
-                              )}
-                            </div>
+                                activityDetails[activityItem.field as keyof typeof activityDetails]
+                                  ?.icon
+                              )
+                            ) : activityItem.actor_detail.avatar &&
+                              activityItem.actor_detail.avatar !== "" ? (
+                              <img
+                                src={activityItem.actor_detail.avatar}
+                                alt={activityItem.actor_detail.first_name}
+                                height={24}
+                                width={24}
+                                className="rounded-full"
+                              />
+                            ) : (
+                              <div
+                                className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                              >
+                                {activityItem.actor_detail.first_name.charAt(0)}
+                              </div>
+                            )}
                           </div>
                         </div>
                       </div>
-                      <div className="min-w-0 flex-1 py-3">
-                        <div className="text-xs text-custom-text-200">
-                          {activityItem.field === "archived_at" &&
-                          activityItem.new_value !== "restore" ? (
-                            <span className="text-gray font-medium">Plane</span>
-                          ) : (
-                            <span className="text-gray font-medium">
-                              {activityItem.actor_detail.first_name}
-                              {activityItem.actor_detail.is_bot
-                                ? " Bot"
-                                : " " + activityItem.actor_detail.last_name}
-                            </span>
-                          )}
-                          <span> {action} </span>
-                          {activityItem.field !== "archived_at" && (
-                            <span className="text-xs font-medium text-custom-text-100">
-                              {" "}
-                              {value}{" "}
-                            </span>
-                          )}
-                          <span className="whitespace-nowrap">
-                            {timeAgo(activityItem.created_at)}
+                    </div>
+                    <div className="min-w-0 flex-1 py-3">
+                      <div className="text-xs text-custom-text-200 break-words">
+                        {activityItem.field === "archived_at" &&
+                        activityItem.new_value !== "restore" ? (
+                          <span className="text-gray font-medium">Plane</span>
+                        ) : (
+                          <span className="text-gray font-medium">
+                            {activityItem.actor_detail.first_name}
+                            {activityItem.actor_detail.is_bot
+                              ? " Bot"
+                              : " " + activityItem.actor_detail.last_name}
                           </span>
-                        </div>
+                        )}{" "}
+                        {message}{" "}
+                        <span className="whitespace-nowrap">
+                          {timeAgo(activityItem.created_at)}
+                        </span>
                       </div>
-                    </>
+                    </div>
                   </div>
                 </div>
               </li>
@@ -404,7 +447,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             return (
               <div key={activityItem.id} className="mt-4">
                 <CommentCard
-                  comment={activityItem as any}
+                  comment={activityItem as IIssueComment}
                   onSubmit={handleCommentUpdate}
                   handleCommentDeletion={handleCommentDelete}
                 />
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index e99f78bc5..a88b2abf9 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -52,8 +52,8 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
   const onEnter = (formData: IIssueComment) => {
     if (isSubmitting) return;
     setIsEditing(false);
+
     onSubmit(formData);
-    console.log(formData);
 
     editorRef.current?.setEditorValue(formData.comment_json);
     showEditorRef.current?.setEditorValue(formData.comment_json);
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 991d26a43..27f595774 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -147,25 +147,6 @@ export interface BlockeIssueDetail {
   project_detail: IProjectLite;
 }
 
-export interface IIssueComment {
-  id: string;
-  actor: string;
-  actor_detail: IUserLite;
-  created_at: Date;
-  updated_at: Date;
-  comment: string;
-  comment_html: string;
-  comment_json: any;
-  attachments: any[];
-  created_by: string;
-  updated_by: string;
-  project: string;
-  project_detail: IProjectLite;
-  workspace: string;
-  workspace_detail: IWorkspaceLite;
-  issue: string;
-}
-
 export type IssuePriorities = {
   id: string;
   created_at: Date;
@@ -209,25 +190,32 @@ export interface IIssueLabels {
 }
 
 export interface IIssueActivity {
-  id: string;
+  actor: string;
   actor_detail: IUserLite;
-  created_at: Date;
-  updated_at: Date;
-  verb: string;
-  field: string | null;
-  old_value: string | null;
-  new_value: string | null;
-  comment: string;
   attachments: any[];
-  old_identifier: string | null;
-  new_identifier: string | null;
+  comment: string;
+  created_at: Date;
   created_by: string;
-  updated_by: string;
-  project: string;
-  workspace: string;
+  field: string | null;
+  id: string;
   issue: string;
   issue_comment: string | null;
-  actor: string;
+  new_identifier: string | null;
+  new_value: string | null;
+  old_identifier: string | null;
+  old_value: string | null;
+  project: string;
+  updated_at: Date;
+  updated_by: string;
+  verb: string;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+}
+
+export interface IIssueComment extends IIssueActivity {
+  comment_html: string;
+  comment_json: any;
+  comment_stripped: string;
 }
 
 export interface IIssueLite {
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 472e79636..8983278f1 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -53,13 +53,13 @@ export interface ICurrentUserResponse extends IUser {
 }
 
 export interface IUserLite {
-  readonly id: string;
-  first_name: string;
-  last_name: string;
-  email: string;
   avatar: string;
   created_at: Date;
+  email: string;
+  first_name: string;
+  readonly id: string;
   is_bot: boolean;
+  last_name: string;
 }
 
 export interface IUserActivity {