diff --git a/src/common/containers/App/index.jsx b/src/common/containers/App/index.jsx index df0d307d..76e299d9 100644 --- a/src/common/containers/App/index.jsx +++ b/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 { @@ -58,15 +56,14 @@ class App extends Component { } /** - * 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 { 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 { 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,15 +133,13 @@ class App extends Component { } 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 } } @@ -155,8 +147,8 @@ function mapStateToProps (state: GlobalState) { function mapDispatchToProps (dispatch) { let resizer return { - closeSidebar () { - dispatch(CLOSE_SIDEBAR()) + toggleSidebar () { + dispatch(TOGGLE_SIDEBAR()) }, /** * Immediately push to homePath('/'), if user is logged. diff --git a/src/common/containers/App/style.jsx b/src/common/containers/App/style.jsx index 35d500f8..7ffc138f 100644 --- a/src/common/containers/App/style.jsx +++ b/src/common/containers/App/style.jsx @@ -1,9 +1,12 @@ 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}; @@ -11,16 +14,24 @@ export const MainLayout = styled.div` ` 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); + ` + ) }}; `