feat: add children support to routes arrays

This commit is contained in:
enes 2024-07-26 13:15:14 +02:00
parent 017d1ab88b
commit 0b35f11abf
3 changed files with 69 additions and 39 deletions

View File

@ -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>

View File

@ -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>
) )
} }

View File

@ -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,