66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React, { FC, useEffect } from 'react'
|
|
import { Route, Routes, useLocation } from 'react-router'
|
|
|
|
//Redux
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { actionCreators as settingsActionCreators } from './store/reducers/Settings'
|
|
|
|
// Components
|
|
import { DynamicLayout } from './layouts'
|
|
import { DynamicPage } from './pages'
|
|
import { IReduxState, IRoute } from './interfaces'
|
|
|
|
interface IRouteProp {
|
|
path: string,
|
|
element?: JSX.Element
|
|
}
|
|
|
|
const NestedRoutes = (routes: IRoute[], tag: string | undefined = undefined) => {
|
|
|
|
if(!Array.isArray(routes)) return
|
|
|
|
return routes.map((route: IRoute, index: number) => {
|
|
const routeProps: IRouteProp = {
|
|
path: route.path
|
|
}
|
|
|
|
if (route.component) {
|
|
const page = <DynamicPage tag={route.component} />
|
|
routeProps.element = tag ? <DynamicLayout tag={tag}>{page}</DynamicLayout> : page
|
|
}
|
|
|
|
return <Route key={index} { ...routeProps }>{Array.isArray(route.childRoutes) ? NestedRoutes(route.childRoutes, tag) : ''}</Route>
|
|
})
|
|
}
|
|
|
|
|
|
|
|
const App: FC = () => {
|
|
const { pathname } = useLocation()
|
|
const dispatch = useDispatch()
|
|
const { routes, adminRoutes, serviceRoutes } = useSelector((state: IReduxState) => state.settings)
|
|
|
|
useEffect(() => {
|
|
dispatch(settingsActionCreators.requestSettings())
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth',
|
|
})
|
|
}, [pathname])
|
|
|
|
return <>
|
|
<Routes>
|
|
{ NestedRoutes(routes, 'PublicLayout') }
|
|
{ NestedRoutes(adminRoutes, 'AdminLayout') }
|
|
{ NestedRoutes(serviceRoutes) }
|
|
</Routes>
|
|
</>
|
|
}
|
|
|
|
export {
|
|
App
|
|
}
|