From 81dec6847113feab6253832de411ea60933338cd Mon Sep 17 00:00:00 2001
From: Javier Brea <javier.brea@gmail.com>
Date: Sat, 16 Feb 2019 08:48:41 +0100
Subject: [PATCH] Move menu modules to an unique module

---
 src/app/routers/SideBarLayout.js              | 13 +++---
 src/app/routers/SimpleLayout.js               |  4 +-
 src/app/setup/dataSources.js                  |  3 +-
 src/app/setup/modules.js                      |  4 +-
 src/app/setup/store.js                        |  4 +-
 src/components/layout-sidebar/HeaderMenu.js   | 43 ++++++++-----------
 .../layout-sidebar/SideBarLayout.js           | 28 ++++++------
 src/components/layout-simple/SimpleLayout.js  | 27 ++++++------
 src/data-layer/setup.js                       |  1 -
 src/modules/menu-home/index.js                |  3 --
 src/modules/menu-settings/index.js            |  3 --
 src/modules/menu-user/index.js                |  3 --
 src/modules/menu/Layouts.js                   | 16 +++++++
 src/modules/menu/index.js                     |  9 ++++
 src/modules/menu/setup.js                     | 11 +++++
 .../{menu-home => menu}/state/actions.js      |  0
 .../{menu-home => menu}/state/reducers.js     |  0
 src/modules/menu/state/state.js               |  5 +++
 .../{menu-home => menu}/views/HomeMenu.js     | 17 ++------
 .../views/SettingsMenu.js                     |  0
 .../{menu-user => menu}/views/UserMenu.js     |  0
 21 files changed, 104 insertions(+), 90 deletions(-)
 delete mode 100644 src/modules/menu-home/index.js
 delete mode 100644 src/modules/menu-settings/index.js
 delete mode 100644 src/modules/menu-user/index.js
 create mode 100644 src/modules/menu/Layouts.js
 create mode 100644 src/modules/menu/index.js
 create mode 100644 src/modules/menu/setup.js
 rename src/modules/{menu-home => menu}/state/actions.js (100%)
 rename src/modules/{menu-home => menu}/state/reducers.js (100%)
 create mode 100644 src/modules/menu/state/state.js
 rename src/modules/{menu-home => menu}/views/HomeMenu.js (72%)
 rename src/modules/{menu-settings => menu}/views/SettingsMenu.js (100%)
 rename src/modules/{menu-user => menu}/views/UserMenu.js (100%)

diff --git a/src/app/routers/SideBarLayout.js b/src/app/routers/SideBarLayout.js
index 3f53d9a..357b697 100644
--- a/src/app/routers/SideBarLayout.js
+++ b/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 => (
diff --git a/src/app/routers/SimpleLayout.js b/src/app/routers/SimpleLayout.js
index 5e5693f..e35fa9e 100644
--- a/src/app/routers/SimpleLayout.js
+++ b/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>
 );
diff --git a/src/app/setup/dataSources.js b/src/app/setup/dataSources.js
index 01af224..0a844c8 100644
--- a/src/app/setup/dataSources.js
+++ b/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);
 };
diff --git a/src/app/setup/modules.js b/src/app/setup/modules.js
index d1f94dd..8167e3d 100644
--- a/src/app/setup/modules.js
+++ b/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
   });
diff --git a/src/app/setup/store.js b/src/app/setup/store.js
index 7a97f9b..5787897 100644
--- a/src/app/setup/store.js
+++ b/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__()
   );
diff --git a/src/components/layout-sidebar/HeaderMenu.js b/src/components/layout-sidebar/HeaderMenu.js
index b84661b..3064675 100644
--- a/src/components/layout-sidebar/HeaderMenu.js
+++ b/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
 };
diff --git a/src/components/layout-sidebar/SideBarLayout.js b/src/components/layout-sidebar/SideBarLayout.js
index 091c765..9bbca85 100644
--- a/src/components/layout-sidebar/SideBarLayout.js
+++ b/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,19 +28,18 @@ 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}
@@ -49,10 +47,10 @@ export class SideBarLayout extends Component {
             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
 };
diff --git a/src/components/layout-simple/SimpleLayout.js b/src/components/layout-simple/SimpleLayout.js
index 3f7fe83..e0cf70f 100644
--- a/src/components/layout-simple/SimpleLayout.js
+++ b/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
 };
diff --git a/src/data-layer/setup.js b/src/data-layer/setup.js
index 79d47f2..94899e3 100644
--- a/src/data-layer/setup.js
+++ b/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 => {
diff --git a/src/modules/menu-home/index.js b/src/modules/menu-home/index.js
deleted file mode 100644
index bc43b6d..0000000
--- a/src/modules/menu-home/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { HomeMenu } from "./views/HomeMenu";
-
-export const Module = HomeMenu;
diff --git a/src/modules/menu-settings/index.js b/src/modules/menu-settings/index.js
deleted file mode 100644
index 67f90ff..0000000
--- a/src/modules/menu-settings/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SettingsMenu } from "./views/SettingsMenu";
-
-export const Module = SettingsMenu;
diff --git a/src/modules/menu-user/index.js b/src/modules/menu-user/index.js
deleted file mode 100644
index 52e97e8..0000000
--- a/src/modules/menu-user/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { UserMenu } from "./views/UserMenu";
-
-export const Module = UserMenu;
diff --git a/src/modules/menu/Layouts.js b/src/modules/menu/Layouts.js
new file mode 100644
index 0000000..c5f9bec
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/menu/index.js b/src/modules/menu/index.js
new file mode 100644
index 0000000..c7abeda
--- /dev/null
+++ b/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;
diff --git a/src/modules/menu/setup.js b/src/modules/menu/setup.js
new file mode 100644
index 0000000..2addaa0
--- /dev/null
+++ b/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);
+};
diff --git a/src/modules/menu-home/state/actions.js b/src/modules/menu/state/actions.js
similarity index 100%
rename from src/modules/menu-home/state/actions.js
rename to src/modules/menu/state/actions.js
diff --git a/src/modules/menu-home/state/reducers.js b/src/modules/menu/state/reducers.js
similarity index 100%
rename from src/modules/menu-home/state/reducers.js
rename to src/modules/menu/state/reducers.js
diff --git a/src/modules/menu/state/state.js b/src/modules/menu/state/state.js
new file mode 100644
index 0000000..ae44d1e
--- /dev/null
+++ b/src/modules/menu/state/state.js
@@ -0,0 +1,5 @@
+import { NAMESPACE, historyChanged } from "./reducers";
+
+export const store = {
+  [NAMESPACE]: historyChanged
+};
diff --git a/src/modules/menu-home/views/HomeMenu.js b/src/modules/menu/views/HomeMenu.js
similarity index 72%
rename from src/modules/menu-home/views/HomeMenu.js
rename to src/modules/menu/views/HomeMenu.js
index 8074307..147cbe5 100644
--- a/src/modules/menu-home/views/HomeMenu.js
+++ b/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
-};
diff --git a/src/modules/menu-settings/views/SettingsMenu.js b/src/modules/menu/views/SettingsMenu.js
similarity index 100%
rename from src/modules/menu-settings/views/SettingsMenu.js
rename to src/modules/menu/views/SettingsMenu.js
diff --git a/src/modules/menu-user/views/UserMenu.js b/src/modules/menu/views/UserMenu.js
similarity index 100%
rename from src/modules/menu-user/views/UserMenu.js
rename to src/modules/menu/views/UserMenu.js