feat: make Sidebar and Header autonomous containers

feat: make Sidebar and Header autonomous containers

src/common/components/parts/Header/index.jsx

@@ -2,8 +2,11 @@
  * @flow
  */
 import React from 'react'
+import {connect} from 'react-redux'
 import {Icon} from 'semantic-ui-react'
-// import {FormattedMessage} from 'react-intl'
+import {withRouter, matchPath} from 'react-router'
+import _ from 'lodash'
+import {OPEN_SIDEBAR} from 'actions/layout'
 import {
 	StyledHeader,
 	HeaderInner,
@@ -12,6 +15,8 @@ import {
 	// HeaderButton
 } from './style'
 import {Spacer} from 'styles/base'
+import {getMetaRoutes} from 'routing'
+import {getAuthState, getLayoutState} from 'selectors'
 import Headroom from 'react-headroom'
 
 type Props = {
@@ -40,4 +45,25 @@ const Header = ({title, toggleSidebar, isLoggedIn, isMobile}: Props) => {
 	)
 }
 
-export default Header
+const mapStateToProps = (state, props) => {
+	console.log(props)
+	const {location: {pathname}} = props
+	const currentRoute = _.find(getMetaRoutes(), a => matchPath(pathname, a)) || {}
+	console.log(currentRoute)
+	const title = currentRoute.meta.name
+	const {isLoggedIn} = getAuthState(state)
+	const {isMobile} = getLayoutState(state)
+	return {
+		title,
+		isLoggedIn,
+		isMobile
+	}
+}
+
+const mapDispatchToProps = dispatch => ({
+	toggleSidebar () {
+		dispatch(OPEN_SIDEBAR())
+	}
+})
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))

src/common/components/parts/Sidebar/index.jsx

@@ -1,7 +1,11 @@
 // @flow
 import React, {Component} from 'react'
+import {connect} from 'react-redux'
 import {Menu, Icon} from 'semantic-ui-react'
 import {NavLink} from 'react-router-dom'
+import {LOGOUT_AUTH} from 'actions/auth'
+import {getSidebarRoutes} from 'routing'
+import {getLayoutState} from 'selectors'
 import {
 	StyledSidebar,
 	SidebarLogo,
@@ -35,7 +39,8 @@ class SidebarComponent extends Component {
 		}
 
 		const routes = routing.map((route, i) => {
-			const {external, path, icon, name, strict, exact} = route
+			const {external, path, strict, exact, meta} = route
+			const {icon, name} = meta
 			// Props that are common for both "<a>" and "RR Link"
 			const basicProps = {
 				as: external ? 'a' : NavLink,
@@ -81,4 +86,21 @@ class SidebarComponent extends Component {
 	}
 }
 
-export default SidebarComponent
+const mapStateToProps = (state) => {
+	const {isMobile, sidebarOpened} = getLayoutState(state)
+	const routing = getSidebarRoutes()
+
+	return {
+		routing,
+		open: sidebarOpened,
+		isMobile
+	}
+}
+
+const mapDispatchToProps = (dispatch) => ({
+	logout () {
+		dispatch(LOGOUT_AUTH())
+	}
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SidebarComponent)

src/common/containers/App/index.jsx

@@ -3,18 +3,15 @@
  */
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
-import {withRouter, matchPath} from 'react-router'
+import {withRouter} from 'react-router'
 import {push} from 'react-router-redux'
-import _ from 'lodash'
 // Import main views
 import Sidebar from 'components/parts/Sidebar'
 import Footer from 'components/parts/Footer'
 import Header from 'components/parts/Header'
 // Import actions
-import {CLOSE_SIDEBAR, OPEN_SIDEBAR, WINDOW_RESIZE} from 'actions/layout'
-import {LOGOUT_AUTH} from 'actions/auth'
+import {CLOSE_SIDEBAR, WINDOW_RESIZE} from 'actions/layout'
 import {getAuthState, getLayoutState, getWindowInnerWidth} from 'selectors'
-import {getSidebarRoutes} from 'routing'
 import ReactGA from 'react-ga'
 // Import styled components
 import {
@@ -42,9 +39,7 @@ type Props = {
 	// IsLoggedIn can force component to re-render
 	isLoggedIn: boolean,
 	handleWindowResize: Function,
-	logout: Function,
 	checkAuthLogic: Function,
-	toggleSidebar: Function,
 	// IsMobile can force component to re-render
 	isMobile: boolean,
 	isMobileXS: boolean,
@@ -95,19 +90,8 @@ class App extends Component {
      * @return {Void}
      */
 	checkAppAuthLogic (isLoggedIn: boolean) {
-		const path: string = this.props.location.pathname
-		this.props.checkAuthLogic(path, isLoggedIn)
-	}
-
-	/**
-  * Returns title for header
-  * @param  {String} pathname - location.pathname
-  * @return {String} page title
-  */
-	getPageTitle (pathname: string): string {
-		const currentRoute: Object =
-			_.find(this.props.routes, (a: RouteItem) => matchPath(pathname, a)) || {}
-		return currentRoute.name
+		const {pathname} = this.props.location
+		this.props.checkAuthLogic(pathname, isLoggedIn)
 	}
 
 	render () {
@@ -116,28 +100,8 @@ class App extends Component {
 			sidebarOpened,
 			closeSidebar,
 			isLoggedIn,
-			logout,
-			toggleSidebar,
-			location,
-			isMobile,
-			routes
-		} = this.props
-		// Routing for sidebar menu
-		const title: string = this.getPageTitle(location.pathname)
-
-		const sidebarProps = {
-			isMobile,
-			logout,
-			open: sidebarOpened,
-			routing: getSidebarRoutes(routes)
-		}
-
-		const headerProps = {
-			toggleSidebar,
-			title,
-			isLoggedIn,
 			isMobile
-		}
+		} = this.props
 
 		const dimmerProps = {
 			//  Dimmed: true,
@@ -147,21 +111,24 @@ class App extends Component {
 			//  page: true,
 			onClick: closeSidebar
 		}
-		// XXX: There is an issue with props and styled-components, so we use custom attributes and handle them inside styled component
-		/** {@link: https://github.com/styled-components/styled-components/issues/439} */
+		/** NOTE: There is an issue with props and styled-components,
+			So we use custom attributes and handle them inside styled component
+			{@link: https://github.com/styled-components/styled-components/issues/439}
+		*/
 
 		return (
 			<PageLayout>
 				<SidebarSemanticPushableStyled>
-					{isLoggedIn && <Sidebar {...sidebarProps} />}
-					<SidebarSemanticPusherStyled isloggedin={isLoggedIn ? '1' : ''} ismobile={isMobile ? '1' : ''}>
+					{isLoggedIn && <Sidebar />}
+					<SidebarSemanticPusherStyled
+						isloggedin={isLoggedIn ? '1' : ''}
+						ismobile={isMobile ? '1' : ''}
+					>
 						<StyledDimmer {...dimmerProps} />
-						<Header {...headerProps} />
+						<Header />
 						<MainLayout>
 							<MainContent>
-								<MainContainer>
-									{children}
-								</MainContainer>
+								<MainContainer>{children}</MainContainer>
 								<Footer />
 							</MainContent>
 						</MainLayout>
@@ -192,12 +159,6 @@ function mapDispatchToProps (dispatch) {
 		closeSidebar () {
 			dispatch(CLOSE_SIDEBAR())
 		},
-		logout () {
-			dispatch(LOGOUT_AUTH())
-		},
-		toggleSidebar () {
-			dispatch(OPEN_SIDEBAR())
-		},
 		/**
          * Immediately push to homePath('/'), if user is logged.
          * Can be used for other auth logic checks.