import React from 'react'; import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; import { ApplicationContext } from './ApplicationContext'; import GlobalStyle from './GlobalStyle'; import Nav from './components/Nav'; import CommitteeDisclaimer from './components/CommitteeDisclaimer'; import theme from './theme'; import router from './router'; const Chrome = styled.div` display: block; width: 100%; min-height: 100vh; background-color: ${({ theme }) => theme.colors.chrome}; `; const PageContainer = styled.div` width: 100%; max-width: ${({ theme }) => theme.max.site}; margin-left: auto; margin-right: auto; padding-bottom: 24px; @media ${({ theme }) => theme.media.tablet} { padding-left: 24px; padding-right: 24px; } `; function reducer(state, action) { return action(state); } export default function Application(props) { const initialState = { ...props }; if (!initialState.PageComponent) { initialState.PageComponent = router(location.pathname).pop(); } const [state, dispatch] = React.useReducer(reducer, initialState); const contextValue = { ...state, dispatch, }; const { PageComponent } = state; return ( <React.Fragment> <ThemeProvider theme={theme}> <ApplicationContext.Provider value={contextValue}> <GlobalStyle /> <Chrome> <PageContainer> <Nav /> <PageComponent /> <CommitteeDisclaimer /> </PageContainer> </Chrome> </ApplicationContext.Provider> </ThemeProvider> </React.Fragment> ); }