diff --git a/web/src/layout/Root.tsx b/web/src/layout/Root.tsx new file mode 100644 index 0000000..3699cfb --- /dev/null +++ b/web/src/layout/Root.tsx @@ -0,0 +1,13 @@ +import { Outlet } from "react-router-dom"; +import Header from "../components/Header"; + +const UserDetail: React.FC = () => { + return ( +
+
+ +
+ ); +}; + +export default UserDetail; diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 507d52a..7603d92 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -4,7 +4,6 @@ import { userService, workspaceService } from "../services"; import { useAppSelector } from "../store"; import useLoading from "../hooks/useLoading"; import Icon from "../components/Icon"; -import Header from "../components/Header"; import WorkspaceListView from "../components/WorkspaceListView"; import CreateWorkspaceDialog from "../components/CreateWorkspaceDialog"; @@ -45,32 +44,29 @@ const Home: React.FC = () => { return ( <> -
-
-
-
- Workspace List -
- {loadingState.isLoading ? ( -
- - loading -
- ) : workspaceList.length === 0 ? ( -
- -

Oops, no workspace.

- -
- ) : ( - - )} +
+
+ Workspace List
+ {loadingState.isLoading ? ( +
+ + loading +
+ ) : workspaceList.length === 0 ? ( +
+ +

Oops, no workspace.

+ +
+ ) : ( + + )}
{state.showCreateWorkspaceDialog && ( diff --git a/web/src/pages/ShortcutRedirector.tsx b/web/src/pages/ShortcutRedirector.tsx index 800cd38..b7f09ef 100644 --- a/web/src/pages/ShortcutRedirector.tsx +++ b/web/src/pages/ShortcutRedirector.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import Header from "../components/Header"; import { getShortcutWithNameAndWorkspaceName } from "../helpers/api"; import useLoading from "../hooks/useLoading"; @@ -36,11 +35,8 @@ const ShortcutRedirector: React.FC = () => { }, []); return loadingState.isLoading ? null : ( -
-
-
-

{state?.errMessage}

-
+
+

{state?.errMessage}

); }; diff --git a/web/src/pages/UserDetail.tsx b/web/src/pages/UserDetail.tsx index a5a37b0..d91517a 100644 --- a/web/src/pages/UserDetail.tsx +++ b/web/src/pages/UserDetail.tsx @@ -2,7 +2,6 @@ import { Button, Input, Tooltip } from "@mui/joy"; import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useAppSelector } from "../store"; -import Header from "../components/Header"; import { showCommonDialog } from "../components/Alert"; import { userService } from "../services"; import Icon from "../components/Icon"; @@ -61,34 +60,32 @@ const UserDetail: React.FC = () => { return ( <> -
-
-
-

{user?.displayName}

-

- Email: - {user?.email} -

-
- Password: - -
-
- OpenID: - - - - - -
+
+

{user?.displayName}

+

+ Email: + {user?.email} +

+
+ Password: + +
+
+ OpenID: + + + + +
+ {state.showChangePasswordDialog && ( { diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx index 0f58fb5..86d9d6e 100644 --- a/web/src/pages/WorkspaceDetail.tsx +++ b/web/src/pages/WorkspaceDetail.tsx @@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading"; import Icon from "../components/Icon"; import toastHelper from "../components/Toast"; import Dropdown from "../components/common/Dropdown"; -import Header from "../components/Header"; import ShortcutListView from "../components/ShortcutListView"; import MemberListView from "../components/MemberListView"; import WorkspaceSetting from "../components/WorkspaceSetting"; @@ -72,92 +71,89 @@ const WorkspaceDetail: React.FC = () => { return ( <> -
-
-
-
-
- - Shortcuts - - - Members - - - Setting - -
-
- - Add new... +
+
+
+ + Shortcuts + + + Members + + + Setting + +
+
+ + Add new... + + } + actions={ + <> + - } - actions={ - <> + {workspaceUser.role === "ADMIN" && ( - {workspaceUser.role === "ADMIN" && ( - - )} - - } - actionsClassName="!w-32" - /> -
+ )} + + } + actionsClassName="!w-32" + />
- {loadingState.isLoading ? ( -
- - loading -
- ) : ( - <> - {location.hash === "#shortcuts" && - (shortcutList.length === 0 ? ( -
- -

Oops, no shortcut.

- -
- ) : ( - - ))} - {location.hash === "#members" && } - {location.hash === "#setting" && } - - )}
+ {loadingState.isLoading ? ( +
+ + loading +
+ ) : ( + <> + {location.hash === "#shortcuts" && + (shortcutList.length === 0 ? ( +
+ +

Oops, no shortcut.

+ +
+ ) : ( + + ))} + {location.hash === "#members" && } + {location.hash === "#setting" && } + + )}
{state.showCreateShortcutDialog && ( diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx index 4725959..8ce613c 100644 --- a/web/src/router/index.tsx +++ b/web/src/router/index.tsx @@ -1,6 +1,7 @@ import { createBrowserRouter, redirect } from "react-router-dom"; import { isNullorUndefined } from "../helpers/utils"; import { userService, workspaceService } from "../services"; +import Root from "../layout/Root"; import Auth from "../pages/Auth"; import Home from "../pages/Home"; import UserDetail from "../pages/UserDetail"; @@ -14,52 +15,58 @@ const router = createBrowserRouter([ }, { path: "/", - element: , - loader: async () => { - try { - await userService.initialState(); - } catch (error) { - // do nth - } + element: , + children: [ + { + path: "", + element: , + loader: async () => { + try { + await userService.initialState(); + } catch (error) { + // do nth + } - const { user } = userService.getState(); - if (isNullorUndefined(user)) { - return redirect("/user/auth"); - } - }, - }, - { - path: "/account", - element: , - loader: async () => { - try { - await userService.initialState(); - } catch (error) { - // do nth - } + const { user } = userService.getState(); + if (isNullorUndefined(user)) { + return redirect("/user/auth"); + } + }, + }, + { + path: "/account", + element: , + loader: async () => { + try { + await userService.initialState(); + } catch (error) { + // do nth + } - const { user } = userService.getState(); - if (isNullorUndefined(user)) { - return redirect("/user/auth"); - } - }, - }, - { - path: "/:workspaceName", - element: , - loader: async () => { - try { - await userService.initialState(); - await workspaceService.fetchWorkspaceList(); - } catch (error) { - // do nth - } + const { user } = userService.getState(); + if (isNullorUndefined(user)) { + return redirect("/user/auth"); + } + }, + }, + { + path: "/:workspaceName", + element: , + loader: async () => { + try { + await userService.initialState(); + await workspaceService.fetchWorkspaceList(); + } catch (error) { + // do nth + } - const { user } = userService.getState(); - if (isNullorUndefined(user)) { - return redirect("/user/auth"); - } - }, + const { user } = userService.getState(); + if (isNullorUndefined(user)) { + return redirect("/user/auth"); + } + }, + }, + ], }, { path: "/:workspaceName/:shortcutName",