From 968a7489d8ec61a5623aa073718fbc1871fc27d3 Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Fri, 12 Jan 2024 18:09:29 +0900
Subject: [PATCH] Add document creation logic

---
 frontend/src/components/editor/Preview.tsx       | 9 ++++++---
 frontend/src/components/headers/EditorHeader.tsx | 9 ++++++++-
 frontend/src/pages/editor/Index.tsx              | 8 ++++++--
 frontend/src/utils/document.ts                   | 3 +++
 frontend/src/utils/yorkie/remoteSelection.ts     | 2 +-
 5 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/utils/document.ts

diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx
index 5bd20487..39de4c65 100644
--- a/frontend/src/components/editor/Preview.tsx
+++ b/frontend/src/components/editor/Preview.tsx
@@ -5,16 +5,18 @@ 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) return;
+		if (!editorStore.doc || !params.documentId) return;
 
-		setContent(editorStore.doc?.getRoot().content.toString());
+		setContent(editorStore.doc?.getRoot().content?.toString() || "");
 
 		const unsubsribe = editorStore.doc.subscribe("$.content", () => {
 			setContent(editorStore.doc?.getRoot().content.toString() as string);
@@ -22,8 +24,9 @@ function Preview() {
 
 		return () => {
 			unsubsribe();
+			setContent("");
 		};
-	}, [editorStore.doc]);
+	}, [editorStore.doc, params.documentId]);
 
 	if (!editorStore?.doc) return <CircularProgress sx={{ marginX: "auto", mt: 4 }} />;
 
diff --git a/frontend/src/components/headers/EditorHeader.tsx b/frontend/src/components/headers/EditorHeader.tsx
index 48480343..4b9c24d2 100644
--- a/frontend/src/components/headers/EditorHeader.tsx
+++ b/frontend/src/components/headers/EditorHeader.tsx
@@ -15,15 +15,22 @@ import AddIcon from "@mui/icons-material/Add";
 import { useDispatch, useSelector } from "react-redux";
 import { EditorModeType, selectEditor, setMode } from "../../store/editorSlice";
 import ThemeButton from "../common/ThemeButton";
+import { createDocumentKey } from "../../utils/document";
+import { useNavigate } from "react-router-dom";
 
 function EditorHeader() {
 	const dispatch = useDispatch();
 	const editorState = useSelector(selectEditor);
+	const navigate = useNavigate();
 
 	const handleChangeMode = (newMode: EditorModeType) => {
 		dispatch(setMode(newMode));
 	};
 
+	const handleCreateNewDocument = () => {
+		navigate(`/${createDocumentKey()}`);
+	};
+
 	return (
 		<AppBar position="static" sx={{ zIndex: 100 }}>
 			<Toolbar>
@@ -54,7 +61,7 @@ function EditorHeader() {
 							</ToggleButtonGroup>
 						</Paper>
 						<Tooltip title="Create New Note">
-							<IconButton color="inherit">
+							<IconButton color="inherit" onClick={handleCreateNewDocument}>
 								<AddIcon />
 							</IconButton>
 						</Tooltip>
diff --git a/frontend/src/pages/editor/Index.tsx b/frontend/src/pages/editor/Index.tsx
index da2639aa..82ff8bfc 100644
--- a/frontend/src/pages/editor/Index.tsx
+++ b/frontend/src/pages/editor/Index.tsx
@@ -13,23 +13,27 @@ import { Box, Paper } from "@mui/material";
 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";
 
 function EditorIndex() {
 	const dispatch = useDispatch();
 	const windowWidth = useWindowWidth();
 	const editorStore = useSelector(selectEditor);
+	const params = useParams();
 
 	useEffect(() => {
 		let client: yorkie.Client;
 		let doc: yorkie.Document<YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType>;
 
+		if (!params.documentId) 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("my-first-document");
+			doc = new yorkie.Document(params.documentId as string);
 
 			await client.attach(doc, {
 				initialPresence: {
@@ -52,7 +56,7 @@ function EditorIndex() {
 
 			cleanUp();
 		};
-	}, [dispatch]);
+	}, [dispatch, params.documentId]);
 
 	return (
 		<Box height="calc(100% - 64px)">
diff --git a/frontend/src/utils/document.ts b/frontend/src/utils/document.ts
new file mode 100644
index 00000000..152f64aa
--- /dev/null
+++ b/frontend/src/utils/document.ts
@@ -0,0 +1,3 @@
+export function createDocumentKey() {
+	return Math.random().toString(36).substring(7);
+}
diff --git a/frontend/src/utils/yorkie/remoteSelection.ts b/frontend/src/utils/yorkie/remoteSelection.ts
index 43ebd22f..074965e8 100644
--- a/frontend/src/utils/yorkie/remoteSelection.ts
+++ b/frontend/src/utils/yorkie/remoteSelection.ts
@@ -222,7 +222,7 @@ export class YorkieRemoteSelectionsPluginValue {
 			const hasFocus = update.view.hasFocus && update.view.dom.ownerDocument.hasFocus();
 			const sel = hasFocus ? update.state.selection.main : null;
 
-			if (sel) {
+			if (sel && root.content) {
 				const selection = root.content.indexRangeToPosRange([sel.anchor, sel.head]);
 				presence.set({
 					selection,