Skip to content
This repository has been archived by the owner on Jan 1, 2024. It is now read-only.

Commit

Permalink
fix(src/common/containers/App): formatting, add GA and Raven lazy loa…
Browse files Browse the repository at this point in the history 
…ding after component was mounted
  • Loading branch information
@Metnew
Metnew committed Aug 4, 2017
1 parent 042e2c0 commit cdfaf58
Showing 1 changed file with 161 additions and 113 deletions.
274 changes: 161 additions & 113 deletions src/common/containers/App/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,26 @@ import {
} from './style'

class App extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
// react-router `withRouter` props
location: PropTypes.object,
history: PropTypes.object,

// sidebarOpened can force component to re-render
sidebarOpened: PropTypes.bool,
closeSidebar: PropTypes.func,
// isLoggedIn can force component to re-render
isLoggedIn: PropTypes.bool,
handleWindowResize: PropTypes.func,
logout: PropTypes.func,
checkAuthLogic: PropTypes.func,
toggleSidebar: PropTypes.func,
// isMobile can force component to re-render
isMobile: PropTypes.bool,
isMobileXS: PropTypes.bool,
isMobileSM: PropTypes.bool
}
static propTypes = {
children: PropTypes.node.isRequired,
// react-router `withRouter` props
location: PropTypes.object,
history: PropTypes.object,

// sidebarOpened can force component to re-render
sidebarOpened: PropTypes.bool,
closeSidebar: PropTypes.func,
// isLoggedIn can force component to re-render
isLoggedIn: PropTypes.bool,
handleWindowResize: PropTypes.func,
logout: PropTypes.func,
checkAuthLogic: PropTypes.func,
toggleSidebar: PropTypes.func,
// isMobile can force component to re-render
isMobile: PropTypes.bool,
isMobileXS: PropTypes.bool,
isMobileSM: PropTypes.bool
}

// XXX: will be fixed one day.
// shouldComponentUpdate(nextProps) {
Expand All @@ -50,125 +50,173 @@ class App extends Component {
// return !(matchSame && isMobileSame && isLoggedInSame && sidebarOpenedSame)
// }

componentWillMount () {
const {handleWindowResize, isLoggedIn} = this.props
window.addEventListener('resize', handleWindowResize)
this.checkAppAuthLogic(isLoggedIn)
}
componentWillMount () {
const {isLoggedIn} = this.props
if (process.env.BROWSER) {
const {handleWindowResize} = this.props
window.addEventListener('resize', handleWindowResize)
}
this.checkAppAuthLogic(isLoggedIn)
}

/**
* Checks that user is still allowed to visit path after props changed
* @param {Object} nextProps
*/
componentWillReceiveProps (nextProps) {
this.checkAppAuthLogic(nextProps.isLoggedIn)
}
componentWillReceiveProps (nextProps) {
this.checkAppAuthLogic(nextProps.isLoggedIn)
}

componentDidMount () {
// FIXME: remove this duplication
if (process.env.SENTRY_ID) {
const script = document.createElement('script')
script.type = 'text/javascript'
script.crossorigin = 'anonymous'
script.async = true
script.onload = () => {
Raven.config(process.env.SENTRY_ID).install()
}
script.src = 'https://cdn.ravenjs.com/3.16.1/raven.min.js'
document.body.appendChild(script)
}

if (process.env.GA_ID) {
const script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.crossorigin = 'anonymous'
script.onload = () => {
window.ga =
window.ga ||
function () {
;(ga.q = ga.q || []).push(arguments)
}
ga.l = +new Date()
ga('create', process.env.GA_ID, 'auto')
ga('send', 'pageview')
}
script.src = 'https://www.google-analytics.com/analytics.js'
document.body.appendChild(script)
}
}

/**
* Check that user is allowed to visit route
* @param {Bool} loggedIn state.auth.loggedIn, current prop
* @return {Null} Nothing
*/
checkAppAuthLogic (loggedIn) {
const {location, checkAuthLogic} = this.props
const path = location.pathname
checkAuthLogic(path, loggedIn)
}
checkAppAuthLogic (loggedIn) {
const {location, checkAuthLogic} = this.props
const path = location.pathname
checkAuthLogic(path, loggedIn)
}

/**
* returns routing for sidebar menu
* @return {Array} array of routes that will be rendered in sidebar menu
*/
getSidebarRouting () {
const sidebarRouting = appRouting.filter(a => a.sidebarVisible).map(a => {
const {path, name, icon, external, strict, exact} = a
const b = {path, name, icon, external, strict, exact}
return b
})
return sidebarRouting
}
getSidebarRouting () {
const sidebarRouting = appRouting.filter(a => a.sidebarVisible).map(a => {
const {path, name, icon, external, strict, exact} = a
const b = {path, name, icon, external, strict, exact}
return b
})
return sidebarRouting
}

/**
* returns title for header
* @param {String} pathname - location.pathname
* @return {String} page title
*/
getPageTitle (pathname) {
const matchedRoutes = appRouting.filter(a => matchPath(pathname, a))
const currentRoute = matchedRoutes[0] || {}
const title = currentRoute.name || '404'
return title
}
getPageTitle (pathname) {
const matchedRoutes = appRouting.filter(a => matchPath(pathname, a))
const currentRoute = matchedRoutes[0] || {}
const title = currentRoute.name || '404'
return title
}

render () {
const {
children,
sidebarOpened,
closeSidebar,
isLoggedIn,
logout,
toggleSidebar,
location,
isMobile
} = this.props

// routing for sidebar menu
const sidebarRouting = this.getSidebarRouting()
const title = this.getPageTitle(location.pathname)

const sidebarProps = {
isMobile,
logout,
open: sidebarOpened,
routing: sidebarRouting
}
render () {
const {
children,
sidebarOpened,
closeSidebar,
isLoggedIn,
logout,
toggleSidebar,
location,
isMobile
} = this.props

const headerProps = {
toggleSidebar,
title,
isLoggedIn,
isMobile
}
// routing for sidebar menu
const sidebarRouting = this.getSidebarRouting()
const title = this.getPageTitle(location.pathname)

const dimmerProps = {
active: true,
onClick: closeSidebar
}
const sidebarProps = {
isMobile,
logout,
open: sidebarOpened,
routing: sidebarRouting
}

// FIXME: ASAP: remove !isLoggedIn, replace it with variable from state.layout
// {/* XXX: There is an issue with props and styled-components, so we're using .extend and re-render the component when isMobile/isLoggedIn change triggered. Using `style` attribute isn't a good solution.
// Please, check: https://github.com/styled-components/styled-components/issues/439 */}
// {/* <SidebarSemanticPusherStyled style={SidebarSemanticPusherStyleProps}> */}
const SidebarSemanticPusherStyledPatch =
!isMobile && isLoggedIn
? SidebarSemanticPusherStyled.extend`
max-width: calc(100% - 150px);
`
: SidebarSemanticPusherStyled

return (
<PageLayout>
<SidebarSemanticPushableStyled>
{isLoggedIn && <Sidebar {...sidebarProps} />}
<SidebarSemanticPusherStyledPatch>
<Header {...headerProps} />
<MainLayout>
<MainContent>
<MainContainer id="main-container">
{children}
</MainContainer>
</MainContent>
<Footer />
</MainLayout>
</SidebarSemanticPusherStyledPatch>
{/* NOTE: show dimmer only if:
//1. isLoggedIn, elsewhere sidebar isn't visible
// 2. if sidebar is opened */}
{isLoggedIn && sidebarOpened && <StyledDimmer {...dimmerProps} />}
</SidebarSemanticPushableStyled>
</PageLayout>
)
}
const headerProps = {
toggleSidebar,
title,
isLoggedIn,
isMobile
}

const dimmerProps = {
// dimmed: true,
active: isLoggedIn && sidebarOpened,
page: true,
// blurring: true,
// page: true,
onClick: closeSidebar
}

// FIXME: ASAP: remove !isLoggedIn, replace it with variable from state.layout
// {/* XXX: There is an issue with props and styled-components, so we're using .extend and re-render the component when isMobile/isLoggedIn change triggered. Using `style` attribute isn't a good solution.
// Please, check: https://github.com/styled-components/styled-components/issues/439 */}
// {/* <SidebarSemanticPusherStyled style={SidebarSemanticPusherStyleProps}> */}
const SidebarSemanticPusherStyledPatch =
!isMobile && isLoggedIn
? SidebarSemanticPusherStyled.extend`
max-width: calc(100% - 150px);
`
: SidebarSemanticPusherStyled

return (
<PageLayout>
<SidebarSemanticPushableStyled>
{isLoggedIn && <Sidebar {...sidebarProps} />}
<SidebarSemanticPusherStyledPatch>
{/* <Dimmer.Dimmable {...dimmerDimmableProps}> */}
<StyledDimmer {...dimmerProps} />
<Header {...headerProps} />
<MainLayout>
<MainContent>
<MainContainer id="main-container">
{children}
</MainContainer>
</MainContent>
<Footer />
</MainLayout>
{/* </Dimmer.Dimmable> */}
</SidebarSemanticPusherStyledPatch>
{/* NOTE: show dimmer only if:
//1. isLoggedIn, elsewhere sidebar isn't visible
// 2. if sidebar is opened */}
{/* {isLoggedIn &&
sidebarOpened &&
<Dimmer.Dimmable as={Segment} blurring style={{position: 'absolute', width: '100%', height: '100%', top: 0}} dimmed>
<StyledDimmer {...dimmerProps} />
</Dimmer.Dimmable>} */}
</SidebarSemanticPushableStyled>
</PageLayout>
)
}
}

function mapStateToProps (state) {
Expand Down

0 comments on commit cdfaf58

Please sign in to comment.