From b3640699e041b7dd15d85f3509abf2bb6389bbd2 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 23 Jun 2023 12:34:02 +0800
Subject: [PATCH] feat: add shortcut tags in UI

---
 web/src/components/CreateShortcutDialog.tsx | 18 +++++++++++++++++-
 web/src/components/ShortcutListView.tsx     | 19 +++++++++++++++----
 web/src/helpers/api.ts                      |  7 +++----
 web/src/types/modules/shortcut.d.ts         |  4 ++++
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 512265a..dcfdffd 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -23,8 +23,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       link: "",
       description: "",
       visibility: "PRIVATE",
+      tags: [],
     },
   });
+  const [tag, setTag] = useState<string>("");
   const requestState = useLoading(false);
 
   useEffect(() => {
@@ -40,6 +42,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
             visibility: shortcutTemp.visibility,
           }),
         });
+        setTag(shortcutTemp.tags.join(" "));
       }
     }
   }, [shortcutId]);
@@ -67,6 +70,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     handleInputChange(e, "description");
   };
 
+  const handleTagsInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setTag(text);
+  };
+
   const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     handleInputChange(e, "visibility");
   };
@@ -85,9 +93,13 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           link: state.shortcutCreate.link,
           description: state.shortcutCreate.description,
           visibility: state.shortcutCreate.visibility,
+          tags: tag.split(" "),
         });
       } else {
-        await shortcutService.createShortcut(state.shortcutCreate);
+        await shortcutService.createShortcut({
+          ...state.shortcutCreate,
+          tags: tag.split(" "),
+        });
       }
 
       if (onConfirm) {
@@ -145,6 +157,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               onChange={handleDescriptionInputChange}
             />
           </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Tags</span>
+            <Input className="w-full" type="text" placeholder="Tags" value={tag} onChange={handleTagsInputChange} />
+          </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Visibility <span className="text-red-600">*</span>
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index d27a555..b68024e 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -58,10 +58,21 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
       <div className="w-full flex flex-col justify-start items-start">
         {shortcutList.map((shortcut) => {
           return (
-            <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
-              <div className="flex flex-row justify-start items-center mr-4">
-                <span>{shortcut.name}</span>
-                <span className="text-gray-400 text-sm ml-2">({shortcut.description})</span>
+            <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-4 py-3 mb-2 rounded-lg">
+              <div className="flex flex-col justify-start items-start mr-4">
+                <p>
+                  <span>{shortcut.name}</span>
+                  {shortcut.description && <span className="text-gray-500 ml-1">({shortcut.description})</span>}
+                </p>
+                <div className="space-x-2">
+                  {shortcut.tags.map((tag) => {
+                    return (
+                      <span key={tag} className="text-gray-400 text-sm font-mono">
+                        #{tag}
+                      </span>
+                    );
+                  })}
+                </div>
               </div>
               <div className="flex flex-row justify-end items-center">
                 <span className="w-16 truncate mr-2 text-gray-600">{shortcut.creator.nickname}</span>
diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts
index 0d720c8..8fcd0d0 100644
--- a/web/src/helpers/api.ts
+++ b/web/src/helpers/api.ts
@@ -47,13 +47,12 @@ export function getShortcutList(shortcutFind?: ShortcutFind) {
   if (shortcutFind?.creatorId) {
     queryList.push(`creatorId=${shortcutFind.creatorId}`);
   }
+  if (shortcutFind?.tag) {
+    queryList.push(`tag=${shortcutFind.tag}`);
+  }
   return axios.get<Shortcut[]>(`/api/v1/shortcut?${queryList.join("&")}`);
 }
 
-export function getShortcutWithNameAndWorkspaceName(workspaceName: string, shortcutName: string) {
-  return axios.get<Shortcut>(`/api/v1/workspace/${workspaceName}/shortcut/${shortcutName}`);
-}
-
 export function createShortcut(shortcutCreate: ShortcutCreate) {
   return axios.post<Shortcut>("/api/v1/shortcut", shortcutCreate);
 }
diff --git a/web/src/types/modules/shortcut.d.ts b/web/src/types/modules/shortcut.d.ts
index 9a3bc07..6cf782e 100644
--- a/web/src/types/modules/shortcut.d.ts
+++ b/web/src/types/modules/shortcut.d.ts
@@ -15,6 +15,7 @@ interface Shortcut {
   link: string;
   description: string;
   visibility: Visibility;
+  tags: string[];
 }
 
 interface ShortcutCreate {
@@ -22,6 +23,7 @@ interface ShortcutCreate {
   link: string;
   description: string;
   visibility: Visibility;
+  tags: string[];
 }
 
 interface ShortcutPatch {
@@ -31,8 +33,10 @@ interface ShortcutPatch {
   link?: string;
   description?: string;
   visibility?: Visibility;
+  tags?: string[];
 }
 
 interface ShortcutFind {
   creatorId?: UserId;
+  tag?: string;
 }