Fix incorrect total user count display on members page

yorkie-team · Dec 11, 2024 · 04a3fd4 · 04a3fd4
1 parent deac17a
commit 04a3fd4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/frontend/src/components/drawers/WorkspaceDrawer.tsx b/frontend/src/components/drawers/WorkspaceDrawer.tsx
@@ -1,3 +1,7 @@
+import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import PeopleIcon from "@mui/icons-material/People";
+import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
 import {
 	Box,
 	Collapse,
@@ -7,16 +11,12 @@ import {
 	ListItemText,
 	Paper,
 } from "@mui/material";
-import { useDispatch } from "react-redux";
 import { useMemo, useState } from "react";
-import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
-import PeopleIcon from "@mui/icons-material/People";
-import { WorkspaceDrawerHeader } from "../layouts/WorkspaceLayout";
+import { useDispatch } from "react-redux";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { COLLAPESED_DRAWER_WIDTH, DRAWER_WIDTH } from "../../constants/layout";
-import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
-import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import { COLLAPSED_DRAWER_WIDTH, DRAWER_WIDTH } from "../../constants/layout";
 import { setDrawerOpen } from "../../store/configSlice";
+import { WorkspaceDrawerHeader } from "../layouts/WorkspaceLayout";
 
 interface WorkspaceDrawerProps {
 	open: boolean;
@@ -64,7 +64,7 @@ function WorkspaceDrawer(props: WorkspaceDrawerProps) {
 
 	return (
 		<Box>
-			<Box sx={{ width: open ? DRAWER_WIDTH : COLLAPESED_DRAWER_WIDTH }} />
+			<Box sx={{ width: open ? DRAWER_WIDTH : COLLAPSED_DRAWER_WIDTH }} />
 			<Paper
 				sx={{
 					position: "fixed",
@@ -77,7 +77,7 @@ function WorkspaceDrawer(props: WorkspaceDrawerProps) {
 				<Collapse
 					orientation="horizontal"
 					in={hovered || open}
-					collapsedSize={COLLAPESED_DRAWER_WIDTH}
+					collapsedSize={COLLAPSED_DRAWER_WIDTH}
 				>
 					<Box
 						sx={{

diff --git a/frontend/src/constants/layout.ts b/frontend/src/constants/layout.ts
@@ -1,2 +1,2 @@
 export const DRAWER_WIDTH = 256;
-export const COLLAPESED_DRAWER_WIDTH = 64;
+export const COLLAPSED_DRAWER_WIDTH = 64;
diff --git a/frontend/src/pages/workspace/member/Index.tsx b/frontend/src/pages/workspace/member/Index.tsx
@@ -31,11 +31,12 @@ function MemberIndex() {
 		hasNextPage,
 	} = useGetWorkspaceUserListQuery(workspace?.id);
 	const [memberModalOpen, setMemberModalOpen] = useState(false);
+
 	const userList = useMemo(() => {
 		return (
 			workspaceUserPageList?.pages.reduce((prev, page) => {
 				return prev.concat(page.workspaceUsers);
-			}, [] as Array<User>) ?? []
+			}, [] as User[]) ?? []
 		);
 	}, [workspaceUserPageList?.pages]);
 
@@ -50,7 +51,7 @@ function MemberIndex() {
 					<Typography variant="h5" fontWeight="bold">
 						{workspace?.title}{" "}
 						<Typography component="span" variant="inherit" color="primary">
-							{workspaceUserPageList?.pages[0].workspaceUsers.length}
+							{userList.length}
 						</Typography>
 					</Typography>
 					<Button
@@ -69,7 +70,7 @@ function MemberIndex() {
 						hasMore={hasNextPage}
 						loader={
 							<Box className="loader" key={0}>
-								<CircularProgress size="sm" />
+								<CircularProgress size={20} />
 							</Box>
 						}
 						useWindow={false}