feat: add children support to routes arrays
This commit is contained in:
parent
017d1ab88b
commit
0b35f11abf
52
src/App.tsx
52
src/App.tsx
@ -7,7 +7,8 @@ import {
|
|||||||
appPrivateRoutes,
|
appPrivateRoutes,
|
||||||
appPublicRoutes,
|
appPublicRoutes,
|
||||||
privateRoutes,
|
privateRoutes,
|
||||||
publicRoutes
|
publicRoutes,
|
||||||
|
recursiveRouteRenderer
|
||||||
} from './routes'
|
} from './routes'
|
||||||
import { State } from './store/rootReducer'
|
import { State } from './store/rootReducer'
|
||||||
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
||||||
@ -48,39 +49,28 @@ const App = () => {
|
|||||||
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
|
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const publicRoutesList = recursiveRouteRenderer({
|
||||||
|
routes: publicRoutes,
|
||||||
|
renderConditionCallback: (r) => {
|
||||||
|
if (authState?.loggedIn) {
|
||||||
|
if (!r.hiddenWhenLoggedIn) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const privateRouteList = recursiveRouteRenderer({ routes: privateRoutes })
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route element={<MainLayout />}>
|
<Route element={<MainLayout />}>
|
||||||
{authState?.loggedIn &&
|
{authState?.loggedIn && privateRouteList}
|
||||||
privateRoutes.map((route, index) => (
|
{publicRoutesList}
|
||||||
<Route
|
|
||||||
key={route.path + index}
|
|
||||||
path={route.path}
|
|
||||||
element={route.element}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{publicRoutes.map((route, index) => {
|
|
||||||
if (authState?.loggedIn) {
|
|
||||||
if (!route.hiddenWhenLoggedIn) {
|
|
||||||
return (
|
|
||||||
<Route
|
|
||||||
key={route.path + index}
|
|
||||||
path={route.path}
|
|
||||||
element={route.element}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Route
|
|
||||||
key={route.path + index}
|
|
||||||
path={route.path}
|
|
||||||
element={route.element}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
|
|
||||||
<Route path="*" element={<Navigate to={handleRootRedirect()} />} />
|
<Route path="*" element={<Navigate to={handleRootRedirect()} />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
|
@ -8,7 +8,7 @@ import {
|
|||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useLocation, useNavigate } from 'react-router-dom'
|
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
|
||||||
import { appPublicRoutes } from '../../routes'
|
import { appPublicRoutes } from '../../routes'
|
||||||
import { State } from '../../store/rootReducer'
|
import { State } from '../../store/rootReducer'
|
||||||
import { saveVisitedLink } from '../../utils'
|
import { saveVisitedLink } from '../../utils'
|
||||||
@ -279,6 +279,7 @@ export const LandingPage = () => {
|
|||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
)} */}
|
)} */}
|
||||||
|
<Outlet />
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,7 @@ import { RelaysPage } from '../pages/settings/relays'
|
|||||||
import { SignPage } from '../pages/sign'
|
import { SignPage } from '../pages/sign'
|
||||||
import { VerifyPage } from '../pages/verify'
|
import { VerifyPage } from '../pages/verify'
|
||||||
import { hexToNpub } from '../utils'
|
import { hexToNpub } from '../utils'
|
||||||
|
import { Route, RouteProps } from 'react-router-dom'
|
||||||
|
|
||||||
export const appPrivateRoutes = {
|
export const appPrivateRoutes = {
|
||||||
homePage: '/',
|
homePage: '/',
|
||||||
@ -35,16 +36,54 @@ export const getProfileRoute = (hexKey: string) =>
|
|||||||
export const getProfileSettingsRoute = (hexKey: string) =>
|
export const getProfileSettingsRoute = (hexKey: string) =>
|
||||||
appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
|
appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
|
||||||
|
|
||||||
export const publicRoutes = [
|
type CustomRouteProps<T> = T &
|
||||||
|
Omit<RouteProps, 'children'> & {
|
||||||
|
children?: Array<CustomRouteProps<T>>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CustomRoutes<T> {
|
||||||
|
routes?: CustomRouteProps<T>[]
|
||||||
|
renderConditionCallback?: (route: CustomRouteProps<T>) => boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type PublicRouteProps = CustomRouteProps<{
|
||||||
|
hiddenWhenLoggedIn?: boolean
|
||||||
|
}>
|
||||||
|
|
||||||
|
export function recursiveRouteRenderer<T>({
|
||||||
|
routes,
|
||||||
|
renderConditionCallback = () => true
|
||||||
|
}: CustomRoutes<T>) {
|
||||||
|
if (!routes) return null
|
||||||
|
|
||||||
|
return routes.map((route, index) =>
|
||||||
|
renderConditionCallback(route) ? (
|
||||||
|
<Route
|
||||||
|
key={`${route.path}${index}`}
|
||||||
|
path={route.path}
|
||||||
|
element={route.element}
|
||||||
|
>
|
||||||
|
{recursiveRouteRenderer({
|
||||||
|
routes: route.children,
|
||||||
|
renderConditionCallback
|
||||||
|
})}
|
||||||
|
</Route>
|
||||||
|
) : null
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const publicRoutes: PublicRouteProps[] = [
|
||||||
{
|
{
|
||||||
path: appPublicRoutes.landingPage,
|
path: appPublicRoutes.landingPage,
|
||||||
hiddenWhenLoggedIn: true,
|
hiddenWhenLoggedIn: true,
|
||||||
element: <LandingPage />
|
element: <LandingPage />,
|
||||||
},
|
children: [
|
||||||
{
|
{
|
||||||
path: appPublicRoutes.login,
|
path: appPublicRoutes.login,
|
||||||
hiddenWhenLoggedIn: true,
|
hiddenWhenLoggedIn: true,
|
||||||
element: <Login />
|
element: <Login />
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: appPublicRoutes.profile,
|
path: appPublicRoutes.profile,
|
||||||
|
Loading…
Reference in New Issue
Block a user