prgrms-fe-devcourse · gxxrxn · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.vscode
+.env.js
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Fry's Notion</title>
+  <link rel="stylesheet" href="/style.css" type="text/css" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,49 @@
+import Router from "./Router.js";
+import { routes } from "./constants/routes.js";
+import { navigate } from "./utils/navigate.js";
+
+export default function App({ $target }) {
+  const findMatchedRoute = (pathname) => routes.find((route) => route.path.test(pathname));
+
+  this.$target = $target;
+  this.state = { currentPage: null };
+
+  this.init = () => {
+    new Router({ onRoute: this.route.bind(this) });
+  };
+
+  this.route = () => {
+    const { pathname } = location;
+    const { currentPage } = this.state;
+    const nextPage = findMatchedRoute(pathname)?.page;
+
+    const documentIdFromPath = pathname.split("/documents/")[1];
+    const documentIdFromHistory = history.state?.documentId || null;
+
+    if (documentIdFromPath != documentIdFromHistory || !nextPage) {
+      navigate("/404", true);
+      return;
+    }
+
+    const needNewPage =
+      !currentPage || !(currentPage instanceof nextPage) || !documentIdFromHistory;
+
+    if (needNewPage) {
+      this.setState({
+        currentPage: new nextPage({
+          $target: this.$target,
+          initialState: { documentId: documentIdFromHistory },
+        }),
+      });
+      return;
+    }
+
+    this.state.currentPage.setState({ documentId: documentIdFromHistory });
+  };
+
+  this.setState = (newState) => {
+    this.state = { ...this.state, ...newState };
+  };
+
+  this.init();
+}
diff --git a/src/Router.js b/src/Router.js
@@ -0,0 +1,25 @@
+import { HISTORY_CHANGE, POP_STATE } from "./constants/routes.js";
+
+export default function Router({ onRoute }) {
+  this.init = () => {
+    window.addEventListener(HISTORY_CHANGE, ({ detail }) => {
+      const { to, isReplace, state } = detail;
+
+      if (isReplace || to === location.pathname) {
+        history.replaceState(state, "", to);
+      } else {
+        history.pushState(state, "", to);
+      }
+
+      onRoute();
+    });
+
+    window.addEventListener(POP_STATE, () => {
+      onRoute();
+    });
+
+    onRoute();
+  };
+
+  this.init();
+}
diff --git a/src/components/component.js b/src/components/component.js
@@ -0,0 +1,24 @@
+export default function Component({ $target, initialState }) {
+  this.$target = $target;
+  this.state = { ...initialState };
+
+  this.init = () => {
+    this.render();
+  };
+
+  this.setState = () => {
+    this.render();
+  };
+
+  this.render = () => {
+    this.$target.innerHTML = `
+    `;
+    this.mounted();
+  };
+
+  this.mounted = () => {};
+
+  this.setEvent = () => {};
+
+  this.init();
+}
diff --git a/src/components/document/Document.js b/src/components/document/Document.js
@@ -0,0 +1,106 @@
+import DocumentHeader from "./DocumentHeader.js";
+import DocumentContent from "./DocumentContent.js";
+
+import API from "../../utils/api.js";
+import { setItemToStorage, getItemFromStorage } from "../../utils/storage.js";
+import { debounce } from "../../utils/index.js";
+import { navigate } from "../../utils/navigate.js";
+
+export default function Document({
+  $target,
+  initialState = {
+    documentId: null,
+  },
+}) {
+  const fetchDocument = async (documentId) => {
+    const response = await API.getDocuments(documentId);
+
+    if (!response) {
+      navigate("/", true);
+      return;
+    }
+
+    return [{ title: response.title, content: response.content }, response];
+  };
+
+  const handleDocumentEdit = async (text, section = "title") => {
+    const storedItem = getItemFromStorage("notion", { currentDocument: {} });
+
+    storedItem.currentDocument = {
+      ...storedItem.currentDocument,
+      [section]: text,
+      tempSavedAt: new Date(),
+    };
+    setItemToStorage("notion", { ...storedItem });
+
+    const { title, content } = storedItem.currentDocument;
+    await API.updateDocument(this.state.documentId, { title, content });
+  };
+
+  const renderDocumentById = async ($header, $body) => {
+    const { documentId } = this.state;
+    const [{ title, content }, response] = await fetchDocument(documentId);
+
+    setItemToStorage("notion", { currentDocument: response });
+
+    new DocumentHeader({
+      $target: $header,
+      initialState: { title },
+      onEdit: debounce(handleDocumentEdit, 300),
+    });
+    new DocumentContent({
+      $target: $body,
+      initialState: { content },
+      onEdit: debounce(handleDocumentEdit, 300),
+    });
+  };
+
+  const renderNewDocument = ($header, $body) => {
+    new DocumentHeader({ $target: $header, onEdit: debounce(handleDocumentEdit, 300) });
+    new DocumentContent({ $target: $body, onEdit: debounce(handleDocumentEdit, 300) });
+  };
+
+  const renderNoDocument = ($container) => {
+    $container.innerHTML = `
+      <h1 style="color: rgb(102, 75, 63, 0.7); font-weight: 800;">Notion에 오신 것을 환영해요!</h1>
+      <img src="https://media3.giphy.com/media/KjuQizGwJCsgoYdziS/giphy.gif?cid=ecf05e47ly3czt6iu86gd916h6oqna0t6wnb0e95ldri599i&rid=giphy.gif&ct=s" />
+    `;
+  };
+
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.render();
+  };
+
+  this.render = () => {
+    this.$target.innerHTML = `
+      <div id="document">
+        <div id="document-header"></div>
+        <div id="document-body"></div>
+      </div>
+    `;
+
+    this.mounted();
+  };
+
+  this.mounted = async () => {
+    const $container = this.$target.querySelector("#document");
+    const $header = this.$target.querySelector("#document-header");
+    const $body = this.$target.querySelector("#document-body");
+
+    const { documentId } = this.state;
+
+    if (documentId === "new") {
+      renderNewDocument($header, $body);
+      return;
+    } else if (!!documentId) {
+      renderDocumentById($header, $body);
+    } else {
+      renderNoDocument($container);
+    }
+  };
+
+  this.init();
+}
diff --git a/src/components/document/DocumentContent.js b/src/components/document/DocumentContent.js
@@ -0,0 +1,41 @@
+import { addEvent } from "../../utils/event.js";
+import { parseNewline } from "../../utils/index.js";
+
+export default function DocumentContent({
+  $target,
+  initialState = {
+    content: "",
+  },
+  onEdit,
+}) {
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.setEvent();
+    this.render();
+  };
+
+  this.render = () => {
+    const { content } = this.state;
+
+    this.$target.innerHTML = `
+      <div id="document-editor" name="content" contenteditable="true" placeholder="Type for creating new document">${parseNewline(
+        content ?? ""
+      )}</div>
+    `;
+  };
+
+  this.setEvent = () => {
+    addEvent(this.$target, "keyup", "[name=content]", (event) => {
+      onEdit(event.target.innerText, "content");
+    });
+  };
+
+  this.setState = (newState) => {
+    this.state = { ...this.state, ...newState };
+    this.render();
+  };
+
+  this.init();
+}
diff --git a/src/components/document/DocumentHeader.js b/src/components/document/DocumentHeader.js
@@ -0,0 +1,35 @@
+import { DEFAULT } from "../../constants/config.js";
+import { addEvent } from "../../utils/event.js";
+
+export default function DocumentHeader({
+  $target,
+  initialState = {
+    title: "",
+  },
+  onEdit,
+}) {
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.setEvent();
+    this.render();
+  };
+
+  this.render = () => {
+    const { title } = this.state;
+
+    this.$target.innerHTML = `
+    <div class="title" name="title" placeholder=${DEFAULT.DOCUMENT_NAME} contenteditable="true">${
+      title === DEFAULT.DOCUMENT_NAME ? "" : title
+    }</div>`;
+  };
+
+  this.setEvent = () => {
+    addEvent(this.$target, "keyup", "[name=title]", (event) => {
+      onEdit(event.target.innerText, "title");
+    });
+  };
+
+  this.init();
+}
diff --git a/src/components/sidebar/Details.js b/src/components/sidebar/Details.js
@@ -0,0 +1,60 @@
+import DocumentItem from "./DocumentItem.js";
+import { createDocumentsListElement, findDocumentElement } from "../../utils/helper.js";
+
+export default function Details({
+  $target,
+  initialState = {
+    id: null,
+    title: "",
+    documents: [],
+  },
+  onAddButtonClick,
+}) {
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.render();
+  };
+
+  this.render = () => {
+    const { documents } = this.state;
+
+    this.$target.innerHTML = `
+      <details id="document-details">
+        <summary></summary>
+        <ul>${createDocumentsListElement(documents)}</ul>
+      </details>
+    `;
+
+    this.mounted();
+  };
+
+  this.mounted = () => {
+    const $rootDocument = this.$target.querySelector("summary");
+    const { id, title, documents } = this.state;
+
+    new DocumentItem({
+      $target: $rootDocument,
+      initialState: { id, title },
+      onAddButtonClick,
+    });
+
+    documents.forEach(({ id, title, documents }) => {
+      const $target = findDocumentElement(id);
+
+      new Details({
+        $target,
+        initialState: { title, id, documents },
+        onAddButtonClick,
+      });
+    });
+  };
+
+  this.setState = (nextState) => {
+    this.state = { ...this.state, ...nextState };
+    this.render();
+  };
+
+  this.init();
+}