feat: install mui

web/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { userService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
@@ -6,11 +6,18 @@ import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import Header from "../components/Header";
 import WorkspaceListView from "../components/WorkspaceListView";
-import showCreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
+import CreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
+
+interface State {
+  showCreateWorkspaceDialog: boolean;
+}
 
 const Home: React.FC = () => {
   const navigate = useNavigate();
   const { workspaceList } = useAppSelector((state) => state.workspace);
+  const [state, setState] = useState<State>({
+    showCreateWorkspaceDialog: false,
+  });
   const loadingState = useLoading();
 
   useEffect(() => {
@@ -24,29 +31,49 @@ const Home: React.FC = () => {
     });
   }, []);
 
+  const handleCreateWorkspaceButtonClick = () => {
+    setState({
+      ...state,
+      showCreateWorkspaceDialog: true,
+    });
+  };
+
   return (
-    <div className="w-full h-full flex flex-col justify-start items-start">
-      <Header />
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-        <div className="mb-4 w-full flex flex-row justify-between items-center">
-          <span className="font-mono text-gray-400">Workspace List</span>
-          <button
-            className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
-            onClick={() => showCreateWorkspaceDialog()}
-          >
-            <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
-          </button>
-        </div>
-        {loadingState.isLoading ? (
-          <div className="py-4 w-full flex flex-row justify-center items-center">
-            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
-            loading
+    <>
+      <div className="w-full h-full flex flex-col justify-start items-start">
+        <Header />
+        <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
+          <div className="mb-4 w-full flex flex-row justify-between items-center">
+            <span className="font-mono text-gray-400">Workspace List</span>
+            <button
+              className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
+              onClick={handleCreateWorkspaceButtonClick}
+            >
+              <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
+            </button>
           </div>
-        ) : (
-          <WorkspaceListView workspaceList={workspaceList} />
-        )}
+          {loadingState.isLoading ? (
+            <div className="py-4 w-full flex flex-row justify-center items-center">
+              <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+              loading
+            </div>
+          ) : (
+            <WorkspaceListView workspaceList={workspaceList} />
+          )}
+        </div>
       </div>
-    </div>
+
+      {state.showCreateWorkspaceDialog && (
+        <CreateWorkspaceDialog
+          onClose={() => {
+            setState({
+              ...state,
+              showCreateWorkspaceDialog: false,
+            });
+          }}
+        />
+      )}
+    </>
   );
 };
 

web/src/pages/UserDetail.tsx

@@ -1,17 +1,24 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
 import Header from "../components/Header";
-import { showCommonDialog } from "../components/Dialog/CommonDialog";
+import { showCommonDialog } from "../components/Alert";
 import { userService } from "../services";
 import Icon from "../components/Icon";
 import copy from "copy-to-clipboard";
 import toastHelper from "../components/Toast";
-import showChangePasswordDialog from "../components/ChangePasswordDialog";
+import ChangePasswordDialog from "../components/ChangePasswordDialog";
+
+interface State {
+  showChangePasswordDialog: boolean;
+}
 
 const UserDetail: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAppSelector((state) => state.user);
+  const [state, setState] = useState<State>({
+    showChangePasswordDialog: false,
+  });
 
   useEffect(() => {
     if (!userService.getState().user) {
@@ -21,7 +28,10 @@ const UserDetail: React.FC = () => {
   }, []);
 
   const handleChangePasswordBtnClick = async () => {
-    showChangePasswordDialog();
+    setState({
+      ...state,
+      showChangePasswordDialog: true,
+    });
   };
 
   const handleCopyOpenIdBtnClick = async () => {
@@ -49,35 +59,47 @@ const UserDetail: React.FC = () => {
   };
 
   return (
-    <div className="w-full h-full flex flex-col justify-start items-start">
-      <Header />
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
-        <p className="text-3xl mt-2 mb-4">{user?.name}</p>
-        <p className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Email: </span>
-          {user?.email}
-        </p>
-        <p className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Password: </span>
-          <button className="border rounded-md px-2 leading-8 hover:shadow" onClick={handleChangePasswordBtnClick}>
-            Change
-          </button>
-        </p>
-        <p className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
-          <input type="text" value={user?.openId} readOnly className="border shrink rounded-md px-3 pr-5 shadow-inner truncate" />
-          <button className="-ml-6 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
-            <Icon.Clipboard className="w-4 h-auto" />
-          </button>
-          <button
-            className="border ml-4 rounded-md px-2 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
-            onClick={handleResetOpenIdBtnClick}
-          >
-            Reset
-          </button>
-        </p>
+    <>
+      <div className="w-full h-full flex flex-col justify-start items-start">
+        <Header />
+        <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+          <p className="text-3xl mt-2 mb-4">{user?.name}</p>
+          <p className="leading-8 flex flex-row justify-start items-center">
+            <span className="mr-3 text-gray-500 font-mono">Email: </span>
+            {user?.email}
+          </p>
+          <p className="leading-8 flex flex-row justify-start items-center">
+            <span className="mr-3 text-gray-500 font-mono">Password: </span>
+            <button className="border rounded-md px-2 leading-8 hover:shadow" onClick={handleChangePasswordBtnClick}>
+              Change
+            </button>
+          </p>
+          <p className="leading-8 flex flex-row justify-start items-center">
+            <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
+            <input type="text" value={user?.openId} readOnly className="border shrink rounded-md px-3 pr-5 shadow-inner truncate" />
+            <button className="-ml-6 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
+              <Icon.Clipboard className="w-4 h-auto" />
+            </button>
+            <button
+              className="border ml-4 rounded-md px-2 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
+              onClick={handleResetOpenIdBtnClick}
+            >
+              Reset
+            </button>
+          </p>
+        </div>
       </div>
-    </div>
+      {state.showChangePasswordDialog && (
+        <ChangePasswordDialog
+          onClose={() => {
+            setState({
+              ...state,
+              showChangePasswordDialog: false,
+            });
+          }}
+        />
+      )}
+    </>
   );
 };
 

web/src/pages/WorkspaceDetail.tsx

@@ -7,17 +7,19 @@ import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
 import Dropdown from "../components/common/Dropdown";
-import showCreateShortcutDialog from "../components/CreateShortcutDialog";
-import showUpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
 import Header from "../components/Header";
 import ShortcutListView from "../components/ShortcutListView";
 import MemberListView from "../components/MemberListView";
 import WorkspaceSetting from "../components/WorkspaceSetting";
+import CreateShortcutDialog from "../components/CreateShortcutDialog";
+import UpsertWorkspaceUserDialog from "../components/UpsertWorkspaceUserDialog";
 
 interface State {
   workspace: Workspace;
   workspaceUser: WorkspaceUser;
   userList: WorkspaceUser[];
+  showCreateShortcutDialog: boolean;
+  showUpsertWorkspaceUserDialog: boolean;
 }
 
 const WorkspaceDetail: React.FC = () => {
@@ -30,6 +32,8 @@ const WorkspaceDetail: React.FC = () => {
     workspace: unknownWorkspace,
     workspaceUser: unknownWorkspaceUser,
     userList: [],
+    showCreateShortcutDialog: false,
+    showUpsertWorkspaceUserDialog: false,
   });
   const loadingState = useLoading();
 
@@ -53,6 +57,7 @@ const WorkspaceDetail: React.FC = () => {
     ])
       .then(([, workspaceUser, workspaceUserList]) => {
         setState({
+          ...state,
           workspace,
           workspaceUser,
           userList: workspaceUserList,
@@ -70,86 +75,130 @@ const WorkspaceDetail: React.FC = () => {
   }, [location.hash]);
 
   const handleCreateShortcutButtonClick = () => {
-    showCreateShortcutDialog(state.workspace.id, undefined, async () => {
-      if (location.hash !== "#shortcuts") {
-        navigate("#shortcuts");
-      }
+    setState({
+      ...state,
+      showCreateShortcutDialog: true,
     });
   };
 
   const handleUpsertWorkspaceMemberButtonClick = () => {
-    showUpsertWorkspaceUserDialog(state.workspace.id, async () => {
-      const workspaceUserList = await workspaceService.getWorkspaceUserList(state.workspace.id);
-      setState({
-        ...state,
-        userList: workspaceUserList,
-      });
-
-      if (location.hash !== "#members") {
-        navigate("#members");
-      }
+    setState({
+      ...state,
+      showUpsertWorkspaceUserDialog: true,
     });
   };
 
   return (
-    <div className="w-full h-full flex flex-col justify-start items-start">
-      <Header />
-      <div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-between items-center mt-4 mb-4">
-          <div className="flex flex-row justify-start items-center space-x-4">
-            <NavLink to="#shortcuts" className={`${location.hash === "#shortcuts" && "underline"}`}>
-              Shortcuts
-            </NavLink>
-            <NavLink to="#members" className={`${location.hash === "#members" && "underline"}`}>
-              Members
-            </NavLink>
-            <NavLink to="#setting" className={`${location.hash === "#setting" && "underline"}`}>
-              Setting
-            </NavLink>
-          </div>
-          <div>
-            <Dropdown
-              trigger={
-                <button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
-                  <Icon.Plus className="w-4 h-auto mr-1" /> Add new...
-                </button>
-              }
-              actions={
-                <>
-                  <button
-                    className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                    onClick={handleCreateShortcutButtonClick}
-                  >
-                    Shortcut
+    <>
+      <div className="w-full h-full flex flex-col justify-start items-start">
+        <Header />
+        <div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
+          <div className="w-full flex flex-row justify-between items-center mt-4 mb-4">
+            <div className="flex flex-row justify-start items-center space-x-4">
+              <NavLink to="#shortcuts" className={`${location.hash === "#shortcuts" && "underline"}`}>
+                Shortcuts
+              </NavLink>
+              <NavLink to="#members" className={`${location.hash === "#members" && "underline"}`}>
+                Members
+              </NavLink>
+              <NavLink to="#setting" className={`${location.hash === "#setting" && "underline"}`}>
+                Setting
+              </NavLink>
+            </div>
+            <div>
+              <Dropdown
+                trigger={
+                  <button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
+                    <Icon.Plus className="w-4 h-auto mr-1" /> Add new...
                   </button>
-                  <button
-                    className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                    onClick={handleUpsertWorkspaceMemberButtonClick}
-                  >
-                    Member
-                  </button>
-                </>
-              }
-              actionsClassName="!w-32"
-            />
+                }
+                actions={
+                  <>
+                    <button
+                      className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
+                      onClick={handleCreateShortcutButtonClick}
+                    >
+                      Shortcut
+                    </button>
+                    <button
+                      className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
+                      onClick={handleUpsertWorkspaceMemberButtonClick}
+                    >
+                      Member
+                    </button>
+                  </>
+                }
+                actionsClassName="!w-32"
+              />
+            </div>
           </div>
+          {loadingState.isLoading ? (
+            <div className="py-4 w-full flex flex-row justify-center items-center">
+              <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+              loading
+            </div>
+          ) : (
+            <>
+              {location.hash === "#shortcuts" && <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />}
+              {location.hash === "#members" && (
+                <MemberListView
+                  key={Date.now()}
+                  workspaceId={state.workspace.id}
+                  workspaceUser={state.workspaceUser}
+                  userList={state.userList}
+                />
+              )}
+              {location.hash === "#setting" && <WorkspaceSetting workspaceId={state.workspace.id} />}
+            </>
+          )}
         </div>
-        {loadingState.isLoading ? (
-          <div className="py-4 w-full flex flex-row justify-center items-center">
-            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
-            loading
-          </div>
-        ) : (
-          <>
-            {location.hash === "#shortcuts" && <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />}
-            {location.hash === "#members" && (
-              <MemberListView workspaceId={state.workspace.id} workspaceUser={state.workspaceUser} userList={state.userList} />
-            )}
-            {location.hash === "#setting" && <WorkspaceSetting workspaceId={state.workspace.id} />}
-          </>
-        )}
       </div>
-    </div>
+
+      {state.showCreateShortcutDialog && (
+        <CreateShortcutDialog
+          workspaceId={state.workspace.id}
+          onClose={() => {
+            setState({
+              ...state,
+              showCreateShortcutDialog: false,
+            });
+          }}
+          onConfirm={() => {
+            setState({
+              ...state,
+              showCreateShortcutDialog: false,
+            });
+            if (location.hash !== "#shortcuts") {
+              navigate("#shortcuts");
+            }
+          }}
+        />
+      )}
+
+      {state.showUpsertWorkspaceUserDialog && (
+        <UpsertWorkspaceUserDialog
+          workspaceId={state.workspace.id}
+          onClose={() => {
+            setState({
+              ...state,
+              showUpsertWorkspaceUserDialog: false,
+            });
+          }}
+          onConfirm={async () => {
+            const workspaceUserList = await workspaceService.getWorkspaceUserList(state.workspace.id);
+            setState({
+              ...state,
+              userList: workspaceUserList,
+              showUpsertWorkspaceUserDialog: false,
+            });
+
+            if (location.hash !== "#members") {
+              navigate("#members");
+            }
+          }}
+        />
+      )}
+    </>
   );
 };