refactor UnstatedUtils and Sidebar

src/client/js/bootstrap.jsx

@@ -49,7 +49,7 @@ const componentMappings = {
   'create-page-button-icon': <PageCreateButton isIcon />,
   'page-create-modal': <PageCreateModal />,
 
-  'grw-sidebar-wrapper': <Sidebar isDrawerModeOnInit={appContainer.state.preferDrowerModeByUser} />,
+  'grw-sidebar-wrapper': <Sidebar />,
 
   'staff-credit': <StaffCredit />,
 };

src/client/js/components/Sidebar.jsx

@@ -8,7 +8,7 @@ import {
   ThemeProvider,
 } from '@atlaskit/navigation-next';
 
-import { createSubscribedElement } from './UnstatedUtils';
+import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
 import SidebarNav from './Sidebar/SidebarNav';
@@ -20,12 +20,6 @@ const sidebarDefaultWidth = 240;
 
 class Sidebar extends React.Component {
 
-  static propTypes = {
-    appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-    navigationUIController: PropTypes.any.isRequired,
-    isDrawerModeOnInit: PropTypes.bool,
-  };
-
   state = {
     isDrawerMode: this.props.isDrawerModeOnInit,
     currentContentsId: 'recent',
@@ -176,18 +170,17 @@ class Sidebar extends React.Component {
 
 }
 
-const SidebarWithNavigationUI = withNavigationUIController(Sidebar);
+Sidebar.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  navigationUIController: PropTypes.any.isRequired,
+  isDrawerModeOnInit: PropTypes.bool,
+};
 
 /**
- * Wrapper component for using unstated
+ * Wrapper component for using unstated and NavigationProvider
  */
-const SidebarWrapper = (props) => {
-  return createSubscribedElement(SidebarWithNavigationUI, props, [AppContainer]);
-};
-
-export default (props) => {
-  // eslint-disable-next-line react/prop-types
-  const { isDrawerModeOnInit } = props;
+const SidebarWithNavigation = withNavigationUIController((props) => {
+  const { preferDrowerModeByUser: isDrawerModeOnInit } = props.appContainer.state;
 
   const initUICForDrawerMode = isDrawerModeOnInit
     // generate initialUIController for Drawer mode
@@ -201,7 +194,13 @@ export default (props) => {
 
   return (
     <NavigationProvider initialUIController={initUICForDrawerMode}>
-      <SidebarWrapper isDrawerModeOnInit={isDrawerModeOnInit} />
+      <Sidebar {...props} isDrawerModeOnInit />
     </NavigationProvider>
 );
+});
+
+SidebarWithNavigation.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
+
+export default withUnstatedContainers(SidebarWithNavigation, [AppContainer]);

src/client/js/components/UnstatedUtils.jsx

@@ -59,3 +59,28 @@ export function createSubscribedElement(componentClass, props, containerClasses)
   );
 
 }
+
+/**
+ * Return a React component that is injected unstated containers
+ *
+ * @param {object} Component A React.Component or functional component
+ * @param {array} containerClasses unstated container classes to subscribe
+ * @returns returns such like a following element:
+ *  e.g.
+ *  <Subscribe to={containerClasses}>  // containerClasses = [AppContainer, PageContainer]
+ *    { (appContainer, pageContainer) => (
+ *      <Component appContainer={appContainer} pageContainer={pageContainer} {...this.props} />
+ *    )}
+ *  </Subscribe>
+ */
+export function withUnstatedContainers(Component, containerClasses) {
+  return props => (
+    // wrap with <Subscribe></Subscribe>
+    <Subscribe to={containerClasses}>
+      { (...containers) => {
+        const propsForContainers = generateAutoNamedProps(containers);
+        return <Component {...props} {...propsForContainers} />;
+      }}
+    </Subscribe>
+  );
+}