flexor-web/src/components/app.tsx

import React, { FC, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'

import { handleApiError } from 'src/api/errors'
import { fetchSelf, setChecked } from 'src/actions/authentication'
import { setConfig } from 'src/actions/config'
import { getFetching } from 'src/selectors'
import { getCollapsed } from 'src/selectors/menu'

import getConfig from 'src/config'
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 SelfInfo from './self-info'

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 ViewUser from './pages/view-user'

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())
        }

        dispatch(setConfig(await getConfig()))
    }

    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 />}
                    <SelfInfo />
                    <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">
                            <ViewGroup />
                        </Route>
                        <Route path="/a/:id/edit">
                            <EditApp />
                        </Route>
                        <Route path="/a/:id">
                            <ViewApp />
                        </Route>
                        <Route path="/u/:id">
                            <ViewUser />
                        </Route>
                        <Route path="/login">
                            <Login />
                        </Route>
                        <Route path="/register">
                            <Register />
                        </Route>
                        <Route path="/communities">
                            <Groups />
                        </Route>
                        <Route path="/self/:tab?">
                            <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>

                <NotificationContainer />
            </div>
        </Router>
    )
}

export default App