fix(containers): in App use getLayoutMobileStatuses selector

fix(containers): in App use getLayoutMobileStatuses selector

src/common/containers/App/index.jsx

@@ -10,8 +10,8 @@ import Sidebar from 'components/parts/Sidebar'
 import Footer from 'components/parts/Footer'
 import Header from 'components/parts/Header'
 // Import actions
-import {CLOSE_SIDEBAR, WINDOW_RESIZE} from 'actions/layout'
-import {getAuthState, getLayoutState, getWindowInnerWidth} from 'selectors'
+import {TOGGLE_SIDEBAR, WINDOW_RESIZE} from 'actions/layout'
+import {getAuthState, getLayoutState, getWindowInnerWidth, getLayoutMobileStatuses} from 'selectors'
 import ReactGA from 'react-ga'
 // Import styled components
 import {
@@ -35,15 +35,13 @@ type Props = {
 	history: any,
 	// SidebarOpened can force component to re-render
 	sidebarOpened: boolean,
-	closeSidebar: Function,
+	toggleSidebar: Function,
 	// IsLoggedIn can force component to re-render
 	isLoggedIn: boolean,
 	handleWindowResize: Function,
 	checkAuthLogic: Function,
 	// IsMobile can force component to re-render
-	isMobile: boolean,
-	isMobileXS: boolean,
-	isMobileSM: boolean
+	isMobile: boolean
 }
 
 class App extends Component <Props> {
@@ -58,15 +56,14 @@ class App extends Component <Props> {
 	}
 
 	/**
-   * Checks that user is still allowed to visit path after props changed
-   * @param  {Object} nextProps
+   * Check that user is still allowed to visit path after props changed
    */
-	componentWillReceiveProps (nextProps: Props) {
-		this.checkAppAuthLogic(nextProps.isLoggedIn)
+	componentWillReceiveProps ({isLoggedIn}: Props) {
+		this.checkAppAuthLogic(isLoggedIn)
 	}
 
 	componentDidMount () {
-		if (process.env.SENTRY_PUBLIC_DSN) {
+		if (process.env.BROWSER && process.env.SENTRY_PUBLIC_DSN) {
 			const script = document.createElement('script')
 			script.type = 'text/javascript'
 			script.crossorigin = 'anonymous'
@@ -78,7 +75,7 @@ class App extends Component <Props> {
 			document.body.appendChild(script)
 		}
 
-		if (process.env.GA_ID) {
+		if (process.env.BROWSER && process.env.GA_ID) {
 			ReactGA.initialize(process.env.GA_ID)
 		}
 	}
@@ -97,18 +94,15 @@ class App extends Component <Props> {
 		const {
 			children,
 			sidebarOpened,
-			closeSidebar,
+			toggleSidebar,
 			isLoggedIn,
 			isMobile
 		} = this.props
 
 		const dimmerProps = {
-			//  Dimmed: true,
 			active: isLoggedIn && sidebarOpened,
 			page: true,
-			//  Blurring: true,
-			//  page: true,
-			onClick: closeSidebar
+			onClick: toggleSidebar
 		}
 		/** NOTE: There is an issue with props and styled-components,
 			So we use custom attributes and handle them inside styled component
@@ -139,24 +133,22 @@ class App extends Component <Props> {
 }
 
 function mapStateToProps (state: GlobalState) {
-	const layoutState = getLayoutState(state)
-	const authState = getAuthState(state)
-	const {sidebarOpened, isMobile, isMobileXS, isMobileSM} = layoutState
-	const {isLoggedIn} = authState
+	const {sidebarOpened} = getLayoutState(state)
+	const {isLoggedIn} = getAuthState(state)
+	const {isMobile} = getLayoutMobileStatuses(state)
+
 	return {
 		sidebarOpened,
 		isMobile,
-		isMobileXS,
-		isMobileSM,
 		isLoggedIn
 	}
 }
 
 function mapDispatchToProps (dispatch) {
 	let resizer
 	return {
-		closeSidebar () {
-			dispatch(CLOSE_SIDEBAR())
+		toggleSidebar () {
+			dispatch(TOGGLE_SIDEBAR())
 		},
 		/**
          * Immediately push to homePath('/'), if user is logged.

src/common/containers/App/style.jsx

@@ -1,26 +1,37 @@
 import styled, {css} from 'styled-components'
 import {Dimmer, Sidebar, Container} from 'semantic-ui-react'
 
-export const PageLayout = styled.div`height: 100%;`
+export const PageLayout = styled.div`
+	height: 100%;
+`
 
 export const MainLayout = styled.div`
+	min-height: calc(100% - 72px);
 	display: flex;
 	flex-direction: column;
 	color: ${props => props.theme.primaryTextColor};
 	background-color: ${props => props.theme.primaryColorText};
 `
 
 export const MainContent = styled.main`
+	flex-grow: 1;
 	min-height: calc(100% - 72px);
 	display: flex;
 	flex-direction: column;
 `
 
 export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
+	height: 100%;
 	-webkit-overflow-scrolling: touch;
 	${({isloggedin, ismobile}) => {
 		// using `ismobile` attr instead of `media` util is much smoother
-		return isloggedin && !ismobile && css`max-width: calc(100% - 150px);`
+		return (
+			isloggedin &&
+			!ismobile &&
+			css`
+				max-width: calc(100% - 150px);
+				`
+		)
 	}};
 `