refactor using UnstatedUtils

src/client/js/components/Page.jsx

@@ -1,11 +1,10 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
+import { createSubscribedElement } from './UnstatedUtils';
 import RevisionRenderer from './Page/RevisionRenderer';
 import HandsontableModal from './PageEditor/HandsontableModal';
 import MarkdownTable from '../models/MarkdownTable';
@@ -64,29 +63,15 @@ class Page extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class PageWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <Page appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
+const PageWrapper = (props) => {
+  return createSubscribedElement(Page, props, [AppContainer, PageContainer]);
+};
 
-}
 
 Page.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  crowiRenderer: PropTypes.object.isRequired,
-  onSaveWithShortcut: PropTypes.func.isRequired,
-};
 
-PageWrapper.propTypes = {
   crowiRenderer: PropTypes.object.isRequired,
   onSaveWithShortcut: PropTypes.func.isRequired,
 };

src/client/js/components/Page/RevisionRenderer.jsx

@@ -1,11 +1,10 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 
+import { createSubscribedElement } from '../UnstatedUtils';
 import RevisionBody from './RevisionBody';
 
 class RevisionRenderer extends React.Component {
@@ -109,20 +108,9 @@ class RevisionRenderer extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class RevisionRendererWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <RevisionRenderer appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const RevisionRendererWrapper = (props) => {
+  return createSubscribedElement(RevisionRenderer, props, [AppContainer, PageContainer]);
+};
 
 RevisionRenderer.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -131,9 +119,4 @@ RevisionRenderer.propTypes = {
   highlightKeywords: PropTypes.string,
 };
 
-RevisionRendererWrapper.propTypes = {
-  crowiRenderer: PropTypes.object.isRequired,
-  highlightKeywords: PropTypes.string,
-};
-
 export default RevisionRendererWrapper;

src/client/js/components/PageComment/Comment.jsx

@@ -1,15 +1,13 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 
 import dateFnsFormat from 'date-fns/format';
 
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 
+import { createSubscribedElement } from '../UnstatedUtils';
 import RevisionBody from '../Page/RevisionBody';
-
 import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
 
@@ -212,20 +210,9 @@ class Comment extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class CommentWrapper extends React.Component {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <Comment appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const CommentWrapper = (props) => {
+  return createSubscribedElement(Comment, props, [AppContainer, PageContainer]);
+};
 
 Comment.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -238,12 +225,4 @@ Comment.propTypes = {
   revisionCreatedAt: PropTypes.number,
 };
 
-CommentWrapper.propTypes = {
-  comment: PropTypes.object.isRequired,
-  crowiRenderer: PropTypes.object.isRequired,
-  deleteBtnClicked: PropTypes.func.isRequired,
-  replyList: PropTypes.array,
-  revisionCreatedAt: PropTypes.number,
-};
-
 export default CommentWrapper;

src/client/js/components/PageComment/CommentEditor.jsx

@@ -1,9 +1,6 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Subscribe } from 'unstated';
-
 import Button from 'react-bootstrap/es/Button';
 import Tab from 'react-bootstrap/es/Tab';
 import Tabs from 'react-bootstrap/es/Tabs';
@@ -13,6 +10,7 @@ import AppContainer from '../../services/AppContainer';
 import CommentContainer from '../../services/CommentContainer';
 import GrowiRenderer from '../../util/GrowiRenderer';
 
+import { createSubscribedElement } from '../UnstatedUtils';
 import UserPicture from '../User/UserPicture';
 import Editor from '../PageEditor/Editor';
 import SlackNotification from '../SlackNotification';
@@ -322,20 +320,9 @@ class CommentEditor extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class CommentEditorWrapper extends React.Component {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, CommentContainer]}>
-        { (appContainer, commentContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <CommentEditor appContainer={appContainer} commentContainer={commentContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const CommentEditorWrapper = (props) => {
+  return createSubscribedElement(CommentEditor, props, [AppContainer, CommentContainer]);
+};
 
 CommentEditor.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -346,11 +333,5 @@ CommentEditor.propTypes = {
   replyTo: PropTypes.string,
   commentButtonClickedHandler: PropTypes.func.isRequired,
 };
-CommentEditorWrapper.propTypes = {
-  crowiOriginRenderer: PropTypes.object.isRequired,
-  slackChannels: PropTypes.string,
-  replyTo: PropTypes.string,
-  commentButtonClickedHandler: PropTypes.func.isRequired,
-};
 
 export default CommentEditorWrapper;

src/client/js/components/PageComments.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-/* eslint-disable react/no-access-state-in-setstate */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -237,6 +235,9 @@ class PageComments extends React.Component {
 
 }
 
+/**
+ * Wrapper component for using unstated
+ */
 const PageCommentsWrapper = (props) => {
   return createSubscribedElement(PageComments, props, [AppContainer, PageContainer, CommentContainer]);
 };

src/client/js/components/PageEditor.jsx

@@ -1,7 +1,5 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 
 import { throttle, debounce } from 'throttle-debounce';
 
@@ -11,6 +9,7 @@ import GrowiRenderer from '../util/GrowiRenderer';
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
+import { createSubscribedElement } from './UnstatedUtils';
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
 import scrollSyncHelper from './PageEditor/ScrollSyncHelper';
@@ -362,20 +361,9 @@ class PageEditor extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class PageEditorWrapper extends React.Component {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <PageEditor appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const PageEditorWrapper = (props) => {
+  return createSubscribedElement(PageEditor, props, [AppContainer, PageContainer]);
+};
 
 PageEditor.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -385,9 +373,4 @@ PageEditor.propTypes = {
   onSaveWithShortcut: PropTypes.func.isRequired,
 };
 
-PageEditorWrapper.propTypes = {
-  crowiRenderer: PropTypes.object.isRequired,
-  onSaveWithShortcut: PropTypes.func.isRequired,
-};
-
 export default PageEditorWrapper;

src/client/js/components/PageEditor/OptionsSelector.jsx

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
+
 import { withTranslation } from 'react-i18next';
 
 import FormGroup from 'react-bootstrap/es/FormGroup';
@@ -11,6 +10,7 @@ import ControlLabel from 'react-bootstrap/es/ControlLabel';
 import Dropdown from 'react-bootstrap/es/Dropdown';
 import MenuItem from 'react-bootstrap/es/MenuItem';
 
+import { createSubscribedElement } from '../UnstatedUtils';
 import EditorContainer from '../../services/EditorContainer';
 
 
@@ -277,29 +277,15 @@ class OptionsSelector extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class OptionsSelectorWrapper extends React.Component {
-
-  render() {
-    return (
-      <Subscribe to={[EditorContainer]}>
-        { editorContainer => (
-          // eslint-disable-next-line arrow-body-style
-          <OptionsSelector editorContainer={editorContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
-
+const OptionsSelectorWrapper = (props) => {
+  return createSubscribedElement(OptionsSelector, props, [EditorContainer]);
+};
 
 OptionsSelector.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  crowi: PropTypes.object.isRequired,
+
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
-};
-OptionsSelectorWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
+
   crowi: PropTypes.object.isRequired,
 };
 

src/client/js/components/PageEditor/Preview.jsx

@@ -10,7 +10,7 @@ import EditorContainer from '../../services/EditorContainer';
 /**
  * Wrapper component for Page/RevisionBody
  */
-export default class Preview extends React.Component {
+export default class Preview extends React.PureComponent {
 
   render() {
     return (

src/client/js/components/PageEditorByHackmd.jsx

@@ -1,7 +1,5 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
 
 import SplitButton from 'react-bootstrap/es/SplitButton';
 import MenuItem from 'react-bootstrap/es/MenuItem';
@@ -10,6 +8,7 @@ import * as toastr from 'toastr';
 
 import AppContainer from '../services/AppContainer';
 
+import { createSubscribedElement } from './UnstatedUtils';
 import HackmdEditor from './PageEditorByHackmd/HackmdEditor';
 
 class PageEditorByHackmd extends React.PureComponent {
@@ -308,20 +307,9 @@ class PageEditorByHackmd extends React.PureComponent {
 /**
  * Wrapper component for using unstated
  */
-class PageEditorByHackmdWrapper extends React.Component {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer]}>
-        { appContainer => (
-          // eslint-disable-next-line arrow-body-style
-          <PageEditorByHackmd appContainer={appContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const PageEditorByHackmdWrapper = (props) => {
+  return createSubscribedElement(PageEditorByHackmd, props, [AppContainer]);
+};
 
 PageEditorByHackmd.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
@@ -336,15 +324,4 @@ PageEditorByHackmd.propTypes = {
   hasDraftOnHackmd: PropTypes.bool,
 };
 
-PageEditorByHackmdWrapper.propTypes = {
-  crowi: PropTypes.object.isRequired,
-  markdown: PropTypes.string.isRequired,
-  onSaveWithShortcut: PropTypes.func.isRequired,
-  pageId: PropTypes.string,
-  revisionId: PropTypes.string,
-  pageIdOnHackmd: PropTypes.string,
-  revisionIdHackmdSynced: PropTypes.string,
-  hasDraftOnHackmd: PropTypes.bool,
-};
-
 export default PageEditorByHackmdWrapper;

src/client/js/components/PageStatusAlert.jsx

@@ -1,11 +1,13 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { withTranslation } from 'react-i18next';
-import { Subscribe } from 'unstated';
+
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
+import { createSubscribedElement } from './UnstatedUtils';
+
 /**
  *
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -116,20 +118,9 @@ class PageStatusAlert extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-class PageStatusAlertWrapper extends React.Component {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <PageStatusAlert appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const PageStatusAlertWrapper = (props) => {
+  return createSubscribedElement(PageStatusAlert, props, [AppContainer, PageContainer]);
+};
 
 PageStatusAlert.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -138,8 +129,4 @@ PageStatusAlert.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
-PageStatusAlertWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
-
 export default withTranslation(null, { withRef: true })(PageStatusAlertWrapper);

src/client/js/components/SavePageControls.jsx

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
+
 import { withTranslation } from 'react-i18next';
 
 import ButtonToolbar from 'react-bootstrap/es/ButtonToolbar';
@@ -11,6 +10,7 @@ import MenuItem from 'react-bootstrap/es/MenuItem';
 import PageContainer from '../services/PageContainer';
 import AppContainer from '../services/AppContainer';
 
+import { createSubscribedElement } from './UnstatedUtils';
 import SlackNotification from './SlackNotification';
 import GrantSelector from './SavePageControls/GrantSelector';
 
@@ -92,34 +92,19 @@ class SavePageControls extends React.PureComponent {
 
 }
 
-
 /**
  * Wrapper component for using unstated
  */
-class SavePageControlsWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <SavePageControls appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
+const SavePageControlsWrapper = (props) => {
+  return createSubscribedElement(SavePageControls, props, [AppContainer, PageContainer]);
+};
 
 SavePageControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  onSubmit: PropTypes.func.isRequired,
-};
 
-SavePageControlsWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   onSubmit: PropTypes.func.isRequired,
 };
 

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

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Subscribe } from 'unstated';
+
 import { withTranslation } from 'react-i18next';
 
 import FormGroup from 'react-bootstrap/es/FormGroup';
@@ -10,6 +9,7 @@ import ListGroup from 'react-bootstrap/es/ListGroup';
 import ListGroupItem from 'react-bootstrap/es/ListGroupItem';
 import Modal from 'react-bootstrap/es/Modal';
 
+import { createSubscribedElement } from '../UnstatedUtils';
 import PageContainer from '../../services/PageContainer';
 import AppContainer from '../../services/AppContainer';
 
@@ -282,33 +282,17 @@ class GrantSelector extends React.Component {
 
 }
 
-
 /**
  * Wrapper component for using unstated
  */
-class GrantSelectorWrapper extends React.PureComponent {
-
-  render() {
-    return (
-      <Subscribe to={[AppContainer, PageContainer]}>
-        { (appContainer, pageContainer) => (
-          // eslint-disable-next-line arrow-body-style
-          <GrantSelector appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
-        )}
-      </Subscribe>
-    );
-  }
-
-}
-
+const GrantSelectorWrapper = (props) => {
+  return createSubscribedElement(GrantSelector, props, [AppContainer, PageContainer]);
+};
 
 GrantSelector.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
-GrantSelectorWrapper.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-};
 
 export default withTranslation(null, { withRef: true })(GrantSelectorWrapper);