Change drawer option to permanent store

yorkie-team · Jun 20, 2024 · 597dc91 · 597dc91
1 parent 08b1016
commit 597dc91
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 42 deletions.
diff --git a/frontend/src/components/drawers/WorkspaceDrawer.tsx b/frontend/src/components/drawers/WorkspaceDrawer.tsx
@@ -16,23 +16,24 @@ import WorkspaceListPopover from "../popovers/WorkspaceListPopover";
 import PeopleIcon from "@mui/icons-material/People";
 import { selectWorkspace } from "../../store/workspaceSlice";
 import { DRAWER_WIDTH, WorkspaceDrawerHeader } from "../layouts/WorkspaceLayout";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 interface WorkspaceDrawerProps {
 	open: boolean;
 }
 
 function WorkspaceDrawer(props: WorkspaceDrawerProps) {
 	const { open } = props;
+	const location = useLocation();
 	const params = useParams();
 	const navigate = useNavigate();
 	const workspaceStore = useSelector(selectWorkspace);
 	const [workspaceListAnchorEl, setWorkspaceListAnchorEl] = useState<
 		(EventTarget & Element) | null
 	>(null);
 	const currentPage = useMemo(() => {
-		return window.location.href.split("/")[4] ?? "main";
-	}, []);
+		return location.pathname.split("/")[2] ?? "main";
+	}, [location.pathname]);
 
 	const handleOpenWorkspacePopover: MouseEventHandler = (event) => {
 		setWorkspaceListAnchorEl(event.currentTarget);

diff --git a/frontend/src/components/layouts/WorkspaceLayout.tsx b/frontend/src/components/layouts/WorkspaceLayout.tsx
@@ -1,9 +1,10 @@
-import * as React from "react";
 import { styled } from "@mui/material/styles";
 import Box from "@mui/material/Box";
 import { Outlet } from "react-router-dom";
 import WorkspaceHeader from "../headers/WorkspaceHeader";
 import WorkspaceDrawer from "../drawers/WorkspaceDrawer";
+import { useDispatch, useSelector } from "react-redux";
+import { selectConfig, setDrawerOpen } from "../../store/configSlice";
 
 export const DRAWER_WIDTH = 282;
 
@@ -36,17 +37,18 @@ export const WorkspaceDrawerHeader = styled("div")(({ theme }) => ({
 }));
 
 function WorkspaceLayout() {
-	const [open, setOpen] = React.useState(false);
+	const { drawerOpen } = useSelector(selectConfig);
+	const dispatch = useDispatch();
 
 	const handleDrawerOpen = () => {
-		setOpen((prev) => !prev);
+		dispatch(setDrawerOpen(!drawerOpen));
 	};
 
 	return (
 		<Box sx={{ display: "flex" }}>
-			<WorkspaceHeader open={open} onDrawerOpen={handleDrawerOpen} />
-			<WorkspaceDrawer open={open} />
-			<Main open={open}>
+			<WorkspaceHeader open={drawerOpen} onDrawerOpen={handleDrawerOpen} />
+			<WorkspaceDrawer open={drawerOpen} />
+			<Main open={drawerOpen}>
 				<WorkspaceDrawerHeader />
 				<Outlet />
 			</Main>

diff --git a/frontend/src/pages/workspace/Index.tsx b/frontend/src/pages/workspace/Index.tsx
@@ -42,14 +42,7 @@ function WorkspaceIndex() {
 	};
 
 	return (
-		<Stack
-			style={{
-				maxHeight: "100vh",
-				overflow: "auto",
-			}}
-			width={1}
-			gap={2}
-		>
+		<Stack gap={2}>
 			<Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
 				<Typography variant="h5" fontWeight="bold">
 					{workspace?.title}{" "}
@@ -65,31 +58,38 @@ function WorkspaceIndex() {
 					New Note
 				</Button>
 			</Stack>
-			<InfiniteScroll
-				pageStart={0}
-				loadMore={() => fetchNextPage()}
-				hasMore={hasNextPage}
-				loader={
-					<Stack className="loader" key={0}>
-						<CircularProgress size="sm" />
-					</Stack>
-				}
-				useWindow={false}
+			<Stack
+				style={{
+					maxHeight: "calc(100vh - 160px)",
+					overflow: "auto",
+				}}
 			>
-				<Box p={2} width={1}>
-					<Grid
-						container
-						spacing={{ xs: 2, md: 3 }}
-						columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
-					>
-						{documentList.map((document) => (
-							<Grid key={document.id} item xs={4} sm={4} md={4} lg={3}>
-								<DocumentCard document={document} />
-							</Grid>
-						))}
-					</Grid>
-				</Box>
-			</InfiniteScroll>
+				<InfiniteScroll
+					pageStart={0}
+					loadMore={() => fetchNextPage()}
+					hasMore={hasNextPage}
+					loader={
+						<Stack className="loader" key={0}>
+							<CircularProgress size="sm" />
+						</Stack>
+					}
+					useWindow={false}
+				>
+					<Box p={2} width={1}>
+						<Grid
+							container
+							spacing={{ xs: 2, md: 3 }}
+							columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
+						>
+							{documentList.map((document) => (
+								<Grid key={document.id} item xs={4} sm={4} md={4} lg={3}>
+									<DocumentCard document={document} />
+								</Grid>
+							))}
+						</Grid>
+					</Box>
+				</InfiniteScroll>
+			</Stack>
 			<CreateModal
 				open={createDocumentModalOpen}
 				title="Note"

diff --git a/frontend/src/store/configSlice.ts b/frontend/src/store/configSlice.ts
@@ -6,10 +6,12 @@ type ThemeType = "default" | "dark" | "light";
 
 export interface ConfigState {
 	theme: ThemeType;
+	drawerOpen: boolean;
 }
 
 const initialState: ConfigState = {
 	theme: "default",
+	drawerOpen: true,
 };
 
 export const configSlice = createSlice({
@@ -19,10 +21,13 @@ export const configSlice = createSlice({
 		setTheme: (state, action: PayloadAction<ThemeType>) => {
 			state.theme = action.payload;
 		},
+		setDrawerOpen: (state, action: PayloadAction<boolean>) => {
+			state.drawerOpen = action.payload;
+		},
 	},
 });
 
-export const { setTheme } = configSlice.actions;
+export const { setTheme, setDrawerOpen } = configSlice.actions;
 
 export const selectConfig = (state: RootState) => state.config;