From 8c48ec06791742e0c35819d26f207c850748a742 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 24 Jun 2023 23:20:25 +0800
Subject: [PATCH] chore: update shortcut view

---
 web/src/components/ShortcutListView.tsx       | 101 +--------------
 web/src/components/ShortcutView.tsx           | 116 ++++++++++++++++++
 web/src/components/setting/AccountSection.tsx |  13 +-
 3 files changed, 125 insertions(+), 105 deletions(-)
 create mode 100644 web/src/components/ShortcutView.tsx

diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index 12f3190..1537612 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -1,14 +1,6 @@
-import { Tooltip } from "@mui/joy";
-import copy from "copy-to-clipboard";
 import { useState } from "react";
-import { toast } from "react-hot-toast";
-import { shortcutService } from "../services";
-import { useAppSelector } from "../stores";
-import { absolutifyLink } from "../helpers/utils";
-import { showCommonDialog } from "./Alert";
-import Icon from "./Icon";
-import Dropdown from "./common/Dropdown";
 import CreateShortcutDialog from "./CreateShortcutDialog";
+import ShortcutView from "./ShortcutView";
 
 interface Props {
   shortcutList: Shortcut[];
@@ -16,102 +8,13 @@ interface Props {
 
 const ShortcutListView: React.FC<Props> = (props: Props) => {
   const { shortcutList } = props;
-  const user = useAppSelector((state) => state.user.user as User);
   const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
 
-  const havePermission = (shortcut: Shortcut) => {
-    return user.role === "ADMIN" || shortcut.creatorId === user.id;
-  };
-
-  const handleCopyButtonClick = (shortcut: Shortcut) => {
-    copy(absolutifyLink(`/s/${shortcut.name}`));
-    toast.success("Shortcut link copied to clipboard.");
-  };
-
-  const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
-    showCommonDialog({
-      title: "Delete Shortcut",
-      content: `Are you sure to delete shortcut \`${shortcut.name}\` in this workspace?`,
-      style: "danger",
-      onConfirm: async () => {
-        await shortcutService.deleteShortcutById(shortcut.id);
-      },
-    });
-  };
-
   return (
     <>
       <div className="w-full flex flex-col justify-start items-start">
         {shortcutList.map((shortcut) => {
-          return (
-            <div key={shortcut.id} className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg">
-              <div className="w-full flex flex-row justify-between items-center">
-                <p className="text-lg mr-1 shrink-0">
-                  <span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
-                    <span className="text-gray-400">o/</span>
-                    {shortcut.name}
-                  </span>
-                </p>
-                <div className="flex flex-row justify-end items-center space-x-2">
-                  <Tooltip title="Copy link" variant="solid" placement="top">
-                    <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
-                      <Icon.Copy className="w-5 h-auto text-gray-600" />
-                    </button>
-                  </Tooltip>
-                  <Tooltip title="Go to link" variant="solid" placement="top">
-                    <a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
-                      <Icon.ExternalLink className="w-5 h-auto text-gray-600" />
-                    </a>
-                  </Tooltip>
-                  <Dropdown
-                    actionsClassName="!w-24"
-                    actions={
-                      <>
-                        <button
-                          disabled={!havePermission(shortcut)}
-                          className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                          onClick={() => setEditingShortcutId(shortcut.id)}
-                        >
-                          Edit
-                        </button>
-                        <button
-                          disabled={!havePermission(shortcut)}
-                          className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                          onClick={() => {
-                            handleDeleteShortcutButtonClick(shortcut);
-                          }}
-                        >
-                          Delete
-                        </button>
-                      </>
-                    }
-                  ></Dropdown>
-                </div>
-              </div>
-              {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
-              {/* TODO(steven): display shortcut's tags later */}
-              {shortcut.tags.length > 0 && false && (
-                <div className="mt-2 flex flex-row justify-start items-start gap-2">
-                  <Icon.Tag className="text-gray-400 w-4 h-auto" />
-                  {shortcut.tags.map((tag) => {
-                    return (
-                      <span key={tag} className="text-gray-400 text-sm font-mono leading-4">
-                        #{tag}
-                      </span>
-                    );
-                  })}
-                </div>
-              )}
-              <div className="w-full flex mt-2">
-                <Tooltip title="View count" variant="solid" placement="top">
-                  <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
-                    <Icon.Eye className="w-4 h-auto mr-1" />
-                    {shortcut.view}
-                  </div>
-                </Tooltip>
-              </div>
-            </div>
-          );
+          return <ShortcutView key={shortcut.id} shortcut={shortcut} handleEdit={() => setEditingShortcutId(shortcut.id)} />;
         })}
       </div>
 
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
new file mode 100644
index 0000000..4502ede
--- /dev/null
+++ b/web/src/components/ShortcutView.tsx
@@ -0,0 +1,116 @@
+import copy from "copy-to-clipboard";
+import { absolutifyLink } from "../helpers/utils";
+import toast from "react-hot-toast";
+import { showCommonDialog } from "./Alert";
+import { shortcutService } from "../services";
+import { Tooltip } from "@mui/joy";
+import Icon from "./Icon";
+import Dropdown from "./common/Dropdown";
+import { useAppSelector } from "../stores";
+
+interface Props {
+  shortcut: Shortcut;
+  handleEdit: () => void;
+}
+
+const ShortcutView = (props: Props) => {
+  const { shortcut, handleEdit } = props;
+  const user = useAppSelector((state) => state.user.user as User);
+
+  const havePermission = (shortcut: Shortcut) => {
+    return user.role === "ADMIN" || shortcut.creatorId === user.id;
+  };
+
+  const handleCopyButtonClick = (shortcut: Shortcut) => {
+    copy(absolutifyLink(`/s/${shortcut.name}`));
+    toast.success("Shortcut link copied to clipboard.");
+  };
+
+  const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
+    showCommonDialog({
+      title: "Delete Shortcut",
+      content: `Are you sure to delete shortcut \`${shortcut.name}\` in this workspace?`,
+      style: "danger",
+      onConfirm: async () => {
+        await shortcutService.deleteShortcutById(shortcut.id);
+      },
+    });
+  };
+
+  return (
+    <div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg">
+      <div className="w-full flex flex-row justify-between items-center">
+        <p className="text-lg mr-1 shrink-0">
+          <span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
+            <span className="text-gray-400">o/</span>
+            {shortcut.name}
+          </span>
+        </p>
+        <div className="flex flex-row justify-end items-center space-x-2">
+          <Tooltip title="Copy link" variant="solid" placement="top" arrow>
+            <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
+              <Icon.Copy className="w-5 h-auto text-gray-600" />
+            </button>
+          </Tooltip>
+          <Tooltip title="Go to link" variant="solid" placement="top" arrow>
+            <a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
+              <Icon.ExternalLink className="w-5 h-auto text-gray-600" />
+            </a>
+          </Tooltip>
+          <Dropdown
+            actionsClassName="!w-24"
+            actions={
+              <>
+                <button
+                  disabled={!havePermission(shortcut)}
+                  className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                  onClick={() => handleEdit()}
+                >
+                  Edit
+                </button>
+                <button
+                  disabled={!havePermission(shortcut)}
+                  className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                  onClick={() => {
+                    handleDeleteShortcutButtonClick(shortcut);
+                  }}
+                >
+                  Delete
+                </button>
+              </>
+            }
+          ></Dropdown>
+        </div>
+      </div>
+      {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
+      {shortcut.tags.length > 0 && false && (
+        <div className="mt-2 flex flex-row justify-start items-start gap-2">
+          <Icon.Tag className="text-gray-400 w-4 h-auto" />
+          {shortcut.tags.map((tag) => {
+            return (
+              <span key={tag} className="text-gray-400 text-sm font-mono leading-4">
+                #{tag}
+              </span>
+            );
+          })}
+        </div>
+      )}
+      <div className="w-full flex mt-2 gap-2">
+        <Tooltip title="Creator" variant="solid" placement="top" arrow>
+          <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
+            <Icon.User className="w-4 h-auto mr-1" />
+            {shortcut.creator.nickname}
+          </div>
+        </Tooltip>
+        <Tooltip title="View count" variant="solid" placement="top" arrow>
+          <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
+            <Icon.Eye className="w-4 h-auto mr-1" />
+            {shortcut.view}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default ShortcutView;
diff --git a/web/src/components/setting/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
index b3242a7..24bc56d 100644
--- a/web/src/components/setting/AccountSection.tsx
+++ b/web/src/components/setting/AccountSection.tsx
@@ -8,20 +8,21 @@ const AccountSection: React.FC = () => {
   const user = useAppSelector((state) => state.user).user as User;
   const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
   const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
+  const isAdmin = user.role === "ADMIN";
 
   return (
     <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-2">
-        <p className="text-gray-400 mb-2">Account</p>
-        <p className="flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Nickname: </span>
-          {user.nickname}
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start gap-y-2">
+        <p className="text-gray-400">Account</p>
+        <p className="flex flex-row justify-start items-center mt-2">
+          <span className="text-xl font-medium">{user.nickname}</span>
+          {isAdmin && <span className="ml-2 bg-blue-600 text-white px-3 leading-7 text-sm rounded-full">Admin</span>}
         </p>
         <p className="flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>
           {user.email}
         </p>
-        <div className="flex flex-row justify-start items-center gap-2">
+        <div className="flex flex-row justify-start items-center gap-2 mt-2">
           <Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>
             Edit
           </Button>