diff --git a/web/.eslintrc.json b/web/.eslintrc.json index 4d4bc93..8163e4c 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -22,7 +22,8 @@ } ], "@typescript-eslint/no-explicit-any": ["off"], - "react/react-in-jsx-scope": "off" + "react/react-in-jsx-scope": "off", + "react/jsx-no-target-blank": "off" }, "settings": { "react": { diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx index 199a1ef..f8f6beb 100644 --- a/web/src/components/ShortcutListView.tsx +++ b/web/src/components/ShortcutListView.tsx @@ -82,7 +82,7 @@ const ShortcutListView: React.FC = (props: Props) => { - + diff --git a/web/src/components/WorkspaceSetting.tsx b/web/src/components/WorkspaceSetting.tsx index c76c3fa..6a166a2 100644 --- a/web/src/components/WorkspaceSetting.tsx +++ b/web/src/components/WorkspaceSetting.tsx @@ -8,8 +8,10 @@ import { useAppSelector } from "../store"; import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace"; import { showCommonDialog } from "./Alert"; import toastHelper from "./Toast"; -import CreateWorkspaceDialog from "./CreateWorkspaceDialog"; import Icon from "./Icon"; +import CreateWorkspaceDialog from "./CreateWorkspaceDialog"; +import UpsertWorkspaceUserDialog from "./UpsertWorkspaceUserDialog"; +import MemberListView from "./MemberListView"; interface Props { workspaceId: WorkspaceId; @@ -17,6 +19,7 @@ interface Props { interface State { showEditWorkspaceDialog: boolean; + showUpsertWorkspaceUserDialog: boolean; } const WorkspaceSetting: React.FC = (props: Props) => { @@ -25,6 +28,7 @@ const WorkspaceSetting: React.FC = (props: Props) => { const user = useAppSelector((state) => state.user.user) as User; const [state, setState] = useState({ showEditWorkspaceDialog: false, + showUpsertWorkspaceUserDialog: false, }); const { workspaceList } = useAppSelector((state) => state.workspace); const loadingState = useLoading(); @@ -48,6 +52,13 @@ const WorkspaceSetting: React.FC = (props: Props) => { }); }; + const handleUpsertWorkspaceMemberButtonClick = () => { + setState({ + ...state, + showUpsertWorkspaceUserDialog: true, + }); + }; + const handleEditWorkspaceDialogConfirm = async () => { setState({ ...state, @@ -87,7 +98,8 @@ const WorkspaceSetting: React.FC = (props: Props) => { return ( <>
-

+ Basic +

{workspace.title} ({workspace.name})

@@ -116,6 +128,19 @@ const WorkspaceSetting: React.FC = (props: Props) => {
+
+
+ Member list + {workspaceUser.role === "ADMIN" && ( + + )} +
+ +
+ {state.showEditWorkspaceDialog && ( = (props: Props) => { onConfirm={() => handleEditWorkspaceDialogConfirm()} /> )} + + {state.showUpsertWorkspaceUserDialog && ( + { + setState({ + ...state, + showUpsertWorkspaceUserDialog: false, + }); + }} + onConfirm={async () => { + setState({ + ...state, + showUpsertWorkspaceUserDialog: false, + }); + if (location.hash !== "#members") { + navigate("#members"); + } + }} + /> + )} ); }; diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx index 86d9d6e..df8fcbf 100644 --- a/web/src/pages/WorkspaceDetail.tsx +++ b/web/src/pages/WorkspaceDetail.tsx @@ -2,36 +2,30 @@ import { useEffect, useState } from "react"; import { NavLink, useLocation, useNavigate, useParams } from "react-router-dom"; import { shortcutService, userService } from "../services"; import { useAppSelector } from "../store"; -import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace"; +import { unknownWorkspace } from "../store/modules/workspace"; import useLoading from "../hooks/useLoading"; import Icon from "../components/Icon"; import toastHelper from "../components/Toast"; import Dropdown from "../components/common/Dropdown"; 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 { showCreateShortcutDialog: boolean; - showUpsertWorkspaceUserDialog: boolean; } const WorkspaceDetail: React.FC = () => { const navigate = useNavigate(); const params = useParams(); const location = useLocation(); - const user = useAppSelector((state) => state.user.user) as User; const { workspaceList } = useAppSelector((state) => state.workspace); const { shortcutList } = useAppSelector((state) => state.shortcut); const [state, setState] = useState({ showCreateShortcutDialog: false, - showUpsertWorkspaceUserDialog: false, }); const loadingState = useLoading(); const workspace = workspaceList.find((workspace) => workspace.name === params.workspaceName) ?? unknownWorkspace; - const workspaceUser = workspace.workspaceUserList.find((workspaceUser) => workspaceUser.userId === user.id) ?? unknownWorkspaceUser; useEffect(() => { if (!userService.getState().user) { @@ -50,7 +44,7 @@ const WorkspaceDetail: React.FC = () => { }, [params.workspaceName]); useEffect(() => { - if (location.hash !== "#shortcuts" && location.hash !== "#members" && location.hash !== "#setting") { + if (location.hash !== "#shortcuts" && location.hash !== "#setting") { navigate("#shortcuts"); } }, [location.hash]); @@ -62,13 +56,6 @@ const WorkspaceDetail: React.FC = () => { }); }; - const handleUpsertWorkspaceMemberButtonClick = () => { - setState({ - ...state, - showUpsertWorkspaceUserDialog: true, - }); - }; - return ( <>
@@ -82,14 +69,6 @@ const WorkspaceDetail: React.FC = () => { > Shortcuts - - Members - { > Shortcut - {workspaceUser.role === "ADMIN" && ( - - )} } actionsClassName="!w-32" @@ -150,7 +121,6 @@ const WorkspaceDetail: React.FC = () => { ) : ( ))} - {location.hash === "#members" && } {location.hash === "#setting" && } )} @@ -176,27 +146,6 @@ const WorkspaceDetail: React.FC = () => { }} /> )} - - {state.showUpsertWorkspaceUserDialog && ( - { - setState({ - ...state, - showUpsertWorkspaceUserDialog: false, - }); - }} - onConfirm={async () => { - setState({ - ...state, - showUpsertWorkspaceUserDialog: false, - }); - if (location.hash !== "#members") { - navigate("#members"); - } - }} - /> - )} ); };