import React, { Component, useEffect } from 'react'
import { Provider } from 'react-redux'
import store from './store'
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import LoginPage from './components/LoginPage'
import AddItemPage from './components/AddItemPage'
import AddPropPage from './components/AddPropPage'
import ItemListPage from './components/ItemListPage'
import ItemPage from './components/ItemPage'
import PropListPage from './components/PropListPage'
import HomePage from './components/HomePage'
import NotFoundPage from './components/NotFoundPage'
import createMiddleware from './middlewares/createMiddleware'
import './styles/app.scss'
import { actionFetchUserData } from './store/system/actions'
const isAuthenticated = (Component : any ) => {
return (0 !== store.getState().system.jwt.length ? <Component /> : <Redirect to='/login' />)
}
const isNotAuthenticated = (Component: any) => {
return (0 === store.getState().system.jwt.length ? <Component /> : <Redirect to='/' />)
}
const initUser = () => {
const localJwt : string | null = localStorage.getItem('jwt')
if (null !== localJwt) {
store.dispatch(actionFetchUserData({
jwt: localJwt
}))
}
}
const App = () => {
// useEffect(() => initUser())
initUser()
return (<Provider store={store}>
<Router>
<Switch>
<Route exact
path="/"
render={() => createMiddleware(isAuthenticated, HomePage)} />
<Route path="/login"
render={() => createMiddleware(isNotAuthenticated, LoginPage)} />
<Route path="/items"
render={() => createMiddleware(isAuthenticated, ItemListPage)} />
<Route path="/items/add"
render={() => createMiddleware(isAuthenticated, AddItemPage)} />
<Route path="/props"
render={() => createMiddleware(isAuthenticated, PropListPage)} />
<Route path="/props/add"
render={() => createMiddleware(isAuthenticated, AddPropPage)} />
<Route path="/item/:id"
render={() => createMiddleware(isAuthenticated, ItemPage)} />
<Route exact
path="*"
component={NotFoundPage} />
</Switch>
</Router>
</Provider>)
}
export default App