Fix incorrect total user count display on members page

backend/src/intelligence/intelligence.controller.ts

@@ -8,7 +8,7 @@ import {
 	ApiTags,
 } from "@nestjs/swagger";
 import { IntelligenceService } from "./intelligence.service";
-import { AuthroizedRequest } from "src/utils/types/req.type";
+import { AuthorizedRequest } from "src/utils/types/req.type";
 import { Feature } from "./types/feature.type";
 import { RunFeatureDto } from "./dto/run-feature.dto";
 import { Response } from "express";
@@ -30,7 +30,7 @@ export class IntelligenceController {
 	})
 	@ApiOkResponse({ type: String })
 	async runFollowUp(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Res() res: Response,
 		@Body() runFollowUpDto: RunFollowUpDto
 	): Promise<void> {
@@ -53,7 +53,7 @@ export class IntelligenceController {
 	})
 	@ApiOkResponse({ type: String })
 	async runFeature(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Res() res: Response,
 		@Param("feature") feature: Feature,
 		@Body() runFeatureDto: RunFeatureDto

backend/src/users/users.controller.ts

@@ -8,7 +8,7 @@ import {
 	ApiTags,
 } from "@nestjs/swagger";
 import { UsersService } from "./users.service";
-import { AuthroizedRequest } from "src/utils/types/req.type";
+import { AuthorizedRequest } from "src/utils/types/req.type";
 import { FindUserResponse } from "./types/find-user-response.type";
 import { ChangeNicknameDto } from "./dto/change-nickname.dto";
 
@@ -24,7 +24,7 @@ export class UsersController {
 		description: "Return the user information",
 	})
 	@ApiOkResponse({ type: FindUserResponse })
-	async findOne(@Req() req: AuthroizedRequest): Promise<FindUserResponse> {
+	async findOne(@Req() req: AuthorizedRequest): Promise<FindUserResponse> {
 		return this.usersService.findOne(req.user.id);
 	}
 
@@ -39,7 +39,7 @@ export class UsersController {
 	@ApiOkResponse()
 	@ApiConflictResponse({ description: "The nickname conflicts" })
 	async changeNickname(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Body() changeNicknameDto: ChangeNicknameDto
 	): Promise<void> {
 		return this.usersService.changeNickname(req.user.id, changeNicknameDto.nickname);

backend/src/utils/types/req.type.ts

@@ -3,4 +3,4 @@ export type AuthorizedUser = {
 	nickname: string;
 };
 
-export type AuthroizedRequest = Request & { user: AuthorizedUser };
+export type AuthorizedRequest = Request & { user: AuthorizedUser };

backend/src/workspace-documents/workspace-documents.controller.ts

@@ -23,7 +23,7 @@ import {
 	ApiQuery,
 	ApiTags,
 } from "@nestjs/swagger";
-import { AuthroizedRequest } from "src/utils/types/req.type";
+import { AuthorizedRequest } from "src/utils/types/req.type";
 import { CreateWorkspaceDocumentDto } from "./dto/create-workspace-document.dto";
 import { CreateWorkspaceDocumentResponse } from "./types/create-workspace-document-response.type";
 import { UpdateDocumentTitleDto } from "./dto/update-document-title.dto";
@@ -68,7 +68,7 @@ export class WorkspaceDocumentsController {
 		@Param("workspace_id") workspaceId: string,
 		@Param("document_id") documentId: string,
 		@Body() updateDocumentTitleDto: UpdateDocumentTitleDto,
-		@Req() req: AuthroizedRequest
+		@Req() req: AuthorizedRequest
 	): Promise<void> {
 		await this.workspaceDocumentsService.updateTitle(
 			req.user.id,
@@ -101,7 +101,7 @@ export class WorkspaceDocumentsController {
 		required: false,
 	})
 	async findMany(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_id") workspaceId: string,
 		@Query("page_size", new DefaultValuePipe(10), ParseIntPipe) pageSize: number,
 		@Query("cursor", new DefaultValuePipe(undefined)) cursor?: string
@@ -120,7 +120,7 @@ export class WorkspaceDocumentsController {
 			"The workspace or document does not exist, or the user lacks the appropriate permissions.",
 	})
 	async findOne(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_id") workspaceId: string,
 		@Param("document_id") documentId: string
 	): Promise<FindWorkspaceDocumentResponse> {
@@ -138,7 +138,7 @@ export class WorkspaceDocumentsController {
 		description: "The workspace does not exist, or the user lacks the appropriate permissions.",
 	})
 	async create(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_id") workspaceId: string,
 		@Body() createWorkspaceDocumentDto: CreateWorkspaceDocumentDto
 	): Promise<CreateWorkspaceDocumentResponse> {
@@ -161,7 +161,7 @@ export class WorkspaceDocumentsController {
 			"The workspace or document does not exist, or the user lacks the appropriate permissions.",
 	})
 	async createShareToken(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_id") workspaceId: string,
 		@Param("document_id") documentId: string,
 		@Body() createWorkspaceDocumentShareTokenDto: CreateWorkspaceDocumentShareTokenDto

backend/src/workspace-users/types/find-workspace-users-response.type.ts

@@ -7,4 +7,7 @@ export class FindWorkspaceUsersResponse {
 
 	@ApiProperty({ type: String, description: "The ID of last workspace user" })
 	cursor: string | null;
+
+	@ApiProperty({ type: Number, description: "The number of total workspace users" })
+	totalLength: number;
 }

backend/src/workspace-users/workspace-users.controller.ts

@@ -8,7 +8,7 @@ import {
 	ApiTags,
 } from "@nestjs/swagger";
 import { FindWorkspaceUsersResponse } from "./types/find-workspace-users-response.type";
-import { AuthroizedRequest } from "src/utils/types/req.type";
+import { AuthorizedRequest } from "src/utils/types/req.type";
 import { WorkspaceUsersService } from "./workspace-users.service";
 import { HttpExceptionResponse } from "src/utils/types/http-exception-response.type";
 
@@ -42,7 +42,7 @@ export class WorkspaceUsersController {
 		required: false,
 	})
 	async findMany(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_id") workspaceId: string,
 		@Query("page_size", new DefaultValuePipe(10), ParseIntPipe) pageSize: number,
 		@Query("cursor", new DefaultValuePipe(undefined)) cursor?: string

backend/src/workspace-users/workspace-users.service.ts

@@ -55,9 +55,22 @@ export class WorkspaceUsersService {
 			...additionalOptions,
 		});
 
+		const totalLength = await this.prismaService.user.count({
+			where: {
+				userWorkspaceList: {
+					some: {
+						workspaceId: {
+							equals: workspaceId,
+						},
+					},
+				},
+			},
+		});
+
 		return {
 			workspaceUsers: workspaceUserList.slice(0, pageSize),
 			cursor: workspaceUserList.length > pageSize ? workspaceUserList[pageSize].id : null,
+			totalLength,
 		};
 	}
 }

backend/src/workspaces/workspaces.controller.ts

@@ -23,7 +23,7 @@ import {
 	ApiUnauthorizedResponse,
 } from "@nestjs/swagger";
 import { HttpExceptionResponse } from "src/utils/types/http-exception-response.type";
-import { AuthroizedRequest } from "src/utils/types/req.type";
+import { AuthorizedRequest } from "src/utils/types/req.type";
 import { CreateInvitationTokenDto } from "./dto/create-invitation-token.dto";
 import { CreateWorkspaceDto } from "./dto/create-workspace.dto";
 import { JoinWorkspaceDto } from "./dto/join-workspace.dto";
@@ -48,7 +48,7 @@ export class WorkspacesController {
 	@ApiBody({ type: CreateWorkspaceDto })
 	@ApiCreatedResponse({ type: CreateWorkspaceResponse })
 	async create(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Body() createWorkspaceDto: CreateWorkspaceDto
 	): Promise<CreateWorkspaceResponse> {
 		return this.workspacesService.create(req.user.id, createWorkspaceDto.title);
@@ -65,7 +65,7 @@ export class WorkspacesController {
 		description: "The workspace does not exist, or the user lacks the appropriate permissions.",
 	})
 	async findOne(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_slug") workspaceSlug: string
 	): Promise<FindWorkspaceResponse> {
 		return this.workspacesService.findOneBySlug(req.user.id, encodeURI(workspaceSlug));
@@ -91,7 +91,7 @@ export class WorkspacesController {
 		required: false,
 	})
 	async findMany(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Query("page_size", new DefaultValuePipe(10), ParseIntPipe) pageSize: number,
 		@Query("cursor", new DefaultValuePipe(undefined)) cursor?: string
 	): Promise<FindWorkspacesResponse> {
@@ -115,7 +115,7 @@ export class WorkspacesController {
 		description: "The workspace does not exist, or the user lacks the appropriate permissions.",
 	})
 	async createInvitationToken(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Param("workspace_id") workspaceId: string,
 		@Body() createInvitationTokenDto: CreateInvitationTokenDto
 	): Promise<CreateInvitationTokenResponse> {
@@ -143,7 +143,7 @@ export class WorkspacesController {
 		type: HttpExceptionResponse,
 	})
 	async join(
-		@Req() req: AuthroizedRequest,
+		@Req() req: AuthorizedRequest,
 		@Body() joinWorkspaceDto: JoinWorkspaceDto
 	): Promise<JoinWorkspaceResponse> {
 		return this.workspacesService.join(req.user.id, joinWorkspaceDto.invitationToken);

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={{

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;

frontend/src/hooks/api/types/workspaceUser.d.ts

@@ -3,4 +3,5 @@ import { User } from "./user";
 export class GetWorkspaceUserListResponse {
 	cursor: string | null;
 	workspaceUsers: Array<User>;
+	totalLength: number;
 }

frontend/src/pages/workspace/member/Index.tsx

@@ -1,5 +1,4 @@
-import { useParams } from "react-router-dom";
-import { useGetWorkspaceQuery } from "../../../hooks/api/workspace";
+import AddIcon from "@mui/icons-material/Add";
 import {
 	Box,
 	Button,
@@ -15,27 +14,30 @@ import {
 	TableRow,
 	Typography,
 } from "@mui/material";
-import InfiniteScroll from "react-infinite-scroller";
-import { useGetWorkspaceUserListQuery } from "../../../hooks/api/workspaceUser";
 import { useMemo, useState } from "react";
-import AddIcon from "@mui/icons-material/Add";
-import { User } from "../../../hooks/api/types/user";
+import InfiniteScroll from "react-infinite-scroller";
+import { useParams } from "react-router-dom";
 import MemberModal from "../../../components/modals/MemberModal";
+import { User } from "../../../hooks/api/types/user";
+import { useGetWorkspaceQuery } from "../../../hooks/api/workspace";
+import { useGetWorkspaceUserListQuery } from "../../../hooks/api/workspaceUser";
 
 function MemberIndex() {
 	const params = useParams();
 	const { data: workspace } = useGetWorkspaceQuery(params.workspaceSlug);
+
 	const {
 		data: workspaceUserPageList,
 		fetchNextPage,
 		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 +52,7 @@ function MemberIndex() {
 					<Typography variant="h5" fontWeight="bold">
 						{workspace?.title}{" "}
 						<Typography component="span" variant="inherit" color="primary">
-							{workspaceUserPageList?.pages[0].workspaceUsers.length}
+							{workspaceUserPageList?.pages[0].totalLength}
 						</Typography>
 					</Typography>
 					<Button
@@ -69,7 +71,7 @@ function MemberIndex() {
 						hasMore={hasNextPage}
 						loader={
 							<Box className="loader" key={0}>
-								<CircularProgress size="sm" />
+								<CircularProgress size={20} />
 							</Box>
 						}
 						useWindow={false}