From c51501dc0a425fb8521a0514fb269ab803e6279b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 14 Sep 2022 08:11:58 +0800
Subject: [PATCH] chore: update dialogs

---
 web/src/components/CreateShortcutDialog.tsx  | 101 ++++++++++++++-----
 web/src/components/CreateWorkspaceDialog.tsx |  64 ++++++++----
 web/src/types/modules/shortcut.d.ts          |   3 +
 3 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 1df7f6d..db44e69 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -10,40 +10,70 @@ interface Props extends DialogProps {
   shortcutId?: ShortcutId;
 }
 
+interface State {
+  shortcutCreate: ShortcutCreate;
+}
+
 const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   const { destroy, workspaceId, shortcutId } = props;
-  const [name, setName] = useState<string>("");
-  const [link, setLink] = useState<string>("");
-  const [visibility, setVisibility] = useState<Visibility>("PRIVATE");
+  const [state, setState] = useState<State>({
+    shortcutCreate: {
+      workspaceId: workspaceId,
+      name: "",
+      link: "",
+      description: "",
+      visibility: "PRIVATE",
+    },
+  });
   const requestState = useLoading(false);
 
   useEffect(() => {
     if (shortcutId) {
       const shortcutTemp = shortcutService.getShortcutById(shortcutId);
       if (shortcutTemp) {
-        setName(shortcutTemp.name);
-        setLink(shortcutTemp.link);
+        setState({
+          ...state,
+          shortcutCreate: Object.assign(state.shortcutCreate, {
+            workspaceId: shortcutTemp.workspaceId,
+            name: shortcutTemp.name,
+            link: shortcutTemp.link,
+            description: shortcutTemp.description,
+            visibility: shortcutTemp.visibility,
+          }),
+        });
       }
     }
   }, [shortcutId]);
 
-  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
     const text = e.target.value as string;
-    setName(text);
+    const tempObject = {} as any;
+    tempObject[key] = text;
+
+    setState({
+      ...state,
+      shortcutCreate: Object.assign(state.shortcutCreate, tempObject),
+    });
+  };
+
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleInputChange(e, "name");
   };
 
   const handleLinkInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value as string;
-    setLink(text);
+    handleInputChange(e, "link");
+  };
+
+  const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleInputChange(e, "description");
   };
 
   const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value as string;
-    setVisibility(text as Visibility);
+    handleInputChange(e, "visibility");
   };
 
   const handleSaveBtnClick = async () => {
-    if (!name) {
+    if (!state.shortcutCreate.name) {
       toastHelper.error("Name is required");
       return;
     }
@@ -52,16 +82,13 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       if (shortcutId) {
         await shortcutService.patchShortcut({
           id: shortcutId,
-          name,
-          link,
+          name: state.shortcutCreate.name,
+          link: state.shortcutCreate.link,
+          description: state.shortcutCreate.description,
+          visibility: state.shortcutCreate.visibility,
         });
       } else {
-        await shortcutService.createShortcut({
-          workspaceId,
-          name,
-          link,
-          visibility: "PRIVATE",
-        });
+        await shortcutService.createShortcut(state.shortcutCreate);
       }
     } catch (error: any) {
       console.error(error);
@@ -81,11 +108,33 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       <div className="w-full flex flex-col justify-start items-start">
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">Name</span>
-          <input className="w-full rounded border px-2 py-2" type="text" value={name} onChange={handleNameInputChange} />
+          <input
+            className="w-full rounded border shadow-inner text-sm px-2 py-2"
+            type="text"
+            placeholder="shortcut-name"
+            value={state.shortcutCreate.name}
+            onChange={handleNameInputChange}
+          />
         </div>
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">Link</span>
-          <input className="w-full rounded border px-2 py-2" type="text" value={link} onChange={handleLinkInputChange} />
+          <input
+            className="w-full rounded border shadow-inner text-sm px-2 py-2"
+            type="text"
+            placeholder="The full URL of the page you want to get to"
+            value={state.shortcutCreate.link}
+            onChange={handleLinkInputChange}
+          />
+        </div>
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Description</span>
+          <input
+            className="w-full rounded border shadow-inner text-sm px-2 py-2"
+            type="text"
+            placeholder="Something to describe the link"
+            value={state.shortcutCreate.description}
+            onChange={handleDescriptionInputChange}
+          />
         </div>
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">Visibility</span>
@@ -96,7 +145,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               id="visibility-private"
               value="PRIVATE"
               onChange={handleVisibilityInputChange}
-              checked={visibility === "PRIVATE"}
+              checked={state.shortcutCreate.visibility === "PRIVATE"}
             />
             <label htmlFor="visibility-private" className="ml-1 mr-4">
               Only for myself
@@ -107,7 +156,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               id="visibility-workspace"
               value="WORKSPACE"
               onChange={handleVisibilityInputChange}
-              checked={visibility === "WORKSPACE"}
+              checked={state.shortcutCreate.visibility === "WORKSPACE"}
             />
             <label htmlFor="visibility-workspace" className="ml-1">
               Public in workspace
@@ -116,9 +165,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`border rounded px-3 py-2 border-green-600 bg-green-600 text-white hover:bg-green-700 ${
-              requestState.isLoading ? "opacity-80" : ""
-            }`}
+            className={`rounded px-3 py-2 shadow bg-green-600 text-white hover:bg-green-700 ${requestState.isLoading ? "opacity-80" : ""}`}
             onClick={handleSaveBtnClick}
           >
             Save
diff --git a/web/src/components/CreateWorkspaceDialog.tsx b/web/src/components/CreateWorkspaceDialog.tsx
index 1c2143d..284fded 100644
--- a/web/src/components/CreateWorkspaceDialog.tsx
+++ b/web/src/components/CreateWorkspaceDialog.tsx
@@ -9,34 +9,56 @@ interface Props extends DialogProps {
   workspaceId?: WorkspaceId;
 }
 
+interface State {
+  workspaceCreate: WorkspaceCreate;
+}
+
 const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
   const { destroy, workspaceId } = props;
-  const [name, setName] = useState<string>("");
-  const [description, setDescription] = useState<string>("");
+  const [state, setState] = useState<State>({
+    workspaceCreate: {
+      name: "",
+      description: "",
+    },
+  });
   const requestState = useLoading(false);
 
   useEffect(() => {
     if (workspaceId) {
       const workspaceTemp = workspaceService.getWorkspaceById(workspaceId);
       if (workspaceTemp) {
-        setName(workspaceTemp.name);
-        setDescription(workspaceTemp.description);
+        setState({
+          ...state,
+          workspaceCreate: Object.assign(state.workspaceCreate, {
+            name: workspaceTemp.name,
+            description: workspaceTemp.description,
+          }),
+        });
       }
     }
   }, [workspaceId]);
 
-  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, key: string) => {
     const text = e.target.value as string;
-    setName(text);
+    const tempObject = {} as any;
+    tempObject[key] = text;
+
+    setState({
+      ...state,
+      workspaceCreate: Object.assign(state.workspaceCreate, tempObject),
+    });
+  };
+
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleInputChange(e, "name");
   };
 
   const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value as string;
-    setDescription(text);
+    handleInputChange(e, "description");
   };
 
   const handleSaveBtnClick = async () => {
-    if (!name) {
+    if (!state.workspaceCreate.name) {
       toastHelper.error("Name is required");
       return;
     }
@@ -45,13 +67,11 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
       if (workspaceId) {
         await workspaceService.patchWorkspace({
           id: workspaceId,
-          name,
-          description,
+          ...state.workspaceCreate,
         });
       } else {
         await workspaceService.createWorkspace({
-          name,
-          description,
+          ...state.workspaceCreate,
         });
       }
     } catch (error: any) {
@@ -72,17 +92,25 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
       <div className="w-full flex flex-col justify-start items-start">
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">Name</span>
-          <input className="w-full rounded border px-2 py-2" type="text" value={name} onChange={handleNameInputChange} />
+          <input
+            className="w-full rounded border text-sm shadow-inner px-2 py-2"
+            type="text"
+            value={state.workspaceCreate.name}
+            onChange={handleNameInputChange}
+          />
         </div>
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">Description</span>
-          <input className="w-full rounded border px-2 py-2" type="text" value={description} onChange={handleDescriptionInputChange} />
+          <input
+            className="w-full rounded border text-sm shadow-inner px-2 py-2"
+            type="text"
+            value={state.workspaceCreate.description}
+            onChange={handleDescriptionInputChange}
+          />
         </div>
         <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`border rounded px-3 py-2 border-green-600 bg-green-600 text-white hover:bg-green-700 ${
-              requestState.isLoading ? "opacity-80" : ""
-            }`}
+            className={`rounded px-3 py-2 shadow bg-green-600 text-white hover:bg-green-700 ${requestState.isLoading ? "opacity-80" : ""}`}
             onClick={handleSaveBtnClick}
           >
             Save
diff --git a/web/src/types/modules/shortcut.d.ts b/web/src/types/modules/shortcut.d.ts
index 099ca9a..d6afbfc 100644
--- a/web/src/types/modules/shortcut.d.ts
+++ b/web/src/types/modules/shortcut.d.ts
@@ -13,6 +13,7 @@ interface Shortcut {
 
   name: string;
   link: string;
+  description: string;
   visibility: Visibility;
 }
 
@@ -21,6 +22,7 @@ interface ShortcutCreate {
 
   name: string;
   link: string;
+  description: string;
   visibility: Visibility;
 }
 
@@ -29,6 +31,7 @@ interface ShortcutPatch {
 
   name?: string;
   link?: string;
+  description?: string;
   visibility?: Visibility;
 }