App.tsx

import React from 'react'
import {Switch, Route, BrowserRouter, Redirect} from 'react-router-dom'
import { Provider, useSelector } from 'react-redux'
import store from 'store/initStore'
import Login from 'scenes/Login/LoginForm'
import ProjectListPage from 'scenes/ProjectListPage'
import CreateProject from 'scenes/ProjectListPage/CreateProject'
import Editor from 'scenes/Editor'
import Calculation from 'scenes/Calculation'
import DataTable from 'scenes/DataTable'
import Alert from 'components/Alert/Alert'
import AccessDeniedMessage from 'components/Alert/AccessDeniedMessage'
import './App.scss'
import {RootState} from 'store/reducers'

function PrivateRoute({ component, ...rest }) {
	const hasToken = localStorage.getItem('token')
    const showAccessDeniedMessage = useSelector((state: RootState) => state.alert.showAccessDeniedMessage)

    if (showAccessDeniedMessage) {
		return <Redirect to="/403" />
    }

	return (
		hasToken
		?  <Route {...rest} component={component} />
		: <Redirect to="/login" />
	)
}

const Routes = () => (
	<div className="App" data-testid="App">
        <BrowserRouter>
            <Switch>
                <Route exact path="/login" component={Login} />
                <PrivateRoute path="/projects/create" component={CreateProject} />
                <PrivateRoute path="/projects" component={ProjectListPage} />
                <PrivateRoute path="/home/scheme/:projectId" component={Editor} />
                <PrivateRoute path="/calculation/:projectId" component={Calculation} />
                <PrivateRoute path="/data/:projectId/:entityType" component={DataTable} />
                <PrivateRoute path="/home" component={Editor} />
                <Route exact path="/403" component={AccessDeniedMessage} />
                <Redirect to="/login" />
            </Switch>
        </BrowserRouter>
		<Alert/>
	</div>
)


const App: React.FC = () => {
	return (
		<Provider store={store}>
			<Routes />
		</Provider>
	)
}

export default App