From c16b0daa22459086be480dcd4d9dde31ca8274f8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 2 Aug 2023 16:45:34 +0530
Subject: [PATCH] style: profile activity (#1771)

* style: profile activity comment log styling

* chore: profile feed activity refactor

* style: sidebar project list
---
 apps/app/components/core/feeds.tsx            | 342 ------------------
 apps/app/components/core/index.ts             |   1 -
 .../project/single-sidebar-project.tsx        |   8 +-
 .../[workspaceSlug]/me/profile/activity.tsx   | 207 ++++++++++-
 4 files changed, 200 insertions(+), 358 deletions(-)
 delete mode 100644 apps/app/components/core/feeds.tsx

diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
deleted file mode 100644
index 2924ec456..000000000
--- a/apps/app/components/core/feeds.tsx
+++ /dev/null
@@ -1,342 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import Link from "next/link";
-
-// icons
-import {
-  ArrowTopRightOnSquareIcon,
-  ChatBubbleLeftEllipsisIcon,
-  Squares2X2Icon,
-} from "@heroicons/react/24/outline";
-import { BlockedIcon, BlockerIcon } from "components/icons";
-import { Icon } from "components/ui";
-// helpers
-import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import RemirrorRichTextEditor from "components/rich-text-editor";
-
-const activityDetails: {
-  [key: string]: {
-    message?: string;
-    icon: JSX.Element;
-  };
-} = {
-  assignee: {
-    message: "removed the assignee",
-    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
-  },
-  assignees: {
-    message: "added a new assignee",
-    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" />,
-  },
-  blocking: {
-    message: "marked this issue is blocking",
-    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
-  },
-  cycles: {
-    message: "set the cycle to",
-    icon: <Icon iconName="contrast" className="!text-sm" aria-hidden="true" />,
-  },
-  labels: {
-    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 text-custom-text-200" 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" />,
-  },
-  estimate_point: {
-    message: "set the estimate point to",
-    icon: <Icon iconName="change_history" 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" />,
-  },
-  issue: {
-    message: "deleted the issue.",
-    icon: <Icon iconName="delete" 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",
-    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" />,
-  },
-  archived_at: {
-    message: "archived",
-    icon: <Icon iconName="archive" className="!text-sm text-custom-text-200" aria-hidden="true" />,
-  },
-};
-
-export const Feeds: React.FC<any> = ({ activities }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div>
-      <ul role="list" className="-mb-4">
-        {activities.map((activity: any, activityIdx: number) => {
-          // determines what type of action is performed
-          let action = activityDetails[activity.field as keyof typeof activityDetails]?.message;
-          if (activity.field === "labels") {
-            action = activity.new_value !== "" ? "added a new label" : "removed the label";
-          } else if (activity.field === "blocking") {
-            action =
-              activity.new_value !== ""
-                ? "marked this issue is blocking"
-                : "removed the issue from blocking";
-          } else if (activity.field === "blocks") {
-            action =
-              activity.new_value !== "" ? "marked this issue being blocked by" : "removed blocker";
-          } else if (activity.field === "target_date") {
-            action =
-              activity.new_value && activity.new_value !== ""
-                ? "set the due date to"
-                : "removed the due date";
-          } else if (activity.field === "parent") {
-            action =
-              activity.new_value && activity.new_value !== ""
-                ? "set the parent to"
-                : "removed the parent";
-          } else if (activity.field === "priority") {
-            action =
-              activity.new_value && activity.new_value !== ""
-                ? "set the priority to"
-                : "removed the priority";
-          } else if (activity.field === "description") {
-            action = "updated the";
-          } else if (activity.field === "attachment") {
-            action = `${activity.verb} the`;
-          } else if (activity.field === "link") {
-            action = `${activity.verb} the`;
-          } else if (activity.field === "archived_at") {
-            action =
-              activity.new_value && activity.new_value === "restore"
-                ? "restored the issue"
-                : "archived the issue";
-          }
-          // for values that are after the action clause
-          let value: any = activity.new_value ? activity.new_value : activity.old_value;
-          if (
-            activity.verb === "created" &&
-            activity.field !== "cycles" &&
-            activity.field !== "modules" &&
-            activity.field !== "attachment" &&
-            activity.field !== "link" &&
-            activity.field !== "estimate"
-          ) {
-            const { project, issue } = activity;
-            value = (
-              <span className="text-custom-text-200">
-                created{" "}
-                <Link href={`/${workspaceSlug}/projects/${project}/issues/${issue}`}>
-                  <a className="inline-flex items-center hover:underline">
-                    this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
-                  </a>
-                </Link>
-              </span>
-            );
-          } else if (activity.field === "state") {
-            value = activity.new_value ? addSpaceIfCamelCase(activity.new_value) : "None";
-          } else if (activity.field === "labels") {
-            let name;
-            let id = "#000000";
-            if (activity.new_value !== "") {
-              name = activity.new_value;
-              id = activity.new_identifier ? activity.new_identifier : id;
-            } else {
-              name = activity.old_value;
-              id = activity.old_identifier ? activity.old_identifier : id;
-            }
-
-            value = name;
-          } else if (activity.field === "assignees") {
-            value = activity.new_value;
-          } else if (activity.field === "target_date") {
-            const date =
-              activity.new_value && activity.new_value !== ""
-                ? activity.new_value
-                : activity.old_value;
-            value = renderShortDateWithYearFormat(date as string);
-          } else if (activity.field === "description") {
-            value = "description";
-          } else if (activity.field === "attachment") {
-            value = "attachment";
-          } else if (activity.field === "link") {
-            value = "link";
-          } else if (activity.field === "estimate_point") {
-            value = activity.new_value
-              ? activity.new_value +
-                ` Point${parseInt(activity.new_value ?? "", 10) > 1 ? "s" : ""}`
-              : "None";
-          }
-
-          if (activity.field === "comment") {
-            return (
-              <div key={activity.id} className="mt-2">
-                <div className="relative flex items-start space-x-3">
-                  <div className="relative px-1">
-                    {activity.field ? (
-                      activity.new_value === "restore" ? (
-                        <Icon iconName="history" className="text-sm text-custom-text-200" />
-                      ) : (
-                        activityDetails[activity.field as keyof typeof activityDetails]?.icon
-                      )
-                    ) : activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
-                      <img
-                        src={activity.actor_detail.avatar}
-                        alt={activity.actor_detail.first_name}
-                        height={30}
-                        width={30}
-                        className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
-                      />
-                    ) : (
-                      <div
-                        className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
-                      >
-                        {activity.actor_detail.first_name.charAt(0)}
-                      </div>
-                    )}
-
-                    <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-                      <ChatBubbleLeftEllipsisIcon
-                        className="h-3.5 w-3.5 text-custom-text-200"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div>
-                      <div className="text-xs">
-                        {activity.actor_detail.first_name}
-                        {activity.actor_detail.is_bot
-                          ? "Bot"
-                          : " " + activity.actor_detail.last_name}
-                      </div>
-                      <p className="mt-0.5 text-xs text-custom-text-200">
-                        Commented {timeAgo(activity.created_at)}
-                      </p>
-                    </div>
-                    <div className="issue-comments-section p-0">
-                      <RemirrorRichTextEditor
-                        value={
-                          activity.new_value && activity.new_value !== ""
-                            ? activity.new_value
-                            : activity.old_value
-                        }
-                        editable={false}
-                        noBorder
-                        customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            );
-          }
-
-          if ("field" in activity && activity.field !== "updated_by") {
-            return (
-              <li key={activity.id}>
-                <div className="relative pb-1">
-                  {activities.length > 1 && activityIdx !== activities.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">
-                              {activity.field ? (
-                                activityDetails[activity.field as keyof typeof activityDetails]
-                                  ?.icon
-                              ) : activity.actor_detail.avatar &&
-                                activity.actor_detail.avatar !== "" ? (
-                                <img
-                                  src={activity.actor_detail.avatar}
-                                  alt={activity.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`}
-                                >
-                                  {activity.actor_detail.first_name.charAt(0)}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="min-w-0 flex-1 py-3">
-                        <div className="text-xs text-custom-text-200">
-                          {activity.field === "archived_at" && activity.new_value !== "restore" ? (
-                            <span className="text-gray font-medium">Plane</span>
-                          ) : (
-                            <span className="text-gray font-medium">
-                              {activity.actor_detail.first_name}
-                              {activity.actor_detail.is_bot
-                                ? " Bot"
-                                : " " + activity.actor_detail.last_name}
-                            </span>
-                          )}
-                          <span> {action} </span>
-                          {activity.field !== "archived_at" && (
-                            <span className="text-xs font-medium text-custom-text-100">
-                              {" "}
-                              {value}{" "}
-                            </span>
-                          )}
-                          <span className="whitespace-nowrap">{timeAgo(activity.created_at)}</span>
-                        </div>
-                      </div>
-                    </>
-                  </div>
-                </div>
-              </li>
-            );
-          }
-        })}
-      </ul>
-    </div>
-  );
-};
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 259655ae7..6989b05c0 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -4,6 +4,5 @@ export * from "./sidebar";
 export * from "./theme";
 export * from "./views";
 export * from "./activity";
-export * from "./feeds";
 export * from "./reaction-selector";
 export * from "./image-picker-popover";
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 8545739f7..4ffa8b7ec 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -174,7 +174,11 @@ export const SingleSidebarProject: React.FC<Props> = ({
                   sidebarCollapse ? "justify-center" : `justify-between`
                 }`}
               >
-                <div className="flex items-center flex-grow w-full truncate gap-x-2">
+                <div
+                  className={`flex items-center flex-grow w-full truncate gap-x-2 ${
+                    sidebarCollapse ? "justify-center" : ""
+                  }`}
+                >
                   {project.emoji ? (
                     <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
                       {renderEmoji(project.emoji)}
@@ -262,7 +266,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
-            <Disclosure.Panel className={`space-y-2 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
+            <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
               {navigation(workspaceSlug as string, project?.id).map((item) => {
                 if (
                   (item.name === "Cycles" && !project.cycle_view) ||
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
index 4b115bf00..1b0dc005d 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -1,21 +1,43 @@
 import useSWR from "swr";
 
+import { useRouter } from "next/router";
+import Link from "next/link";
+
 // services
 import userService from "services/user.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import SettingsNavbar from "layouts/settings-navbar";
 // components
-import { Feeds } from "components/core";
+import { ActivityIcon, ActivityMessage } from "components/core";
+import RemirrorRichTextEditor from "components/rich-text-editor";
+// icons
+import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
 // ui
-import { Loader } from "components/ui";
+import { Icon, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
+// helper
+import { timeAgo } from "helpers/date-time.helper";
 
 const ProfileActivity = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
 
+  if (!userActivity) {
+    return (
+      <Loader className="space-y-5">
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+      </Loader>
+    );
+  }
+
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
@@ -34,17 +56,176 @@ const ProfileActivity = () => {
           </div>
           <SettingsNavbar profilePage />
         </div>
-        {userActivity ? (
-          userActivity.results.length > 0 ? (
-            <Feeds activities={userActivity.results} />
-          ) : null
-        ) : (
-          <Loader className="space-y-5">
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-          </Loader>
+        {userActivity && userActivity.results.length > 0 && (
+          <div>
+            <ul role="list" className="-mb-4">
+              {userActivity.results.map((activityItem: any, activityIdx: number) => {
+                if (activityItem.field === "comment") {
+                  return (
+                    <div key={activityItem.id} className="mt-2">
+                      <div className="relative flex items-start space-x-3">
+                        <div className="relative px-1">
+                          {activityItem.field ? (
+                            activityItem.new_value === "restore" && (
+                              <Icon iconName="history" className="text-sm text-custom-text-200" />
+                            )
+                          ) : activityItem.actor_detail.avatar &&
+                            activityItem.actor_detail.avatar !== "" ? (
+                            <img
+                              src={activityItem.actor_detail.avatar}
+                              alt={activityItem.actor_detail.first_name}
+                              height={30}
+                              width={30}
+                              className="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white"
+                            />
+                          ) : (
+                            <div
+                              className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
+                            >
+                              {activityItem.actor_detail.first_name.charAt(0)}
+                            </div>
+                          )}
+
+                          <span className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
+                            <ChatBubbleLeftEllipsisIcon
+                              className="h-3.5 w-3.5 text-custom-text-200"
+                              aria-hidden="true"
+                            />
+                          </span>
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div>
+                            <div className="text-xs">
+                              {activityItem.actor_detail.first_name}
+                              {activityItem.actor_detail.is_bot
+                                ? "Bot"
+                                : " " + activityItem.actor_detail.last_name}
+                            </div>
+                            <p className="mt-0.5 text-xs text-custom-text-200">
+                              Commented {timeAgo(activityItem.created_at)}
+                            </p>
+                          </div>
+                          <div className="issue-comments-section p-0">
+                            <RemirrorRichTextEditor
+                              value={
+                                activityItem.new_value && activityItem.new_value !== ""
+                                  ? activityItem.new_value
+                                  : activityItem.old_value
+                              }
+                              editable={false}
+                              noBorder
+                              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                }
+
+                const message =
+                  activityItem.verb === "created" &&
+                  activityItem.field !== "cycles" &&
+                  activityItem.field !== "modules" &&
+                  activityItem.field !== "attachment" &&
+                  activityItem.field !== "link" &&
+                  activityItem.field !== "estimate" ? (
+                    <span className="text-custom-text-200">
+                      created{" "}
+                      <Link
+                        href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}
+                      >
+                        <a className="inline-flex items-center hover:underline">
+                          this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
+                        </a>
+                      </Link>
+                    </span>
+                  ) : activityItem.field ? (
+                    <ActivityMessage activity={activityItem} showIssue />
+                  ) : (
+                    "created the issue."
+                  );
+
+                if ("field" in activityItem && activityItem.field !== "updated_by") {
+                  return (
+                    <li key={activityItem.id}>
+                      <div className="relative pb-1">
+                        {userActivity.results.length > 1 &&
+                        activityIdx !== userActivity.results.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"
+                                        />
+                                      ) : (
+                                        <ActivityIcon activity={activityItem} />
+                                      )
+                                    ) : 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>
+                            <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>
+                                ) : activityItem.actor_detail.is_bot ? (
+                                  <span className="text-gray font-medium">
+                                    {activityItem.actor_detail.first_name} Bot
+                                  </span>
+                                ) : (
+                                  <Link
+                                    href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}
+                                  >
+                                    <a className="text-gray font-medium">
+                                      {activityItem.actor_detail.first_name}{" "}
+                                      {activityItem.actor_detail.last_name}
+                                    </a>
+                                  </Link>
+                                )}{" "}
+                                {message}{" "}
+                                <span className="whitespace-nowrap">
+                                  {timeAgo(activityItem.created_at)}
+                                </span>
+                              </div>
+                            </div>
+                          </>
+                        </div>
+                      </div>
+                    </li>
+                  );
+                }
+              })}
+            </ul>
+          </div>
         )}
       </div>
     </WorkspaceAuthorizationLayout>