123 lines
3.5 KiB
JavaScript
123 lines
3.5 KiB
JavaScript
import React, { Component } from "react"
|
|
import { Router } from "@reach/router"
|
|
import { compose } from "recompose"
|
|
import styled from "@emotion/styled"
|
|
import { withTheme } from "@emotion/react"
|
|
|
|
import { SIZES } from "styles/constants"
|
|
|
|
// import theme from "./styles/theme"
|
|
import Day from "routes/Day"
|
|
import Month from "routes/Month"
|
|
import Year from "routes/Year"
|
|
import User from "routes/User"
|
|
import Search from "routes/Search"
|
|
import Welcome from "routes/Welcome"
|
|
|
|
import Navbar from "components/Navbar"
|
|
import PrivateRoute from "components/PrivateRoute"
|
|
import { OnlineContext } from "components/context/online"
|
|
import { withAuthentication } from "components/session"
|
|
import { withFirebase } from "components/firebase"
|
|
import ThemeTogglerContext from "components/context/theme"
|
|
|
|
const FullscreenBgColor = styled.div`
|
|
background-color: ${props => props.theme.colors.bodyBackground};
|
|
`
|
|
const RouteLayout = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 10px;
|
|
max-width: ${SIZES.maxWidth};
|
|
min-height: calc(100vh - 60px);
|
|
`
|
|
|
|
class App extends Component {
|
|
state = {
|
|
selectedTheme: this.props.theme.name,
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener("online", () => {
|
|
this.setState({ online: true })
|
|
})
|
|
|
|
window.addEventListener("offline", () => {
|
|
this.setState({ online: false })
|
|
})
|
|
|
|
this.setState({
|
|
authUser: JSON.parse(localStorage.getItem("authUser")),
|
|
online: navigator.onLine,
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const { authUser, online } = this.state
|
|
const { authUser: propAuthUser } = this.props
|
|
const authed = !!propAuthUser || !!authUser
|
|
|
|
return (
|
|
<ThemeTogglerContext.Consumer>
|
|
{({ toggle }) => (
|
|
<OnlineContext.Provider value={online}>
|
|
<FullscreenBgColor>
|
|
<Navbar toggleTheme={toggle} />
|
|
<RouteLayout>
|
|
<Router style={{ height: "100%" }}>
|
|
<PrivateRoute
|
|
authed={authed}
|
|
authUser={propAuthUser}
|
|
path="/app/:year"
|
|
component={Year}
|
|
exact
|
|
/>
|
|
<PrivateRoute
|
|
authed={authed}
|
|
authUser={propAuthUser}
|
|
path="/app/:year/:month"
|
|
component={Month}
|
|
exact
|
|
/>
|
|
<PrivateRoute
|
|
authed={authed}
|
|
authUser={propAuthUser}
|
|
emailVerificationUnnecessary={false}
|
|
path="/app/:year/:month/:day"
|
|
component={Day}
|
|
exact
|
|
/>
|
|
<PrivateRoute
|
|
authed={authed}
|
|
authUser={propAuthUser}
|
|
emailVerificationUnnecessary={false}
|
|
path="/app/search"
|
|
component={Search}
|
|
exact
|
|
/>
|
|
<PrivateRoute
|
|
authed={authed}
|
|
authUser={propAuthUser}
|
|
path="/app/user"
|
|
component={User}
|
|
exact
|
|
/>
|
|
<Welcome authed={authed} path="/app" exact />
|
|
</Router>
|
|
</RouteLayout>
|
|
</FullscreenBgColor>
|
|
</OnlineContext.Provider>
|
|
)}
|
|
</ThemeTogglerContext.Consumer>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default compose(
|
|
withAuthentication,
|
|
withFirebase,
|
|
withTheme
|
|
)(App)
|