78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import React, { Component } from "react"
|
|
import { BrowserRouter as Router, Route } from "react-router-dom"
|
|
import styled from "@emotion/styled"
|
|
import { ThemeProvider } from "emotion-theming"
|
|
|
|
import { SIZES } from "./styles/constants"
|
|
|
|
import theme from "./styles/theme"
|
|
import Navbar from "./components/Navbar"
|
|
import Day from "./components/screens/Day"
|
|
import Month from "./components/screens/Month"
|
|
import Year from "./components/screens/Year"
|
|
import User from "./components/screens/User"
|
|
import Login from "./components/screens/Login"
|
|
import Register from "./components/screens/Register"
|
|
|
|
import { withAuthentication } from "./components/session"
|
|
|
|
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);
|
|
background-color: ${props => props.theme.colors.bodyBackground};
|
|
`
|
|
|
|
class App extends Component {
|
|
state = {
|
|
authUser: JSON.parse(localStorage.getItem("authUser")),
|
|
selectedTheme: "LIGHT",
|
|
}
|
|
|
|
onChangeTheme = () => {
|
|
const { selectedTheme } = this.state
|
|
const root = document.documentElement
|
|
const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT"
|
|
root.style.setProperty(
|
|
"background-color",
|
|
theme[newTheme].colors.bodyBackground
|
|
)
|
|
this.setState({ selectedTheme: newTheme })
|
|
}
|
|
|
|
render() {
|
|
const { selectedTheme } = this.state
|
|
|
|
const currentTheme = theme[selectedTheme]
|
|
return (
|
|
<ThemeProvider theme={currentTheme}>
|
|
<Router>
|
|
<Navbar toggleTheme={this.onChangeTheme} />
|
|
<RouteLayout>
|
|
<Route path="/:year(\d+)" component={Year} exact />
|
|
<Route
|
|
path="/:year(\d+)/:month(0[1-9]|1[0-2]+)"
|
|
component={Month}
|
|
exact
|
|
/>
|
|
<Route
|
|
path="/:year(\d+)/:month(0[1-9]|1[0-2]+)/:day(\d+)"
|
|
component={Day}
|
|
exact
|
|
/>
|
|
<Route path="/user" component={User} exact />
|
|
<Route path="/login" component={Login} exact />
|
|
<Route path="/register" component={Register} exact />
|
|
</RouteLayout>
|
|
</Router>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withAuthentication(App)
|