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.
124 lines
4.1 KiB
124 lines
4.1 KiB
import React, { FC, useEffect } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { BrowserRouter as Router, Route, Switch, Link, useHistory } from 'react-router-dom'
|
|
|
|
import { handleApiError } from 'src/api/errors'
|
|
import { fetchSelf, setChecked } from 'src/actions/authentication'
|
|
import { getFetching } from 'src/selectors'
|
|
import { getCollapsed } from 'src/selectors/menu'
|
|
|
|
import { LOCAL_STORAGE_ACCESS_TOKEN_KEY } from 'src/constants'
|
|
import { AppState, AppThunkDispatch } from 'src/types'
|
|
|
|
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 CreateApp from './pages/create-app'
|
|
import Developers from './pages/developers'
|
|
import Group from './pages/group'
|
|
import GroupAdmin from './pages/group-admin'
|
|
import Groups from './pages/groups'
|
|
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 ViewApp from './pages/view-app'
|
|
|
|
import '../styles/app.scss'
|
|
import '../styles/spinner.scss'
|
|
|
|
const App: FC = () => {
|
|
const collapsed = useSelector<AppState, boolean>(getCollapsed)
|
|
const fetching = useSelector<AppState, boolean>(getFetching)
|
|
|
|
const dispatch = useDispatch<AppThunkDispatch>()
|
|
|
|
const mainMenuWidth = 275
|
|
const mainColumnMargin = collapsed ? 0 : mainMenuWidth
|
|
|
|
const init = async () => {
|
|
if (localStorage.getItem(LOCAL_STORAGE_ACCESS_TOKEN_KEY)) {
|
|
try {
|
|
await dispatch(fetchSelf())
|
|
} catch (err) {
|
|
console.log('err', err)
|
|
handleApiError(err, dispatch)
|
|
}
|
|
} else {
|
|
dispatch(setChecked())
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
init()
|
|
}, [])
|
|
|
|
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 }}>
|
|
<Switch>
|
|
<Route path="/c/:id/admin/:tab?">
|
|
<GroupAdmin />
|
|
</Route>
|
|
<Route path="/c/:id/register">
|
|
<RegisterGroup />
|
|
</Route>
|
|
<Route path="/c/:id">
|
|
<Group />
|
|
</Route>
|
|
<Route path="/a/:id">
|
|
<ViewApp />
|
|
</Route>
|
|
<Route path="/login">
|
|
<Login />
|
|
</Route>
|
|
<Route path="/register">
|
|
<Register />
|
|
</Route>
|
|
<Route path="/communities">
|
|
<Groups />
|
|
</Route>
|
|
<Route path="/self/:tab?">
|
|
<Self />
|
|
</Route>
|
|
<Route path="/developers/create">
|
|
<CreateApp />
|
|
</Route>
|
|
<Route path="/developers">
|
|
<Developers />
|
|
</Route>
|
|
<Route path="/about">
|
|
<About />
|
|
</Route>
|
|
<Route path="/">
|
|
<Home />
|
|
</Route>
|
|
</Switch>
|
|
</div>
|
|
|
|
<NotificationContainer />
|
|
</div>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|