impl SidebarContents

src/client/js/components/Sidebar.jsx

@@ -13,9 +13,7 @@ import AppContainer from '../services/AppContainer';
 import NavigationContainer from '../services/NavigationContainer';
 
 import SidebarNav from './Sidebar/SidebarNav';
-import RecentChanges from './Sidebar/RecentChanges';
-import CustomSidebar from './Sidebar/CustomSidebar';
-
+import SidebarContents from './Sidebar/SidebarContents';
 
 const sidebarDefaultWidth = 240;
 
@@ -28,10 +26,6 @@ class Sidebar extends React.Component {
     isDrawerModeOnInit: PropTypes.bool,
   };
 
-  state = {
-    currentContentsId: 'recent',
-  };
-
   componentWillMount() {
     this.hackUIController();
   }
@@ -127,35 +121,26 @@ class Sidebar extends React.Component {
   }
 
   itemSelectedHandler = (contentsId) => {
-    const { navigationUIController } = this.props;
-    const { currentContentsId } = this.state;
+    const { navigationContainer, navigationUIController } = this.props;
+    const { sidebarContentsId } = navigationContainer.state;
 
     // already selected
-    if (currentContentsId === contentsId) {
+    if (sidebarContentsId === contentsId) {
       navigationUIController.toggleCollapse();
     }
     // switch and expand
     else {
-      this.setState({ currentContentsId: contentsId });
       navigationUIController.expand();
     }
   }
 
   renderGlobalNavigation = () => (
-    <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
+    <SidebarNav onItemSelected={this.itemSelectedHandler} />
   );
 
-  renderSidebarContents = () => {
-    let contents = <CustomSidebar />;
-
-    switch (this.state.currentContentsId) {
-      case 'recent':
-        contents = <RecentChanges />;
-        break;
-    }
-
-    return <div className="grw-sidebar-content-container">{contents}</div>;
-  }
+  renderSidebarContents = () => (
+    <SidebarContents />
+  );
 
   render() {
     const { isDrawerOpened } = this.props.navigationContainer.state;

src/client/js/components/Sidebar/SidebarContents.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+import NavigationContainer from '../../services/NavigationContainer';
+
+import RecentChanges from './RecentChanges';
+import CustomSidebar from './CustomSidebar';
+
+const SidebarContents = (props) => {
+
+  const { navigationContainer } = props;
+
+  let Contents;
+  switch (navigationContainer.state.sidebarContentsId) {
+    case 'recent':
+      Contents = RecentChanges;
+      break;
+    default:
+      Contents = CustomSidebar;
+  }
+
+  return <div className="grw-sidebar-content-container"><Contents /></div>;
+
+};
+
+SidebarContents.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SidebarContentsWrapper = withUnstatedContainers(SidebarContents, [NavigationContainer]);
+
+export default withTranslation()(SidebarContentsWrapper);

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -5,12 +5,12 @@ import { withTranslation } from 'react-i18next';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
+import NavigationContainer from '../../services/NavigationContainer';
 
 
 class SidebarNav extends React.Component {
 
   static propTypes = {
-    currentContentsId: PropTypes.string,
     onItemSelected: PropTypes.func,
   };
 
@@ -18,14 +18,17 @@ class SidebarNav extends React.Component {
   };
 
   itemSelectedHandler = (contentsId) => {
-    const { onItemSelected } = this.props;
+    const { navigationContainer, onItemSelected } = this.props;
     if (onItemSelected != null) {
       onItemSelected(contentsId);
     }
+
+    navigationContainer.setState({ sidebarContentsId: contentsId });
   }
 
   PrimaryItem = ({ id, label, iconName }) => {
-    const isSelected = this.props.currentContentsId === id;
+    const { sidebarContentsId } = this.props.navigationContainer.state;
+    const isSelected = sidebarContentsId === id;
 
     return (
       <button
@@ -80,11 +83,12 @@ class SidebarNav extends React.Component {
 
 SidebarNav.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
 /**
  * Wrapper component for using unstated
  */
-const SidebarNavWrapper = withUnstatedContainers(SidebarNav, [AppContainer]);
+const SidebarNavWrapper = withUnstatedContainers(SidebarNav, [AppContainer, NavigationContainer]);
 
 export default withTranslation()(SidebarNavWrapper);

src/client/js/services/NavigationContainer.js

@@ -24,6 +24,8 @@ export default class NavigationContainer extends Container {
       isDrawerMode: null,
       isDrawerOpened: false,
 
+      sidebarContentsId: 'recent',
+
       isPageCreateModalShown: false,
     };