WIP: use containers

src/client/js/app.js

@@ -45,7 +45,7 @@ import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 import GroupDeleteModal from './components/GroupDeleteModal/GroupDeleteModal';
 
-import AppContextContainer from './services/AppContextContainer';
+import AppContainer from './services/AppContainer';
 import PageContainer from './services/PageContainer';
 import CommentContainer from './components/PageComment/CommentContainer';
 import EditorContainer from './services/EditorContainer';
@@ -95,23 +95,23 @@ if (mainContent !== null) {
 }
 const isLoggedin = document.querySelector('.main-container.nologin') == null;
 
-const appContextContainer = new AppContextContainer();
+const appContainer = new AppContainer();
 
 // backward compatibility
-const crowi = appContextContainer;
-window.crowi = appContextContainer;
+const crowi = appContainer;
+window.crowi = appContainer;
 
 if (isLoggedin) {
-  appContextContainer.fetchUsers();
+  appContainer.fetchUsers();
 }
 
-const socket = crowi.getWebSocket();
-const socketClientId = crowi.getSocketClientId();
+const socket = appContainer.getWebSocket();
+const socketClientId = appContainer.getSocketClientId();
 
 const crowiRenderer = new GrowiRenderer(crowi, null, {
   mode: 'page',
   isAutoSetup: false, // manually setup because plugins may configure it
-  renderToc: crowi.getCrowiForJquery().renderTocContent, // function for rendering Table Of Contents
+  renderToc: appContainer.getCrowiForJquery().renderTocContent, // function for rendering Table Of Contents
 });
 window.crowiRenderer = crowiRenderer;
 
@@ -145,7 +145,7 @@ const componentInstances = {};
  * @param {object} page Page instance
  */
 const saveWithShortcutSuccessHandler = function(page) {
-  const editorMode = crowi.getCrowiForJquery().getCurrentEditorMode();
+  const editorMode = appContainer.getCrowiForJquery().getCurrentEditorMode();
 
   // show toastr
   toastr.success(undefined, 'Saved successfully', {
@@ -163,7 +163,7 @@ const saveWithShortcutSuccessHandler = function(page) {
   pageRevisionIdHackmdSynced = page.revisionHackmdSynced;
 
   // set page id to SavePageControls
-  componentInstances.savePageControls.setPageId(pageId);
+  pageContainer.setState({ pageId });
 
   // Page component
   if (componentInstances.page != null) {
@@ -207,11 +207,11 @@ const errorHandler = function(error) {
 };
 
 const saveWithShortcut = function(markdown) {
-  const editorMode = crowi.getCrowiForJquery().getCurrentEditorMode();
+  const editorMode = appContainer.getCrowiForJquery().getCurrentEditorMode();
 
   let revisionId = pageRevisionId;
   // get options
-  const options = componentInstances.savePageControls.getCurrentOptionsToSave();
+  const options = pageContainer.getCurrentOptionsToSave();
   options.socketClientId = socketClientId;
   options.pageTags = pageTags;
 
@@ -224,10 +224,10 @@ const saveWithShortcut = function(markdown) {
 
   let promise;
   if (pageId == null) {
-    promise = crowi.createPage(pagePath, markdown, options);
+    promise = appContainer.createPage(pagePath, markdown, options);
   }
   else {
-    promise = crowi.updatePage(pageId, revisionId, markdown, options);
+    promise = appContainer.updatePage(pageId, revisionId, markdown, options);
   }
 
   promise
@@ -236,12 +236,12 @@ const saveWithShortcut = function(markdown) {
 };
 
 const saveWithSubmitButtonSuccessHandler = function() {
-  crowi.clearDraft(pagePath);
+  appContainer.clearDraft(pagePath);
   window.location.href = pagePath;
 };
 
 const saveWithSubmitButton = function(submitOpts) {
-  const editorMode = crowi.getCrowiForJquery().getCurrentEditorMode();
+  const editorMode = appContainer.getCrowiForJquery().getCurrentEditorMode();
   if (editorMode == null) {
     // do nothing
     return;
@@ -272,12 +272,12 @@ const saveWithSubmitButton = function(submitOpts) {
   // create or update
   if (pageId == null) {
     promise = promise.then((markdown) => {
-      return crowi.createPage(pagePath, markdown, options);
+      return appContainer.createPage(pagePath, markdown, options);
     });
   }
   else {
     promise = promise.then((markdown) => {
-      return crowi.updatePage(pageId, revisionId, markdown, options);
+      return appContainer.updatePage(pageId, revisionId, markdown, options);
     });
   }
 
@@ -290,7 +290,7 @@ const saveWithSubmitButton = function(submitOpts) {
 crowiRenderer.setup();
 
 // restore draft when the first time to edit
-const draft = crowi.findDraft(pagePath);
+const draft = appContainer.findDraft(pagePath);
 if (!pageRevisionId && draft != null) {
   markdown = draft;
 }
@@ -357,7 +357,7 @@ Object.keys(componentMappings).forEach((key) => {
 
 // set page if exists
 if (componentInstances.page != null) {
-  crowi.setPage(componentInstances.page);
+  appContainer.setPage(componentInstances.page);
 }
 
 // render LikeButton
@@ -397,9 +397,8 @@ const savePageControlsElem = document.getElementById('save-page-controls');
 if (savePageControlsElem) {
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <Provider inject={[pageContainer]}>
+      <Provider inject={[appContainer, pageContainer]}>
         <SavePageControls
-          crowi={crowi}
           onSubmit={saveWithSubmitButton}
           ref={(elem) => {
               if (savePageControls == null) {
@@ -416,7 +415,7 @@ if (savePageControlsElem) {
 
 const recentCreatedControlsElem = document.getElementById('user-created-list');
 if (recentCreatedControlsElem) {
-  let limit = crowi.getConfig().recentCreatedLimit;
+  let limit = appContainer.getConfig().recentCreatedLimit;
   if (limit == null) {
     limit = 10;
   }
@@ -429,7 +428,7 @@ if (recentCreatedControlsElem) {
 
 const myDraftControlsElem = document.getElementById('user-draft-list');
 if (myDraftControlsElem) {
-  let limit = crowi.getConfig().recentCreatedLimit;
+  let limit = appContainer.getConfig().recentCreatedLimit;
   if (limit == null) {
     limit = 10;
   }
@@ -500,7 +499,7 @@ if (pageEditorElem) {
   );
   componentInstances.pageEditor = pageEditor;
   // set refs for setCaretLine/forceToFocus when tab is changed
-  crowi.setPageEditor(pageEditor);
+  appContainer.setPageEditor(pageEditor);
 }
 
 // render comment form

src/client/js/components/SavePageControls.jsx

@@ -9,16 +9,18 @@ import SplitButton from 'react-bootstrap/es/SplitButton';
 import MenuItem from 'react-bootstrap/es/MenuItem';
 
 import PageContainer from '../services/PageContainer';
+import AppContainer from '../services/AppContainer';
 
 import SlackNotification from './SlackNotification';
 import GrantSelector from './SavePageControls/GrantSelector';
 
+
 class SavePageControls extends React.PureComponent {
 
   constructor(props) {
     super(props);
 
-    const config = this.props.crowi.getConfig();
+    const config = this.props.appContainer.getConfig();
     this.hasSlackConfig = config.hasSlackConfig;
     this.isAclEnabled = config.isAclEnabled;
 
@@ -30,7 +32,7 @@ class SavePageControls extends React.PureComponent {
   }
 
   submit() {
-    this.props.crowi.setIsDocSaved(true);
+    this.props.appContainer.setIsDocSaved(true);
     this.props.onSubmit();
   }
 
@@ -60,7 +62,6 @@ class SavePageControls extends React.PureComponent {
           && (
           <div className="mr-2">
             <GrantSelector
-              crowi={this.props.crowi}
               ref={(elem) => {
                   if (this.grantSelector == null) {
                     this.grantSelector = elem;
@@ -99,10 +100,10 @@ class SavePageControlsWrapper extends React.PureComponent {
 
   render() {
     return (
-      <Subscribe to={[PageContainer]}>
-        { pageContainer => (
+      <Subscribe to={[AppContainer, PageContainer]}>
+        { (appContainer, pageContainer) => (
           // eslint-disable-next-line arrow-body-style
-          <SavePageControls pageContainer={pageContainer} {...this.props} />
+          <SavePageControls appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
         )}
       </Subscribe>
     );
@@ -112,14 +113,13 @@ class SavePageControlsWrapper extends React.PureComponent {
 
 SavePageControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   onSubmit: PropTypes.func.isRequired,
 };
 
 SavePageControlsWrapper.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
   onSubmit: PropTypes.func.isRequired,
 };
 

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -11,6 +11,7 @@ import ListGroupItem from 'react-bootstrap/es/ListGroupItem';
 import Modal from 'react-bootstrap/es/Modal';
 
 import PageContainer from '../../services/PageContainer';
+import AppContainer from '../../services/AppContainer';
 
 const SPECIFIED_GROUP_VALUE = 'specifiedGroup';
 
@@ -108,7 +109,7 @@ class GrantSelector extends React.Component {
    * Retrieve user-group-relations data from backend
    */
   retrieveUserGroupRelations() {
-    this.props.crowi.apiGet('/me/user-group-relations')
+    this.props.appContainer.apiGet('/me/user-group-relations')
       .then((res) => {
         return res.userGroupRelations;
       })
@@ -240,7 +241,7 @@ class GrantSelector extends React.Component {
       ? (
         <div>
           <h4>There is no group to which you belong.</h4>
-          { this.props.crowi.isAdmin
+          { this.props.appContainer.isAdmin
             && <p><a href="/admin/user-groups"><i className="icon icon-fw icon-login"></i> Manage Groups</a></p>
           }
         </div>
@@ -289,10 +290,10 @@ class GrantSelectorWrapper extends React.PureComponent {
 
   render() {
     return (
-      <Subscribe to={[PageContainer]}>
-        { pageContainer => (
+      <Subscribe to={[AppContainer, PageContainer]}>
+        { (appContainer, pageContainer) => (
           // eslint-disable-next-line arrow-body-style
-          <GrantSelector pageContainer={pageContainer} {...this.props} />
+          <GrantSelector appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
         )}
       </Subscribe>
     );
@@ -303,12 +304,11 @@ class GrantSelectorWrapper extends React.PureComponent {
 
 GrantSelector.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 GrantSelectorWrapper.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
 };
 
 export default withTranslation(null, { withRef: true })(GrantSelectorWrapper);

src/client/js/services/AppContextContainer.js → src/client/js/services/AppContainer.js

@@ -16,7 +16,7 @@ import {
  * Service container related to options for Application
  * @extends {Container} unstated Container
  */
-export default class AppContextContainer extends Container {
+export default class AppContainer extends Container {
 
   constructor() {
     super();