Page showing, page edit, move API to /api/ (#10)

src/frontend/js/classes/editor.js

@@ -7,8 +7,9 @@ import Header from 'codex.editor.header';
 export default class Editor {
   /**
    * Creates Editor instance
+   * @property {object} initialData - data to start with
    */
-  constructor() {
+  constructor({initialData}) {
     this.editor = new CodeXEditor({
       tools: {
         header: {
@@ -18,7 +19,7 @@ export default class Editor {
           }
         }
       },
-      data: {
+      data: initialData || {
         blocks: [
           {
             type: 'header',

src/frontend/js/modules/writing.js

@@ -7,6 +7,12 @@
  * @property {string} version - used Editor version
  * @property {number} time - saving time
  */
+
+/**
+ * @typedef {object} writingSettings
+ * @property {{_id, _parent, title, body: editorData}} [page] - page data for editing
+ */
+
 /**
  * @class Writing
  * @classdesc Class for create/edit pages
@@ -17,6 +23,7 @@ export default class Writing {
    */
   constructor() {
     this.editor = null;
+    this.page = null; // stores Page on editing
     this.nodes = {
       editorWrapper: null,
       saveButton: null,
@@ -26,10 +33,10 @@ export default class Writing {
 
   /**
    * Called by ModuleDispatcher to initialize module from DOM
-   * @param {object} settings - module settings
+   * @param {writingSettings} settings - module settings
    * @param {HTMLElement} moduleEl - module element
    */
-  init(settings, moduleEl) {
+  init(settings = {}, moduleEl) {
     /**
      * Create Editor
      */
@@ -38,6 +45,10 @@ export default class Writing {
 
     moduleEl.appendChild(this.nodes.editorWrapper);
 
+    if (settings.page){
+      this.page = settings.page;
+    }
+
     this.loadEditor().then((editor) => {
       this.editor = editor;
     });
@@ -59,7 +70,9 @@ export default class Writing {
   async loadEditor() {
     const {default: Editor} = await import(/* webpackChunkName: "editor" */ './../classes/editor');
 
-    return new Editor();
+    return new Editor({
+      initialData: this.page ? this.page.body : null
+    });
   }
 
   /**
@@ -88,10 +101,11 @@ export default class Writing {
   async saveButtonClicked() {
     try {
       const writingData = await this.getData();
+      const endpoint = this.page ? '/api/page/' + this.page._id : '/api/page';
 
       try {
-        let response = await fetch('/page', {
-          method: 'PUT',
+        let response = await fetch(endpoint, {
+          method: this.page ? 'POST' : 'PUT',
           headers: {
             'Content-Type': 'application/json; charset=utf-8'
           },

src/frontend/styles/components/page.pcss

@@ -0,0 +1,57 @@
+.page {
+  font-size: 16px;
+  line-height: 1.6;
+
+  &__header {
+    display: flex;
+    color: var(--color-text-second);
+
+    &-nav {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        color: var(--color-link-active);
+      }
+
+      &:not(:last-of-type) {
+        &::after {
+          content: '»';
+          margin: 0 0.7em 0 0.45em;
+        }
+      }
+    }
+
+    &-time {
+      margin-left: auto;
+    }
+
+    &-button {
+      @apply --button;
+      padding: 5px 10px;
+      font-size: 13px;
+      margin-left: 10px;
+    }
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: -0.04px;
+    margin-bottom: -0.2em;
+  }
+}
+
+.block-header {
+  margin: 1.5em 0 0.5em;
+
+  &--2 {
+    font-size: 22px;
+    font-weight: 500;
+  }
+
+  &--3 {
+    font-size: 18px;
+    font-weight: 500;
+  }
+}

src/frontend/styles/main.pcss

@@ -4,6 +4,7 @@
 @import url('components/header.pcss');
 @import url('components/aside.pcss');
 @import url('components/writing.pcss');
+@import url('components/page.pcss');
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;

src/frontend/styles/vars.pcss

@@ -9,7 +9,7 @@
    */
   --layout-padding-horisontal: 40px;
   --layout-padding-vertical: 40px;
-  --layout-width-aside: 250px;
+  --layout-width-aside: 200px;
   --layout-width-main-col: 650px;
 
   --button {
@@ -20,6 +20,7 @@
     padding: 9px 15px;
     font-size: 14px;
     line-height: 1em;
+    text-decoration: none;
 
     svg {
       margin: 0 0.3em 0 -0.05em;