Move menu modules to an unique module

src/app/routers/SideBarLayout.js

@@ -3,20 +3,17 @@ import { Route } from "react-router";
 import { Switch } from "react-router-dom";
 
 import { Component as SideBarLayout } from "src/components/layout-sidebar";
-import { Component as MenuSections } from "src/components/menu-sections";
+// import { Component as MenuSections } from "src/components/menu-sections";
 
-import { Module as UserMenu } from "src/modules/menu-user";
-import { Module as SettingsMenu } from "src/modules/menu-settings";
-import { Module as HomeMenu } from "src/modules/menu-home";
+import { Module as Menu } from "src/modules/menu";
 
 import { sectionsAsArray, menuSectionsAsArray } from "../routes";
 
 export const SideBarLayoutRouter = () => (
   <SideBarLayout
-    menu={<MenuSections sections={menuSectionsAsArray} />}
-    userMenu={UserMenu}
-    settingsMenu={SettingsMenu}
-    homeMenu={HomeMenu}
+    /* sections={<MenuSections sections={menuSectionsAsArray} />} */
+    sections={menuSectionsAsArray}
+    Menu={Menu}
   >
     <Switch>
       {sectionsAsArray.map(section => (

src/app/routers/SimpleLayout.js

@@ -5,7 +5,7 @@ import { Switch } from "react-router-dom";
 import { Component as SimpleLayout } from "src/components/layout-simple";
 import { Component as ErrorComponent } from "src/components/error";
 
-import { Module as HomeMenu } from "src/modules/menu-home";
+import { Module as Menu } from "src/modules/menu";
 
 import { routes } from "../routes";
 
@@ -18,7 +18,7 @@ export const SimpleRouter = () => (
 );
 
 export const SimpleLayoutRouter = () => (
-  <SimpleLayout homeMenu={HomeMenu}>
+  <SimpleLayout Menu={Menu}>
     <SimpleRouter />
   </SimpleLayout>
 );

src/app/setup/dataSources.js

@@ -6,9 +6,10 @@ import { routes } from "../routes";
 import { environment } from "../config/environment";
 
 export const setupDataSources = history => {
-  login.setup(history, routes.login.route);
   config({
     baseUrl: environment.baseApi
   });
+
+  login.setup(history, routes.login.route);
   socket.setup(environment.baseApi);
 };

src/app/setup/modules.js

@@ -1,5 +1,5 @@
 import { Module as Login } from "src/modules/login";
-import { Module as HomeMenu } from "src/modules/menu-home";
+import { Module as Menu } from "src/modules/menu";
 import { Module as Modules } from "src/modules/modules";
 
 export const setupModules = (history, store, routes, sections) => {
@@ -9,7 +9,7 @@ export const setupModules = (history, store, routes, sections) => {
     header: "Domapic Controller"
   });
 
-  HomeMenu.setup({
+  Menu.setup({
     history,
     store
   });

src/app/setup/store.js

@@ -1,11 +1,11 @@
 import { combineReducers, createStore } from "redux";
 
-import { Module as HomeMenuModule } from "src/modules/menu-home";
+import { Module as Menu } from "src/modules/menu";
 
 export const setupStore = () => {
   return createStore(
     combineReducers({
-      [HomeMenuModule.redux.NAMESPACE]: HomeMenuModule.redux.reducer
+      ...Menu.store
     }),
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   );

src/components/layout-sidebar/HeaderMenu.js

@@ -1,49 +1,44 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Icon, Menu } from "semantic-ui-react";
+import { Icon, Menu as SemanticMenu } from "semantic-ui-react";
 
-import { Component as AboutMenu } from "src/components/menu-about";
 import { Component as Responsive } from "src/components/responsive";
 
 import "./headerMenu.css";
 
 export class HeaderMenu extends Component {
   render() {
-    const UserMenu = this.props.userMenu;
-    const SettingsMenu = this.props.settingsMenu;
-    const HomeMenu = this.props.homeMenu;
+    const Menu = this.props.Menu;
     return (
-      <Menu inverted size="small" fixed="top" className="sidebar-layout__header-menu">
+      <SemanticMenu inverted size="small" fixed="top" className="sidebar-layout__header-menu">
         <Responsive device="desktop" className="sidebar-layout__header-menu__container">
-          <HomeMenu />
-          {this.props.menu}
-          <Menu.Item position="right" className="sidebar-layout__header-menu__item--right">
-            <SettingsMenu />
-            <AboutMenu />
-            <UserMenu />
-          </Menu.Item>
+          <Menu.Home />
+          <Menu.Sections sections={this.props.sections} />
+          <SemanticMenu.Item position="right" className="sidebar-layout__header-menu__item--right">
+            <Menu.Settings />
+            <Menu.About />
+            <Menu.User />
+          </SemanticMenu.Item>
         </Responsive>
         <Responsive device="mobile" className="sidebar-layout__header-menu__container">
-          <Menu.Item
+          <SemanticMenu.Item
             onClick={this.props.handleToggle}
             className="sidebar-layout__header-menu__item--toggle"
           >
             <Icon name="sidebar" />
-          </Menu.Item>
-          <HomeMenu />
-          <Menu.Item position="right" className="sidebar-layout__header-menu__item--right">
-            <UserMenu />
-          </Menu.Item>
+          </SemanticMenu.Item>
+          <Menu.Home />
+          <SemanticMenu.Item position="right" className="sidebar-layout__header-menu__item--right">
+            <Menu.User />
+          </SemanticMenu.Item>
         </Responsive>
-      </Menu>
+      </SemanticMenu>
     );
   }
 }
 
 HeaderMenu.propTypes = {
+  Menu: PropTypes.func,
   handleToggle: PropTypes.func,
-  homeMenu: PropTypes.func,
-  menu: PropTypes.node,
-  settingsMenu: PropTypes.func,
-  userMenu: PropTypes.func
+  sections: PropTypes.array
 };

src/components/layout-sidebar/SideBarLayout.js

@@ -1,9 +1,8 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Menu, Sidebar } from "semantic-ui-react";
+import { Menu as SemanticMenu, Sidebar } from "semantic-ui-react";
 
 import { Component as MainContainer } from "src/components/container-main";
-import { Component as AboutMenu } from "src/components/menu-about";
 import { Component as Responsive } from "src/components/responsive";
 
 import { HeaderMenu } from "./HeaderMenu";
@@ -29,30 +28,29 @@ export class SideBarLayout extends Component {
   render() {
     const { children } = this.props;
     const { sidebarOpened } = this.state;
-    const UserMenu = this.props.userMenu;
-    const SettingsMenu = this.props.settingsMenu;
+    const Menu = this.props.Menu;
 
-    const menu = <HeaderMenu {...this.props} handleToggle={this.handleToggle} />;
+    const headerMenu = <HeaderMenu {...this.props} handleToggle={this.handleToggle} />;
 
-    const rootMenu = sidebarOpened ? null : menu;
-    const overlayedMenu = sidebarOpened ? menu : null;
+    const rootMenu = sidebarOpened ? null : headerMenu;
+    const overlayedMenu = sidebarOpened ? headerMenu : null;
 
     return (
       <React.Fragment>
         <Responsive as={Sidebar.Pushable} device="mobile" className="sidebar-layout--mobile">
           <Sidebar
-            as={Menu}
+            as={SemanticMenu}
             animation="overlay"
             inverted
             onHide={this.handleSidebarHide}
             vertical
             visible={sidebarOpened}
             onClick={this.handleSidebarHide}
           >
-            <UserMenu vertical />
-            {this.props.menu}
-            <SettingsMenu vertical />
-            <AboutMenu vertical />
+            <Menu.User vertical />
+            <Menu.Sections sections={this.props.sections} />
+            <Menu.Settings vertical />
+            <Menu.About vertical />
           </Sidebar>
           <Sidebar.Pusher dimmed={sidebarOpened} className="sidebar-layout__sidebar-pusher">
             <MainContainer mobile={true} dimmed={sidebarOpened}>
@@ -71,9 +69,7 @@ export class SideBarLayout extends Component {
 }
 
 SideBarLayout.propTypes = {
+  Menu: PropTypes.func,
   children: PropTypes.node,
-  homeMenu: PropTypes.func,
-  menu: PropTypes.node,
-  settingsMenu: PropTypes.func,
-  userMenu: PropTypes.func
+  sections: PropTypes.array
 };

src/components/layout-simple/SimpleLayout.js

@@ -1,27 +1,30 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { Menu } from "semantic-ui-react";
+import { Menu as SemanticMenu } from "semantic-ui-react";
 
 import { Component as MainContainer } from "src/components/container-main";
-import { Component as AboutMenu } from "src/components/menu-about";
 
-export const SimpleLayout = ({ children, homeMenu = () => {} }) => {
-  const HomeMenu = homeMenu;
+export const SimpleLayout = ({ children, Menu }) => {
   return (
     <React.Fragment>
       <MainContainer>{children}</MainContainer>
-      <Menu inverted={true} size="small" fixed="top" className="simple-layout__header-menu">
-        <HomeMenu />
-        <Menu.Item position="right" className="simple-layout__header-menu__item--right">
-          <AboutMenu />
-        </Menu.Item>
-      </Menu>
+      <SemanticMenu
+        inverted={true}
+        size="small"
+        fixed="top"
+        className="simple-layout__header-menu"
+      >
+        <Menu.Home />
+        <SemanticMenu.Item position="right" className="simple-layout__header-menu__item--right">
+          <Menu.About />
+        </SemanticMenu.Item>
+      </SemanticMenu>
     </React.Fragment>
   );
 };
 
 SimpleLayout.propTypes = {
-  children: PropTypes.node,
-  homeMenu: PropTypes.func
+  Menu: PropTypes.func,
+  children: PropTypes.node
 };

src/data-layer/setup.js

@@ -12,7 +12,6 @@ let _allDataSources = [];
 export const configDataSource = dataSource => {
   _allDataSources.push(dataSource);
   dataSource.config(_config);
-  console.log(_allDataSources);
 };
 
 export const authDataSource = dataSource => {

src/modules/menu/Layouts.js

@@ -0,0 +1,16 @@
+import { Component } from "react";
+
+import { Component as MenuSections } from "src/components/menu-sections";
+import { Component as MenuAbout } from "src/components/menu-about";
+
+import { HomeMenu } from "./views/HomeMenu";
+import { SettingsMenu } from "./views/SettingsMenu";
+import { UserMenu } from "./views/UserMenu";
+
+export class Menu extends Component {
+  static Home = HomeMenu;
+  static Settings = SettingsMenu;
+  static User = UserMenu;
+  static Sections = MenuSections;
+  static About = MenuAbout;
+}

src/modules/menu/index.js

@@ -0,0 +1,9 @@
+import { Menu } from "./Layouts";
+
+import { store } from "./state/state";
+import { setup } from "./setup";
+
+Menu.store = store;
+Menu.setup = setup;
+
+export const Module = Menu;

src/modules/menu/setup.js

@@ -0,0 +1,11 @@
+import { init } from "./views/HomeMenu";
+
+let config = {
+  history: null,
+  store: null
+};
+
+export const setup = configuration => {
+  config = { ...config, ...configuration };
+  init(config);
+};

src/modules/menu/state/state.js

@@ -0,0 +1,5 @@
+import { NAMESPACE, historyChanged } from "./reducers";
+
+export const store = {
+  [NAMESPACE]: historyChanged
+};

src/modules/menu-home/views/HomeMenu.js → src/modules/menu/views/HomeMenu.js

@@ -2,13 +2,10 @@ import { connect } from "react-redux";
 
 import { Component as HomeMenuComponent } from "src/components/menu-home";
 
-import { NAMESPACE, historyChanged } from "../state/reducers";
+import { NAMESPACE } from "../state/reducers";
 import { historyPushed, historyPopped } from "../state/actions";
 
-let config = {
-  history: null,
-  store: null
-};
+let config;
 
 const historyListener = (location, action) => {
   switch (action) {
@@ -25,8 +22,8 @@ const historyBack = () => {
   config.history.goBack();
 };
 
-const setup = configuration => {
-  config = { ...config, ...configuration };
+export const init = configuration => {
+  config = configuration;
   config.history.listen(historyListener);
 };
 
@@ -38,9 +35,3 @@ export const mapStateToProps = state => {
 };
 
 export const HomeMenu = connect(mapStateToProps)(HomeMenuComponent);
-
-HomeMenu.setup = setup;
-HomeMenu.redux = {
-  NAMESPACE,
-  reducer: historyChanged
-};