(FE) Retrieve Document List within Workspace

backend/src/users/users.service.ts

@@ -73,7 +73,9 @@ export class UsersService {
 
 		const duplicatedWorkspaceList = await this.prismaService.workspace.findMany({
 			where: {
-				slug,
+				slug: {
+					startsWith: slug,
+				},
 			},
 		});
 

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

@@ -27,7 +27,9 @@ export class WorkspaceDocumentsService {
 
 		const duplicatedDocumentList = await this.prismaService.document.findMany({
 			where: {
-				slug,
+				slug: {
+					startsWith: slug,
+				},
 			},
 		});
 

backend/src/workspaces/workspaces.service.ts

@@ -17,7 +17,9 @@ export class WorkspacesService {
 
 		const duplicatedWorkspaceList = await this.prismaService.workspace.findMany({
 			where: {
-				slug,
+				slug: {
+					startsWith: slug,
+				},
 			},
 		});
 

frontend/package.json

@@ -34,6 +34,7 @@
 		"codemirror-toolbar": "^0.0.3",
 		"color": "^4.2.3",
 		"lib0": "^0.2.88",
+		"moment": "^2.30.1",
 		"randomcolor": "^0.6.2",
 		"react": "^17.0.0 || ^18.0.0",
 		"react-dom": "^17.0.0 || ^18.0.0",

frontend/src/components/cards/DocumentCard.tsx

@@ -0,0 +1,37 @@
+import moment from "moment";
+import { Card, CardActionArea, CardContent, Stack, Typography } from "@mui/material";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { Document } from "../../hooks/api/types/document.d";
+
+interface DocumentCardProps {
+	document: Document;
+}
+
+function DocumentCard(props: DocumentCardProps) {
+	const { document } = props;
+
+	return (
+		<Card sx={{ width: "100%" }}>
+			<CardActionArea>
+				<CardContent>
+					<Typography variant="h5" component="div" noWrap>
+						{document.title}
+					</Typography>
+					<Stack direction="row" alignItems="center" gap={1}>
+						<AccessTimeIcon
+							fontSize="small"
+							sx={{
+								color: "text.secondary",
+							}}
+						/>
+						<Typography variant="body2" color="text.secondary" noWrap>
+							Changed {moment(document.updatedAt).fromNow()}
+						</Typography>
+					</Stack>
+				</CardContent>
+			</CardActionArea>
+		</Card>
+	);
+}
+
+export default DocumentCard;

frontend/src/components/drawers/WorkspaceDrawer.tsx

@@ -58,7 +58,7 @@ function WorkspaceDrawer() {
 					boxSizing: "border-box",
 				},
 			}}
-			variant="persistent"
+			variant="permanent"
 			anchor="left"
 			open
 		>

frontend/src/components/popovers/WorkspaceListPopover.tsx

@@ -30,10 +30,10 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 		}, [] as Array<Workspace>);
 	}, [workspacePageList?.pages]);
 
-	const handleMoveToSelectedWorkspace = (workspaceId: string) => {
-		if (params.workspaceId === workspaceId) return;
+	const handleMoveToSelectedWorkspace = (workspaceSlug: string) => {
+		if (params.workspaceSlug === workspaceSlug) return;
 
-		navigate(`/workspace/${workspaceId}`);
+		navigate(`/workspace/${workspaceSlug}`);
 	};
 
 	return (
@@ -50,7 +50,7 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 		>
 			<Box
 				style={{
-					height: 300,
+					maxHeight: 300,
 					overflow: "auto",
 				}}
 			>
@@ -69,7 +69,7 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 						{workspaceList?.map((workspace) => (
 							<MenuItem
 								key={workspace.id}
-								onClick={() => handleMoveToSelectedWorkspace(workspace.id)}
+								onClick={() => handleMoveToSelectedWorkspace(workspace.slug)}
 							>
 								<ListItemText
 									primaryTypographyProps={{
@@ -79,7 +79,7 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 								>
 									{workspace.title}
 								</ListItemText>
-								{params.workspaceId === workspace.id && (
+								{params.workspaceSlug === workspace.slug && (
 									<ListItemSecondaryAction>
 										<CheckIcon fontSize="small" />
 									</ListItemSecondaryAction>

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

@@ -0,0 +1,14 @@
+export class Document {
+	id: string;
+	yorkieDocumentId: string;
+	title: string;
+	slug: string;
+	content?: string;
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export class GetWorkspaceDocumentListResponse {
+	cursor: string | null;
+	documents: Array<Workspace>;
+}

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

@@ -1,4 +1,4 @@
-export interface Workspace {
+export class Workspace {
 	id: string;
 	title: string;
 	slug: string;

frontend/src/hooks/api/workspaceDocument.ts

@@ -0,0 +1,30 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { GetWorkspaceDocumentListResponse } from "./types/document";
+
+export const generateGetWorkspaceDocumentListQueryKey = (workspaceId: string) => {
+	return ["workspaces", workspaceId, "documents"];
+};
+
+export const useGetWorkspaceDocumentListQuery = (workspaceId?: string) => {
+	const query = useInfiniteQuery<GetWorkspaceDocumentListResponse>({
+		queryKey: generateGetWorkspaceDocumentListQueryKey(workspaceId || ""),
+		queryFn: async ({ pageParam }) => {
+			const res = await axios.get<GetWorkspaceDocumentListResponse>(
+				`/workspaces/${workspaceId}/documents`,
+				{
+					params: {
+						cursor: pageParam,
+					},
+				}
+			);
+			return res.data;
+		},
+		enabled: Boolean(workspaceId),
+		initialPageParam: undefined,
+		getPreviousPageParam: (firstPage) => firstPage.cursor ?? undefined,
+		getNextPageParam: (lastPage) => lastPage.cursor ?? undefined,
+	});
+
+	return query;
+};

frontend/src/pages/workspace/Index.tsx

@@ -1,7 +1,42 @@
+import { useParams } from "react-router-dom";
 import WorkspaceDrawer from "../../components/drawers/WorkspaceDrawer";
+import { useGetWorkspaceDocumentListQuery } from "../../hooks/api/workspaceDocument";
+import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
+import { Box, Grid, Stack } from "@mui/material";
+import DocumentCard from "../../components/cards/DocumentCard";
+import { useMemo } from "react";
+import { Document } from "../../hooks/api/types/document.d";
 
 function WorkspaceIndex() {
-	return <WorkspaceDrawer />;
+	const params = useParams();
+	const { data: workspace } = useGetWorkspaceQuery(params.workspaceSlug);
+	const { data: documentPageList } = useGetWorkspaceDocumentListQuery(workspace?.id);
+	const documentList = useMemo(() => {
+		return (
+			documentPageList?.pages.reduce((prev, page) => {
+				return prev.concat(page.documents);
+			}, [] as Array<Document>) ?? []
+		);
+	}, [documentPageList?.pages]);
+
+	return (
+		<Stack direction="row">
+			<WorkspaceDrawer />
+			<Box p={2}>
+				<Grid
+					container
+					spacing={{ xs: 2, md: 3 }}
+					columns={{ xs: 4, sm: 8, md: 12, lg: 12 }}
+				>
+					{documentList.map((document, idx) => (
+						<Grid key={idx} item xs={4} sm={4} md={4} lg={3}>
+							<DocumentCard document={document} />
+						</Grid>
+					))}
+				</Grid>
+			</Box>
+		</Stack>
+	);
 }
 
 export default WorkspaceIndex;