You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.6 KiB
79 lines
2.6 KiB
import React, { FC, useEffect } from 'react'
|
|
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
|
|
|
|
import { LOCAL_STORAGE_ACCESS_TOKEN_KEY } from 'src/constants'
|
|
|
|
import Footer from '../footer'
|
|
import NavigationMenu from '../navigation-menu'
|
|
import NotificationContainer from '../notification-container'
|
|
import Spinner from '../spinner'
|
|
import UserInfo from '../user-info'
|
|
|
|
import About from '../pages/about'
|
|
import Developers from '../pages/developers'
|
|
import Directory from '../pages/directory'
|
|
import Group from '../pages/group'
|
|
import GroupAdmin from '../pages/group-admin'
|
|
import Home from '../pages/home'
|
|
import Login from '../pages/login'
|
|
import Register from '../pages/register'
|
|
import RegisterGroup from '../pages/register-group'
|
|
import Self from '../pages/self'
|
|
|
|
import './app.scss'
|
|
|
|
interface Props {
|
|
collapsed: boolean
|
|
fetching: boolean
|
|
fetchSelf: () => void
|
|
setChecked: () => void
|
|
}
|
|
|
|
const App: FC<Props> = ({ collapsed, fetching, fetchSelf, setChecked }) => {
|
|
const mainMenuWidth = 275
|
|
const mainColumnMargin = collapsed ? 0 : mainMenuWidth
|
|
|
|
useEffect(() => {
|
|
if (localStorage.getItem(LOCAL_STORAGE_ACCESS_TOKEN_KEY)) {
|
|
fetchSelf()
|
|
} else {
|
|
setChecked()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Router>
|
|
<div>
|
|
<div id="main-menu" style={{ width: mainMenuWidth }}>
|
|
<div id="header">
|
|
<Link className="has-text-white is-size-3" to="/">Flexor</Link>
|
|
<hr className="has-background-grey-lighter" />
|
|
</div>
|
|
|
|
<NavigationMenu />
|
|
|
|
{fetching && <Spinner />}
|
|
<UserInfo />
|
|
<Footer />
|
|
</div>
|
|
|
|
<div id="main-column" style={{ marginRight: mainColumnMargin }}>
|
|
<Route exact path="/" component={Home} />
|
|
<Route path="/login" component={Login} />
|
|
<Route path="/register" component={Register} />
|
|
<Route path="/c/:id" component={Group} exact />
|
|
<Route path="/c/:id/admin/:tab?" component={GroupAdmin} />
|
|
<Route path="/c/:id/register" component={RegisterGroup} />
|
|
<Route path="/communities" component={Directory} />
|
|
<Route path="/self/:tab?" component={Self} />
|
|
<Route path="/developers" component={Developers} />
|
|
<Route path="/about" component={About} />
|
|
</div>
|
|
|
|
<NotificationContainer />
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|