68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
// React
|
|
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/Content'
|
|
|
|
// Components
|
|
import { DynamicLayout } from './layouts'
|
|
import { DynamicPage } from './pages'
|
|
import { IRouteModel } from './models'
|
|
import { ApplicationState } from './store'
|
|
|
|
|
|
interface IRouteProp {
|
|
path: string,
|
|
element?: JSX.Element
|
|
}
|
|
|
|
const NestedRoutes = (routes: IRouteModel[], tag: string | undefined = undefined) => {
|
|
if(!Array.isArray(routes)) return
|
|
|
|
return routes.map((route: IRouteModel, index: number) => {
|
|
const routeProps: IRouteProp = {
|
|
path: route.target
|
|
}
|
|
|
|
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 state = useSelector((state: ApplicationState) => state.content)
|
|
|
|
useEffect(() => {
|
|
dispatch(settingsActionCreators.requestContent())
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth',
|
|
})
|
|
}, [pathname])
|
|
|
|
return <>
|
|
<Routes>
|
|
{state?.routes ? NestedRoutes(state.routes, 'PublicLayout') : ''}
|
|
{state?.adminRoutes ? NestedRoutes(state.adminRoutes, 'AdminLayout') : ''}
|
|
{state?.serviceRoutes ? NestedRoutes(state.serviceRoutes) : ''}
|
|
</Routes>
|
|
</>
|
|
}
|
|
|
|
export {
|
|
App
|
|
}
|