WIP: editing tags data

src/client/js/app.js

@@ -48,6 +48,7 @@ import AppContainer from './services/AppContainer';
 import PageContainer from './services/PageContainer';
 import CommentContainer from './services/CommentContainer';
 import EditorContainer from './services/EditorContainer';
+import TagContainer from './services/TagContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 
 const logger = loggerFactory('growi:app');
@@ -71,8 +72,9 @@ const websocketContainer = new WebsocketContainer(appContainer);
 const pageContainer = new PageContainer(appContainer);
 const commentContainer = new CommentContainer(appContainer);
 const editorContainer = new EditorContainer(appContainer, defaultEditorOptions, defaultPreviewOptions);
+const tagContainer = new TagContainer(appContainer);
 const injectableContainers = [
-  appContainer, websocketContainer, pageContainer, commentContainer, editorContainer,
+  appContainer, websocketContainer, pageContainer, commentContainer, editorContainer, tagContainer,
 ];
 window.appContainer = appContainer;
 
@@ -170,7 +172,7 @@ const saveWithShortcut = function(markdown) {
   // get options
   const options = pageContainer.getCurrentOptionsToSave();
   options.socketClientId = websocketContainer.getCocketClientId();
-  // options.pageTags = pageTags;
+  options.pageTags = editorContainer.state.tags;
 
   if (editorMode === 'hackmd') {
     // set option to sync
@@ -209,7 +211,7 @@ const saveWithSubmitButton = function(submitOpts) {
   // get options
   const options = pageContainer.getCurrentOptionsToSave();
   options.socketClientId = websocketContainer.getCocketClientId();
-  // options.pageTags = pageTags;
+  options.pageTags = editorContainer.state.tags;
 
   // set 'submitOpts.overwriteScopesOfDescendants' to options
   options.overwriteScopesOfDescendants = submitOpts ? !!submitOpts.overwriteScopesOfDescendants : false;

src/client/js/services/EditorContainer.js

@@ -13,6 +13,7 @@ export default class EditorContainer extends Container {
     this.appContainer.registerContainer(this);
 
     this.state = {
+      tags: [],
       editorOptions: {},
       previewOptions: {},
     };

src/client/js/services/PageContainer.js

@@ -57,7 +57,6 @@ export default class PageContainer extends Container {
     this.initStateMarkdown();
     this.initStateGrant();
     this.initDrafts();
-    this.retrieveTags();
 
     this.addWebSocketEventHandlers = this.addWebSocketEventHandlers.bind(this);
     this.addWebSocketEventHandlers();
@@ -95,23 +94,6 @@ export default class PageContainer extends Container {
     }
   }
 
-  /**
-   * retrieve tags data
-   */
-  async retrieveTags() {
-    const { pageId, templateTagData } = this.state;
-
-    // when the page exists
-    if (pageId != null) {
-      const res = await this.appContainer.apiGet('/pages.getPageTag', { pageId });
-      this.setState({ tags: res.tags });
-    }
-    // when the page not exist
-    else if (templateTagData != null) {
-      this.setState({ tags: templateTagData.split(',') });
-    }
-  }
-
   /**
    * initialize state for drafts
    */

src/client/js/services/TagContainer.js

@@ -0,0 +1,50 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+const logger = loggerFactory('growi:services:TagContainer');
+
+/**
+ * Service container related to Tag
+ * @extends {Container} unstated Container
+ */
+export default class TagContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+    this.appContainer.registerContainer(this);
+
+    this.init();
+  }
+
+  /**
+   * retrieve tags data
+   * !! This method should be invoked after PageContainer and EditorContainer has been initialized !!
+   */
+  async init() {
+    const pageContainer = this.appContainer.getContainer('PageContainer');
+    const editorContainer = this.appContainer.getContainer('EditorContainer');
+
+    const { pageId, templateTagData } = pageContainer.state;
+
+    let tags;
+
+    // when the page exists
+    if (pageId != null) {
+      const res = await this.appContainer.apiGet('/pages.getPageTag', { pageId });
+      tags = res.tags;
+    }
+    // when the page not exist
+    else if (templateTagData != null) {
+      tags = templateTagData.split(',');
+    }
+
+    logger.debug('tags data has been initialized');
+
+    pageContainer.setState({ tags });
+    editorContainer.setState({ tags });
+  }
+
+}