aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update root layout

Browse Source
This commit is contained in:
Steven 2023-03-15 07:54:48 +08:00
parent 77b3f03f5a
commit c7d345f21d
6 changed files with 187 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/layout/Root.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Outlet } from "react-router-dom";
import Header from "../components/Header";
const UserDetail: React.FC = () => {
return (
<div className="w-full h-full flex flex-col justify-start items-start">
<Header />
<Outlet />
</div>
);
};
export default UserDetail;

48
web/src/pages/Home.tsx
View File

@ -4,7 +4,6 @@ import { userService, workspaceService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import Icon from "../components/Icon"; import Icon from "../components/Icon";
import Header from "../components/Header";
import WorkspaceListView from "../components/WorkspaceListView"; import WorkspaceListView from "../components/WorkspaceListView";
import CreateWorkspaceDialog from "../components/CreateWorkspaceDialog"; import CreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
@ -45,32 +44,29 @@ const Home: React.FC = () => {
return ( return (
<> <>
<div className="w-full h-full flex flex-col justify-start items-start"> <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<Header /> <div className="mb-4 w-full flex flex-row justify-between items-center">
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start"> <span className="font-mono text-gray-400">Workspace List</span>
<div className="mb-4 w-full flex flex-row justify-between items-center">
<span className="font-mono text-gray-400">Workspace List</span>
</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>
) : workspaceList.length === 0 ? (
<div className="w-full flex flex-col justify-center items-center">
<Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
<p className="mt-4 text-xl text-gray-600">Oops, no workspace.</p>
<button
className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={handleCreateWorkspaceButtonClick}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
</button>
</div>
) : (
<WorkspaceListView workspaceList={workspaceList} />
)}
</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>
) : workspaceList.length === 0 ? (
<div className="w-full flex flex-col justify-center items-center">
<Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
<p className="mt-4 text-xl text-gray-600">Oops, no workspace.</p>
<button
className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={handleCreateWorkspaceButtonClick}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
</button>
</div>
) : (
<WorkspaceListView workspaceList={workspaceList} />
)}
</div> </div>
{state.showCreateWorkspaceDialog && ( {state.showCreateWorkspaceDialog && (

8
web/src/pages/ShortcutRedirector.tsx
View File

@ -1,6 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Header from "../components/Header";
import { getShortcutWithNameAndWorkspaceName } from "../helpers/api"; import { getShortcutWithNameAndWorkspaceName } from "../helpers/api";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
@ -36,11 +35,8 @@ const ShortcutRedirector: React.FC = () => {
}, []); }, []);
return loadingState.isLoading ? null : ( return loadingState.isLoading ? null : (
<div className="w-full h-full flex flex-col justify-start items-start"> <div className="w-full pt-24 text-center font-mono text-xl">
<Header /> <p>{state?.errMessage}</p>
<div className="w-full pt-24 text-center font-mono text-xl">
<p>{state?.errMessage}</p>
</div>
</div> </div>
); );
}; };

51
web/src/pages/UserDetail.tsx
View File

@ -2,7 +2,6 @@ import { Button, Input, Tooltip } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import Header from "../components/Header";
import { showCommonDialog } from "../components/Alert"; import { showCommonDialog } from "../components/Alert";
import { userService } from "../services"; import { userService } from "../services";
import Icon from "../components/Icon"; import Icon from "../components/Icon";
@ -61,34 +60,32 @@ const UserDetail: React.FC = () => {
return ( return (
<> <>
<div className="w-full h-full flex flex-col justify-start items-start"> <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
<Header /> <p className="text-3xl mt-2 mb-4">{user?.displayName}</p>
<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="leading-8 flex flex-row justify-start items-center">
<p className="text-3xl mt-2 mb-4">{user?.displayName}</p> <span className="mr-3 text-gray-500 font-mono">Email: </span>
<p className="leading-8 flex flex-row justify-start items-center"> {user?.email}
<span className="mr-3 text-gray-500 font-mono">Email: </span> </p>
{user?.email} <div className="leading-8 flex flex-row justify-start items-center">
</p> <span className="mr-3 text-gray-500 font-mono">Password: </span>
<div className="leading-8 flex flex-row justify-start items-center"> <Button variant="soft" onClick={handleChangePasswordBtnClick}>
<span className="mr-3 text-gray-500 font-mono">Password: </span> Change
<Button variant="soft" onClick={handleChangePasswordBtnClick}> </Button>
Change </div>
</Button> <div className="leading-8 flex flex-row justify-start items-center">
</div> <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
<div className="leading-8 flex flex-row justify-start items-center"> <Input type="text" className="w-48" value={user?.openId} readOnly />
<span className="mr-3 text-gray-500 font-mono">OpenID:</span> <Tooltip title="Copy OpenID" variant="solid" placement="top">
<Input type="text" className="w-48" value={user?.openId} readOnly /> <button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
<Tooltip title="Copy OpenID" variant="solid" placement="top"> <Icon.Clipboard className="w-4 h-auto" />
<button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}> </button>
<Icon.Clipboard className="w-4 h-auto" /> </Tooltip>
</button> <Button className="!ml-6" variant="soft" color="warning" onClick={handleResetOpenIdBtnClick}>
</Tooltip> Reset
<Button className="!ml-6" variant="soft" color="warning" onClick={handleResetOpenIdBtnClick}> </Button>
Reset
</Button>
</div>
</div> </div>
</div> </div>
{state.showChangePasswordDialog && ( {state.showChangePasswordDialog && (
<ChangePasswordDialog <ChangePasswordDialog
onClose={() => { onClose={() => {

156
web/src/pages/WorkspaceDetail.tsx
View File

@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
import Icon from "../components/Icon"; import Icon from "../components/Icon";
import toastHelper from "../components/Toast"; import toastHelper from "../components/Toast";
import Dropdown from "../components/common/Dropdown"; import Dropdown from "../components/common/Dropdown";
import Header from "../components/Header";
import ShortcutListView from "../components/ShortcutListView"; import ShortcutListView from "../components/ShortcutListView";
import MemberListView from "../components/MemberListView"; import MemberListView from "../components/MemberListView";
import WorkspaceSetting from "../components/WorkspaceSetting"; import WorkspaceSetting from "../components/WorkspaceSetting";
@ -72,92 +71,89 @@ const WorkspaceDetail: React.FC = () => {
return ( return (
<> <>
<div className="w-full h-full flex flex-col justify-start items-start"> <div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
<Header /> <div className="w-full flex flex-row justify-between items-center mt-4 mb-4">
<div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start"> <div className="flex flex-row justify-start items-center space-x-3 sm:space-x-4">
<div className="w-full flex flex-row justify-between items-center mt-4 mb-4"> <NavLink
<div className="flex flex-row justify-start items-center space-x-3 sm:space-x-4"> to="#shortcuts"
<NavLink className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
to="#shortcuts" location.hash === "#shortcuts" && "!border-b-black text-black"
className={`py-1 text-gray-400 border-b-2 border-b-transparent ${ }`}
location.hash === "#shortcuts" && "!border-b-black text-black" >
}`} Shortcuts
> </NavLink>
Shortcuts <NavLink
</NavLink> to="#members"
<NavLink className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
to="#members" location.hash === "#members" && "!border-b-black text-black"
className={`py-1 text-gray-400 border-b-2 border-b-transparent ${ }`}
location.hash === "#members" && "!border-b-black text-black" >
}`} Members
> </NavLink>
Members <NavLink
</NavLink> to="#setting"
<NavLink className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
to="#setting" location.hash === "#setting" && "!border-b-black text-black"
className={`py-1 text-gray-400 border-b-2 border-b-transparent ${ }`}
location.hash === "#setting" && "!border-b-black text-black" >
}`} Setting
> </NavLink>
Setting </div>
</NavLink> <div>
</div> <Dropdown
<div> trigger={
<Dropdown <button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
trigger={ <Icon.Plus className="w-4 h-auto mr-1" /> Add new...
<button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"> </button>
<Icon.Plus className="w-4 h-auto mr-1" /> Add new... }
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>
} {workspaceUser.role === "ADMIN" && (
actions={
<>
<button <button
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100" className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={handleCreateShortcutButtonClick} onClick={handleUpsertWorkspaceMemberButtonClick}
> >
Shortcut Member
</button> </button>
{workspaceUser.role === "ADMIN" && ( )}
<button </>
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100" }
onClick={handleUpsertWorkspaceMemberButtonClick} actionsClassName="!w-32"
> />
Member
</button>
)}
</>
}
actionsClassName="!w-32"
/>
</div>
</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" &&
(shortcutList.length === 0 ? (
<div className="w-full flex flex-col justify-center items-center">
<Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
<p className="mt-4 text-xl text-gray-600">Oops, no shortcut.</p>
<button
className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={handleCreateShortcutButtonClick}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
</button>
</div>
) : (
<ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />
))}
{location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
{location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
</>
)}
</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" &&
(shortcutList.length === 0 ? (
<div className="w-full flex flex-col justify-center items-center">
<Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
<p className="mt-4 text-xl text-gray-600">Oops, no shortcut.</p>
<button
className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={handleCreateShortcutButtonClick}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
</button>
</div>
) : (
<ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />
))}
{location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
{location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
</>
)}
</div> </div>
{state.showCreateShortcutDialog && ( {state.showCreateShortcutDialog && (

93
web/src/router/index.tsx
View File

@ -1,6 +1,7 @@
import { createBrowserRouter, redirect } from "react-router-dom"; import { createBrowserRouter, redirect } from "react-router-dom";
import { isNullorUndefined } from "../helpers/utils"; import { isNullorUndefined } from "../helpers/utils";
import { userService, workspaceService } from "../services"; import { userService, workspaceService } from "../services";
import Root from "../layout/Root";
import Auth from "../pages/Auth"; import Auth from "../pages/Auth";
import Home from "../pages/Home"; import Home from "../pages/Home";
import UserDetail from "../pages/UserDetail"; import UserDetail from "../pages/UserDetail";
@ -14,52 +15,58 @@ const router = createBrowserRouter([
}, },
{ {
path: "/", path: "/",
element: <Home />, element: <Root />,
loader: async () => { children: [
try { {
await userService.initialState(); path: "",
} catch (error) { element: <Home />,
// do nth loader: async () => {
} try {
await userService.initialState();
} catch (error) {
// do nth
}
const { user } = userService.getState(); const { user } = userService.getState();
if (isNullorUndefined(user)) { if (isNullorUndefined(user)) {
return redirect("/user/auth"); return redirect("/user/auth");
} }
}, },
}, },
{ {
path: "/account", path: "/account",
element: <UserDetail />, element: <UserDetail />,
loader: async () => { loader: async () => {
try { try {
await userService.initialState(); await userService.initialState();
} catch (error) { } catch (error) {
// do nth // do nth
} }
const { user } = userService.getState(); const { user } = userService.getState();
if (isNullorUndefined(user)) { if (isNullorUndefined(user)) {
return redirect("/user/auth"); return redirect("/user/auth");
} }
}, },
}, },
{ {
path: "/:workspaceName", path: "/:workspaceName",
element: <WorkspaceDetail />, element: <WorkspaceDetail />,
loader: async () => { loader: async () => {
try { try {
await userService.initialState(); await userService.initialState();
await workspaceService.fetchWorkspaceList(); await workspaceService.fetchWorkspaceList();
} catch (error) { } catch (error) {
// do nth // do nth
} }
const { user } = userService.getState(); const { user } = userService.getState();
if (isNullorUndefined(user)) { if (isNullorUndefined(user)) {
return redirect("/user/auth"); return redirect("/user/auth");
} }
}, },
},
],
}, },
{ {
path: "/:workspaceName/:shortcutName", path: "/:workspaceName/:shortcutName",