From 7d90b4787572a7cd2f14239b01603ec743c26c68 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 4 Jul 2023 20:53:07 +0800
Subject: [PATCH] chore: update shortcut view

---
 web/src/components/CreateShortcutDialog.tsx | 43 +++++----------------
 web/src/components/ShortcutListView.tsx     |  2 +
 web/src/components/ShortcutView.tsx         | 11 +++++-
 web/src/pages/Home.tsx                      |  3 +-
 4 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 53aa90e..f41ecff 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { toast } from "react-hot-toast";
 import { shortcutService } from "../services";
 import useLoading from "../hooks/useLoading";
-import { showCommonDialog } from "./Alert";
 import Icon from "./Icon";
 
 interface Props {
@@ -97,22 +96,6 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleDeleteShortcutButtonClick = () => {
-    if (!shortcutId) {
-      return;
-    }
-
-    showCommonDialog({
-      title: "Delete Shortcut",
-      content: `Are you sure to delete shortcut \`${state.shortcutCreate.name}\`? You can not undo this action.`,
-      style: "danger",
-      onConfirm: async () => {
-        await shortcutService.deleteShortcutById(shortcutId);
-        onClose();
-      },
-    });
-  };
-
   const handleSaveBtnClick = async () => {
     if (!state.shortcutCreate.name) {
       toast.error("Name is required");
@@ -208,23 +191,17 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                 ))}
               </RadioGroup>
             </div>
+            <p className="mt-3 text-sm text-gray-500 w-full bg-gray-100 border border-gray-200 px-2 py-1 rounded-md">
+              {t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}
+            </p>
           </div>
-          <div className="w-full flex flex-row justify-between items-center mt-8 space-x-2">
-            <div>
-              {isEditing && (
-                <Button color="danger" variant="plain" onClick={handleDeleteShortcutButtonClick}>
-                  Delete
-                </Button>
-              )}
-            </div>
-            <div className="space-x-2">
-              <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-                Cancel
-              </Button>
-              <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-                Save
-              </Button>
-            </div>
+          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+              Cancel
+            </Button>
+            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+              Save
+            </Button>
           </div>
         </div>
       </ModalDialog>
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index 1537612..50e923a 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -18,6 +18,8 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
         })}
       </div>
 
+      <p className="w-full text-center text-gray-400 text-sm mt-2 mb-4 italic">Total {shortcutList.length} data</p>
+
       {editingShortcutId && (
         <CreateShortcutDialog
           shortcutId={editingShortcutId}
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 9883558..a6c926e 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -34,6 +34,10 @@ const ShortcutView = (props: Props) => {
     });
   }, [shortcut.link]);
 
+  const gotoShortcutLink = () => {
+    window.open(shortifyLink, "_blank");
+  };
+
   const handleCopyButtonClick = () => {
     copy(shortifyLink);
     toast.success("Shortcut link copied to clipboard.");
@@ -61,10 +65,13 @@ const ShortcutView = (props: Props) => {
               <Icon.Globe2 className="w-5 h-auto text-gray-500" />
             )}
           </div>
-          <button className="items-center cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick()}>
+          <button className="items-center cursor-pointer hover:opacity-80 hover:underline" onClick={() => gotoShortcutLink()}>
             <span className="text-gray-400">s/</span>
             {shortcut.name}
           </button>
+          <button className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick()}>
+            <Icon.Clipboard className="w-4 h-auto text-gray-500" />
+          </button>
           <a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortifyLink}>
             <Icon.ExternalLink className="w-4 h-auto text-gray-500" />
           </a>
@@ -123,7 +130,7 @@ const ShortcutView = (props: Props) => {
         </Tooltip>
         <Tooltip title="View count" variant="solid" placement="top" arrow>
           <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
-            <Icon.Eye className="w-4 h-auto mr-1" />
+            <Icon.BarChart2 className="w-4 h-auto mr-1" />
             {shortcut.view} visits
           </div>
         </Tooltip>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 533451c..607f831 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -65,7 +65,8 @@ const Home: React.FC = () => {
             <Icon.PackageOpen className="w-12 h-auto text-gray-400" />
             <p className="mt-4 mb-2">No shortcuts found.</p>
             <Button size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
-              Create one
+              <Icon.Plus className="w-5 h-auto mr-1" />
+              Create
             </Button>
           </div>
         ) : (