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.
153 lines
5.4 KiB
153 lines
5.4 KiB
import React, { FC, useEffect } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
|
|
|
|
import { handleApiError } from 'src/api/errors'
|
|
import { fetchSelf, setChecked } from 'src/actions/authentication'
|
|
import { setConfig } from 'src/actions/config'
|
|
import { setTheme } from 'src/actions/theme'
|
|
import { getAuthenticatedUser } from 'src/selectors/authentication'
|
|
import { getFetching } from 'src/selectors'
|
|
|
|
import getConfig from 'src/config'
|
|
import { LOCAL_STORAGE_ACCESS_TOKEN_KEY } from 'src/constants'
|
|
import { useDeepCompareEffect, useTheme } from 'src/hooks'
|
|
import { AppState, AppThunkDispatch, User } from 'src/types'
|
|
|
|
import Footer from './footer'
|
|
import Logo from './logo'
|
|
import NavigationMenu from './navigation-menu'
|
|
import NotificationContainer from './notification-container'
|
|
import Search from './search'
|
|
import SelfInfo from './self-info'
|
|
import Spinner from './spinner'
|
|
|
|
import About from './pages/about'
|
|
import Apps from './pages/apps'
|
|
import CreateApp from './pages/create-app'
|
|
import Developers from './pages/developers'
|
|
import EditApp from './pages/edit-app'
|
|
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 ViewGroup from './pages/view-group'
|
|
import ViewPost from './pages/view-post'
|
|
import ViewUser from './pages/view-user'
|
|
|
|
import '../styles/app.css'
|
|
|
|
const App: FC = () => {
|
|
const theme = useTheme()
|
|
const user = useSelector<AppState, User | undefined>(getAuthenticatedUser)
|
|
const fetching = useSelector<AppState, boolean>(getFetching)
|
|
const dispatch = useDispatch<AppThunkDispatch>()
|
|
|
|
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())
|
|
}
|
|
|
|
dispatch(setConfig(await getConfig()))
|
|
}
|
|
|
|
useEffect(() => {
|
|
init()
|
|
}, [])
|
|
|
|
useDeepCompareEffect(() => {
|
|
if (user && user.theme) dispatch(setTheme(user.theme))
|
|
}, [user])
|
|
|
|
useDeepCompareEffect(() => {
|
|
document.body.style.backgroundColor = theme.backgroundPrimary
|
|
}, [theme])
|
|
|
|
return (
|
|
<Router>
|
|
<main style={{ backgroundColor: theme.backgroundPrimary }}>
|
|
<div className="logo-container">
|
|
<Logo />
|
|
</div>
|
|
|
|
<div className="content" style={{ backgroundColor: theme.backgroundPrimary, borderLeftColor: theme.backgroundSecondary, borderRightColor: theme.backgroundPrimary }}>
|
|
<Switch>
|
|
<Route path="/c/:id/admin/:tab?">
|
|
<GroupAdmin />
|
|
</Route>
|
|
<Route path="/c/:id/register">
|
|
<RegisterGroup />
|
|
</Route>
|
|
<Route path="/c/:id">
|
|
<ViewGroup />
|
|
</Route>
|
|
<Route path="/a/:id/edit">
|
|
<EditApp />
|
|
</Route>
|
|
<Route path="/a/:id">
|
|
<ViewApp />
|
|
</Route>
|
|
<Route path="/u/:id">
|
|
<ViewUser />
|
|
</Route>
|
|
<Route path="/p/:id">
|
|
<ViewPost />
|
|
</Route>
|
|
<Route path="/login">
|
|
<Login />
|
|
</Route>
|
|
<Route path="/register">
|
|
<Register />
|
|
</Route>
|
|
<Route path="/communities">
|
|
<Groups />
|
|
</Route>
|
|
<Route path="/self">
|
|
<Self />
|
|
</Route>
|
|
<Route path="/apps">
|
|
<Apps />
|
|
</Route>
|
|
<Route path="/developers/create">
|
|
<CreateApp />
|
|
</Route>
|
|
<Route path="/developers">
|
|
<Developers />
|
|
</Route>
|
|
<Route path="/about">
|
|
<About />
|
|
</Route>
|
|
<Route path="/">
|
|
<Home />
|
|
</Route>
|
|
</Switch>
|
|
</div>
|
|
|
|
<div className="menu-container">
|
|
<div className="menu" style={{ backgroundColor: theme.backgroundSecondary, borderColor: theme.backgroundPrimary }}>
|
|
<Search />
|
|
<NavigationMenu />
|
|
{fetching && <Spinner />}
|
|
<SelfInfo />
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
|
|
<NotificationContainer />
|
|
</main>
|
|
</Router>
|
|
)
|
|
}
|
|
|
|
export default App
|