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 @@
+.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,30 @@
+import MainPage from "./pages/MainPage.js";
+import NotFound from "./pages/NotFound.js";
+import Router from "./Router.js";
+
+import { routes } from "./constants/routes.js";
+
+export default function App({ $target }) {
+  this.$target = $target;
+  this.state = { currentPage: null };
+
+  this.init = () => {
+    this.currentPage = new MainPage({ $target: this.$target });
+    new Router({ $target: this.$target, onRoute: this.route.bind(this) });
+  };
+
+  this.route = () => {
+    const findMatchedRoute = () => routes.find((route) => route.path.test(location.pathname));
+    const Page = findMatchedRoute()?.element || NotFound;
+    const [, , documentId] = location.pathname.split("/");
+
+    if (documentId) {
+      this.currentPage.setState({ documentId });
+    }
+
+    console.log(window.location.pathname);
+    console.log(/^\/documents\//.test(location.pathname));
+  };
+
+  this.init();
+}
diff --git a/src/Router.js b/src/Router.js
@@ -0,0 +1,29 @@
+import NotFound from "./pages/NotFound.js";
+
+import { HISTORY_CHANGE_EVENT_NAME, routes } from "./constants/routes.js";
+
+export default function Router({ $target, onRoute }) {
+  this.$target = $target;
+  this.state = { currentPage: null };
+
+  this.init = () => {
+    window.addEventListener(HISTORY_CHANGE_EVENT_NAME, ({ detail }) => {
+      const { to, isReplace } = detail;
+
+      if (isReplace || to === location.pathname) {
+        history.replaceState(null, "", to);
+      } else {
+        history.pushState(null, "", to);
+      }
+
+      onRoute();
+    });
+
+    window.addEventListener("popstate", () => {
+      onRoute();
+    });
+  };
+
+  this.init();
+  onRoute();
+}
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 { USER } from "../../config.js";
+import { debounce } from "../../utils/debounce.js";
+import { getItemFromStorage, setItemToStorage } from "../../utils/storage.js";
+
+export default function Document({
+  $target,
+  initialState = {
+    documentId: null,
+  },
+}) {
+  const handleDocumentEdit = debounce(async (text, type = "title") => {
+    const storedItem = getItemFromStorage("notion", { currentDocument: {} });
+
+    storedItem.currentDocument = {
+      ...storedItem.currentDocument,
+      [type]: text,
+      tempSavedAt: new Date(),
+    };
+    setItemToStorage("notion", { ...storedItem });
+    await updateDocument(this.state.documentId, storedItem.currentDocument);
+  }, 300);
+
+  const fetchDocument = async (documentId) => {
+    const response = await API.getDocuments(documentId);
+
+    if (!response) {
+      return [{ title: "", content: "" }, {}];
+    }
+    return [{ title: response.title, content: response.content }, response];
+  };
+
+  const updateDocument = async (documentId, newDocument) => {
+    const { title, content } = newDocument;
+    await API.updateDocument(documentId, { title, content });
+  };
+
+  const renderNoDocument = ($container) => {
+    $container.innerHTML = `<h1>🎉 Welcome to ${USER.NAME}'s Notion! 🎉</h1>`;
+  };
+
+  const renderNewDocument = ($header, $body) => {
+    new DocumentHeader({ $target: $header, onEdit: handleDocumentEdit.bind(this) });
+    new DocumentContent({ $target: $body, onEdit: handleDocumentEdit.bind(this) });
+  };
+
+  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: handleDocumentEdit.bind(this),
+    });
+    new DocumentContent({
+      $target: $body,
+      initialState: { content },
+      onEdit: handleDocumentEdit.bind(this),
+    });
+  };
+
+  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);
+    } else if (!!documentId) {
+      console.log(documentId);
+      renderDocumentById($header, $body);
+    } else {
+      renderNoDocument($container);
+    }
+  };
+
+  this.setEvent = () => {};
+
+  this.init();
+}
diff --git a/src/components/document/DocumentContent.js b/src/components/document/DocumentContent.js
@@ -0,0 +1,39 @@
+import { addEvent } from "../../utils/event.js";
+
+export default function DocumentContent({
+  $target,
+  initialState = {
+    content: "",
+  },
+  onEdit,
+}) {
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.setEvent();
+    this.render();
+  };
+
+  this.setState = (newState) => {
+    this.state = { ...this.state, ...newState };
+    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">${
+        content ?? ""
+      }</div>
+    `;
+  };
+
+  this.setEvent = () => {
+    addEvent(this.$target, "keyup", "[name=content]", (event) => {
+      onEdit(event.target.innerText, "content");
+    });
+  };
+  this.init();
+}
diff --git a/src/components/document/DocumentHeader.js b/src/components/document/DocumentHeader.js
@@ -0,0 +1,39 @@
+import { DEFAULT } from "../../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.setState = () => {
+    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,68 @@
+import DocumentItem from "./DocumentItem.js";
+
+import { $documentsList } from "../../utils/templates.js";
+
+export default function Details({
+  $target,
+  initialState = {
+    id: null,
+    title: "",
+    documents: [],
+  },
+  onAddButtonClick,
+}) {
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.render();
+  };
+
+  this.setState = (nextState) => {
+    this.state = { ...this.state, ...nextState };
+    this.render();
+  };
+
+  this.render = () => {
+    const { documents } = this.state;
+
+    this.$target.innerHTML = `
+      <details id="document-details">
+        <summary></summary>
+        <ul>${$documentsList(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 $li = this.$target.querySelector(`[data-document-id="${id}"]`);
+
+      new Details({
+        $target: $li,
+        initialState: {
+          title,
+          id,
+          documents,
+        },
+        onAddButtonClick,
+      });
+    });
+  };
+
+  this.init();
+}
diff --git a/src/components/sidebar/DocumentItem.js b/src/components/sidebar/DocumentItem.js
@@ -0,0 +1,32 @@
+export default function DocumentItem({ $target, initialState }) {
+  this.$target = $target;
+  this.state = initialState;
+
+  this.init = () => {
+    this.render();
+  };
+
+  this.render = () => {
+    const { title, id } = this.state;
+
+    this.$target.innerHTML = `
+      <div id="document-item" data-document-id="${id}">
+        <svg viewBox="0 0 12 12" class="arrow">
+          <path
+            d="M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z">
+          </path>
+        </svg>
+        <svg viewBox="0 0 30 30" class="page">
+          <g><path d="M16,1H4v28h22V11L16,1z M16,3.828L23.172,11H16V3.828z M24,27H6V3h8v10h10V27z M8,17h14v-2H8V17z M8,21h14v-2H8V21z M8,25h14v-2H8V25z"></path></g>
+        </svg>
+        <span class="title">${title}</span>
+        <svg viewBox="0 0 16 16" class="trash hidden">
+          <path d="M4.8623 15.4287H11.1445C12.1904 15.4287 12.8672 14.793 12.915 13.7402L13.3799 3.88965H14.1318C14.4736 3.88965 14.7402 3.62988 14.7402 3.28809C14.7402 2.95312 14.4736 2.69336 14.1318 2.69336H11.0898V1.66797C11.0898 0.62207 10.4268 0 9.29199 0H6.69434C5.56641 0 4.89648 0.62207 4.89648 1.66797V2.69336H1.86133C1.5332 2.69336 1.25977 2.95312 1.25977 3.28809C1.25977 3.62988 1.5332 3.88965 1.86133 3.88965H2.62012L3.08496 13.7471C3.13281 14.7998 3.80273 15.4287 4.8623 15.4287ZM6.1543 1.72949C6.1543 1.37402 6.40039 1.14844 6.7832 1.14844H9.20312C9.58594 1.14844 9.83203 1.37402 9.83203 1.72949V2.69336H6.1543V1.72949ZM4.99219 14.2188C4.61621 14.2188 4.34277 13.9453 4.32227 13.542L3.86426 3.88965H12.1152L11.6709 13.542C11.6572 13.9453 11.3838 14.2188 10.9941 14.2188H4.99219ZM5.9834 13.1182C6.27051 13.1182 6.45508 12.9336 6.44824 12.667L6.24316 5.50293C6.23633 5.22949 6.04492 5.05176 5.77148 5.05176C5.48438 5.05176 5.2998 5.23633 5.30664 5.50293L5.51172 12.667C5.51855 12.9404 5.70996 13.1182 5.9834 13.1182ZM8 13.1182C8.28711 13.1182 8.47852 12.9336 8.47852 12.667V5.50293C8.47852 5.23633 8.28711 5.05176 8 5.05176C7.71289 5.05176 7.52148 5.23633 7.52148 5.50293V12.667C7.52148 12.9336 7.71289 13.1182 8 13.1182ZM10.0166 13.1182C10.29 13.1182 10.4746 12.9404 10.4814 12.667L10.6934 5.50293C10.7002 5.23633 10.5088 5.05176 10.2285 5.05176C9.95508 5.05176 9.76367 5.22949 9.75684 5.50293L9.54492 12.667C9.53809 12.9336 9.72949 13.1182 10.0166 13.1182Z"></path>
+        </svg>
+        <span class="add-btn hidden"> + </span>
+      </div>
+    `;
+  };
+
+  this.init();
+}