Add retrieve a Document

backend/src/documents/documents.controller.ts

@@ -1,7 +1,8 @@
-import { Controller, Get, Query } from "@nestjs/common";
+import { Controller, Get, Param, Query, Req } from "@nestjs/common";
 import { DocumentsService } from "./documents.service";
 import { Public } from "src/utils/decorators/auth.decorator";
 import {
+	ApiFoundResponse,
 	ApiNotFoundResponse,
 	ApiOkResponse,
 	ApiOperation,
@@ -11,6 +12,8 @@ import {
 } from "@nestjs/swagger";
 import { FindDocumentFromSharingTokenResponse } from "./types/find-document-from-sharing-token-response.type";
 import { HttpExceptionResponse } from "src/utils/types/http-exception-response.type";
+import { FindDocumentResponse } from "./types/find-document-response.type";
+import { AuthroizedRequest } from "src/utils/types/req.type";
 
 @ApiTags("Documents")
 @Controller("documents")
@@ -38,4 +41,22 @@ export class DocumentsController {
 	): Promise<FindDocumentFromSharingTokenResponse> {
 		return this.documentsService.findDocumentFromSharingToken(token);
 	}
+
+	@Get(":document_slug")
+	@ApiOperation({
+		summary: "Retrieve a Document in the Workspace",
+		description: "If the user has the access permissions, return a document.",
+	})
+	@ApiFoundResponse({ type: FindDocumentResponse })
+	@ApiNotFoundResponse({
+		type: HttpExceptionResponse,
+		description:
+			"The workspace or document does not exist, or the user lacks the appropriate permissions.",
+	})
+	async findOne(
+		@Req() req: AuthroizedRequest,
+		@Param("document_slug") documentSlug: string
+	): Promise<FindDocumentResponse> {
+		return this.documentsService.findOneBySlug(req.user.id, documentSlug);
+	}
 }

backend/src/documents/documents.service.ts

@@ -43,4 +43,25 @@ export class DocumentsService {
 			role,
 		};
 	}
+
+	async findOneBySlug(userId: string, documentSlug: string) {
+		try {
+			const document = await this.prismaService.document.findFirstOrThrow({
+				where: {
+					slug: documentSlug,
+				},
+			});
+
+			await this.prismaService.userWorkspace.findFirstOrThrow({
+				where: {
+					userId,
+					workspaceId: document.workspaceId,
+				},
+			});
+
+			return document;
+		} catch (e) {
+			throw new NotFoundException();
+		}
+	}
 }

backend/src/documents/types/find-document-response.type.ts

@@ -0,0 +1,3 @@
+import { WorkspaceDocumentDomain } from "../../workspace-documents/types/workspace-document-domain.type";
+
+export class FindDocumentResponse extends WorkspaceDocumentDomain {}

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

@@ -25,7 +25,6 @@ import { AuthroizedRequest } from "src/utils/types/req.type";
 import { CreateWorkspaceDocumentDto } from "./dto/create-workspace-document.dto";
 import { CreateWorkspaceDocumentResponse } from "./types/create-workspace-document-response.type";
 import { HttpExceptionResponse } from "src/utils/types/http-exception-response.type";
-import { FindWorkspaceDocumentResponse } from "./types/find-workspace-document-response.type";
 import { FindWorkspaceDocumentsResponse } from "./types/find-workspace-documents-response.type";
 import { CreateWorkspaceDocumentShareTokenResponse } from "./types/create-workspace-document-share-token-response.type";
 import { CreateWorkspaceDocumentShareTokenDto } from "./dto/create-workspace-document-share-token.dto";
@@ -36,25 +35,6 @@ import { CreateWorkspaceDocumentShareTokenDto } from "./dto/create-workspace-doc
 export class WorkspaceDocumentsController {
 	constructor(private workspaceDocumentsService: WorkspaceDocumentsService) {}
 
-	@Get(":document_slug")
-	@ApiOperation({
-		summary: "Retrieve a Document in the Workspace",
-		description: "If the user has the access permissions, return a document.",
-	})
-	@ApiFoundResponse({ type: FindWorkspaceDocumentResponse })
-	@ApiNotFoundResponse({
-		type: HttpExceptionResponse,
-		description:
-			"The workspace or document does not exist, or the user lacks the appropriate permissions.",
-	})
-	async findOne(
-		@Req() req: AuthroizedRequest,
-		@Param("workspace_id") workspaceId: string,
-		@Param("document_slug") documentSlug: string
-	): Promise<FindWorkspaceDocumentResponse> {
-		return this.workspaceDocumentsService.findOneBySlug(req.user.id, workspaceId, documentSlug);
-	}
-
 	@Get("")
 	@ApiOperation({
 		summary: "Retrieve the Documents in Workspace",

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

@@ -47,25 +47,6 @@ export class WorkspaceDocumentsService {
 		});
 	}
 
-	async findOneBySlug(userId: string, workspaceId: string, documentSlug: string) {
-		try {
-			await this.prismaService.userWorkspace.findFirstOrThrow({
-				where: {
-					userId,
-					workspaceId,
-				},
-			});
-
-			return this.prismaService.document.findFirstOrThrow({
-				where: {
-					slug: documentSlug,
-				},
-			});
-		} catch (e) {
-			throw new NotFoundException();
-		}
-	}
-
 	async findMany(
 		userId: string,
 		workspaceId: string,

frontend/src/components/cards/DocumentCard.tsx

@@ -2,17 +2,23 @@ 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";
+import { useNavigate } from "react-router-dom";
 
 interface DocumentCardProps {
 	document: Document;
 }
 
 function DocumentCard(props: DocumentCardProps) {
 	const { document } = props;
+	const navigate = useNavigate();
+
+	const handleToDocument = () => {
+		navigate(`/document/${document.slug}`);
+	};
 
 	return (
 		<Card sx={{ width: "100%" }}>
-			<CardActionArea>
+			<CardActionArea onClick={handleToDocument}>
 				<CardContent>
 					<Typography variant="h5" component="div" noWrap>
 						{document.title}

frontend/src/components/editor/Preview.tsx

@@ -5,16 +5,14 @@ import { selectEditor } from "../../store/editorSlice";
 import { CircularProgress } from "@mui/material";
 import { useEffect, useState } from "react";
 import "./editor.css";
-import { useParams } from "react-router-dom";
 
 function Preview() {
-	const params = useParams();
 	const currentTheme = useCurrentTheme();
 	const editorStore = useSelector(selectEditor);
 	const [content, setContent] = useState("");
 
 	useEffect(() => {
-		if (!editorStore.doc || !params.documentId) return;
+		if (!editorStore.doc) return;
 
 		setContent(editorStore.doc?.getRoot().content?.toString() || "");
 
@@ -26,7 +24,7 @@ function Preview() {
 			unsubsribe();
 			setContent("");
 		};
-	}, [editorStore.doc, params.documentId]);
+	}, [editorStore.doc]);
 
 	if (!editorStore?.doc) return <CircularProgress sx={{ marginX: "auto", mt: 4 }} />;
 

frontend/src/components/popovers/WorkspaceListPopover.tsx

@@ -30,9 +30,11 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 	const { data: workspacePageList, hasNextPage, fetchNextPage } = useGetWorkspaceListQuery();
 	const { mutateAsync: createWorkspace } = useCreateWorkspaceMutation();
 	const workspaceList = useMemo(() => {
-		return workspacePageList?.pages.reduce((prev: Array<Workspace>, page) => {
-			return prev.concat(page.workspaces);
-		}, [] as Array<Workspace>);
+		return (
+			workspacePageList?.pages.reduce((prev: Array<Workspace>, page) => {
+				return prev.concat(page.workspaces);
+			}, [] as Array<Workspace>) ?? []
+		);
 	}, [workspacePageList?.pages]);
 	const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
 
@@ -91,7 +93,7 @@ function WorkspaceListPopover(props: WorkspaceListPopoverProps) {
 							}
 							useWindow={false}
 						>
-							{workspaceList?.map((workspace) => (
+							{workspaceList.map((workspace) => (
 								<MenuItem
 									key={workspace.id}
 									onClick={() => handleMoveToSelectedWorkspace(workspace.slug)}

frontend/src/hooks/api/document.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { GetDocumentResponse } from "./types/document";
+
+export const generateGetDocumentQueryKey = (documentSlug: string) => {
+	return ["documents", documentSlug];
+};
+
+export const useGetDocumentQuery = (documentSlug: string) => {
+	const query = useQuery({
+		queryKey: generateGetDocumentQueryKey(documentSlug || ""),
+		enabled: Boolean(documentSlug),
+		queryFn: async () => {
+			const res = await axios.get<GetDocumentResponse>(`/documents/${documentSlug}`);
+			return res.data;
+		},
+		meta: {
+			errorMessage: "This is a non-existent or unauthorized Workspace.",
+		},
+	});
+
+	return query;
+};

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

@@ -7,3 +7,5 @@ export class Document {
 	createdAt: Date;
 	updatedAt: Date;
 }
+
+export class GetDocumentResponse extends Document {}

frontend/src/hooks/api/workspace.ts

@@ -7,8 +7,8 @@ import {
 	GetWorkspaceResponse,
 } from "./types/workspace";
 
-export const generateGetWorkspaceQueryKey = (workspaceId: string) => {
-	return ["workspaces", workspaceId];
+export const generateGetWorkspaceQueryKey = (workspaceSlug: string) => {
+	return ["workspaces", workspaceSlug];
 };
 
 export const generateGetWorkspaceListQueryKey = () => {

frontend/src/pages/editor/Index.tsx → frontend/src/pages/document/Index.tsx

@@ -14,26 +14,28 @@ import Resizable from "react-resizable-layout";
 import { useWindowWidth } from "@react-hook/window-size";
 import Preview from "../../components/editor/Preview";
 import { useParams } from "react-router-dom";
+import { useGetDocumentQuery } from "../../hooks/api/document";
 
 function EditorIndex() {
+	const params = useParams();
 	const dispatch = useDispatch();
 	const windowWidth = useWindowWidth();
 	const editorStore = useSelector(selectEditor);
-	const params = useParams();
+	const { data: document } = useGetDocumentQuery(params.documentSlug || "");
 
 	useEffect(() => {
 		let client: yorkie.Client;
 		let doc: yorkie.Document<YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType>;
 
-		if (!params.documentId) return;
+		if (!document?.yorkieDocumentId) return;
 
 		const initializeYorkie = async () => {
 			client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
 				apiKey: import.meta.env.VITE_YORKIE_API_KEY,
 			});
 			await client.activate();
 
-			doc = new yorkie.Document(params.documentId as string);
+			doc = new yorkie.Document(document?.yorkieDocumentId as string);
 
 			await client.attach(doc, {
 				initialPresence: {
@@ -56,7 +58,7 @@ function EditorIndex() {
 
 			cleanUp();
 		};
-	}, [dispatch, params.documentId]);
+	}, [dispatch, document?.yorkieDocumentId]);
 
 	return (
 		<Box height="calc(100% - 64px)">

frontend/src/pages/workspace/Index.tsx

@@ -51,8 +51,8 @@ function WorkspaceIndex() {
 							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}>
+							{documentList.map((document) => (
+								<Grid key={document.id} item xs={4} sm={4} md={4} lg={3}>
 									<DocumentCard document={document} />
 								</Grid>
 							))}

frontend/src/routes.tsx

@@ -1,5 +1,5 @@
 import EditorLayout from "./components/layouts/EditorLayout";
-import EditorIndex from "./pages/editor/Index";
+import EditorIndex from "./pages/document/Index";
 import MainLayout from "./components/layouts/MainLayout";
 import Index from "./pages/Index";
 import CallbackIndex from "./pages/auth/callback/Index";
@@ -38,12 +38,12 @@ const codePairRoutes = [
 		],
 	},
 	{
-		path: ":documentId",
-		accessType: AccessType.PUBLIC,
+		path: "document",
+		accessType: AccessType.PRIVATE,
 		element: <EditorLayout />,
 		children: [
 			{
-				path: "",
+				path: ":documentSlug",
 				element: <EditorIndex />,
 			},
 		],