refactor: recursiveRouteRenderer params update and comments
This commit is contained in:
parent
1070c9a8f9
commit
5d415a2359
18
src/App.tsx
18
src/App.tsx
@ -50,22 +50,12 @@ const App = () => {
|
|||||||
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
|
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
|
||||||
}
|
}
|
||||||
|
|
||||||
const publicRoutesList = recursiveRouteRenderer({
|
// Hide route only if loggedIn and r.hiddenWhenLoggedIn are both true
|
||||||
routes: publicRoutes,
|
const publicRoutesList = recursiveRouteRenderer(publicRoutes, (r) => {
|
||||||
renderConditionCallback: (r) => {
|
return !authState.loggedIn || !r.hiddenWhenLoggedIn
|
||||||
if (authState?.loggedIn) {
|
|
||||||
if (!r.hiddenWhenLoggedIn) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const privateRouteList = recursiveRouteRenderer({ routes: privateRoutes })
|
const privateRouteList = recursiveRouteRenderer(privateRoutes)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
|
@ -41,42 +41,45 @@ 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))
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper type allows for extending react-router-dom's **RouteProps** with generic type
|
||||||
|
*/
|
||||||
type CustomRouteProps<T> = T &
|
type CustomRouteProps<T> = T &
|
||||||
Omit<RouteProps, 'children'> & {
|
Omit<RouteProps, 'children'> & {
|
||||||
children?: Array<CustomRouteProps<T>>
|
children?: Array<CustomRouteProps<T>>
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CustomRoutes<T> {
|
/**
|
||||||
routes?: CustomRouteProps<T>[]
|
* This function maps over nested routes with optional condition for rendering
|
||||||
renderConditionCallback?: (route: CustomRouteProps<T>) => boolean
|
* @param {CustomRouteProps<T>[]} routes - routes list
|
||||||
}
|
* @param {RenderConditionCallbackFn} renderConditionCallbackFn - render condition callback (default true)
|
||||||
|
*/
|
||||||
type PublicRouteProps = CustomRouteProps<{
|
export function recursiveRouteRenderer<T>(
|
||||||
hiddenWhenLoggedIn?: boolean
|
routes?: CustomRouteProps<T>[],
|
||||||
}>
|
renderConditionCallbackFn: (route: CustomRouteProps<T>) => boolean = () =>
|
||||||
|
true
|
||||||
export function recursiveRouteRenderer<T>({
|
) {
|
||||||
routes,
|
|
||||||
renderConditionCallback = () => true
|
|
||||||
}: CustomRoutes<T>) {
|
|
||||||
if (!routes) return null
|
if (!routes) return null
|
||||||
|
|
||||||
|
// Callback allows us to pass arbitrary conditions for each route's rendering
|
||||||
|
// Skipping the callback will by default evaluate to true (show route)
|
||||||
return routes.map((route, index) =>
|
return routes.map((route, index) =>
|
||||||
renderConditionCallback(route) ? (
|
renderConditionCallbackFn(route) ? (
|
||||||
<Route
|
<Route
|
||||||
key={`${route.path}${index}`}
|
key={`${route.path}${index}`}
|
||||||
path={route.path}
|
path={route.path}
|
||||||
element={route.element}
|
element={route.element}
|
||||||
>
|
>
|
||||||
{recursiveRouteRenderer({
|
{recursiveRouteRenderer(route.children, renderConditionCallbackFn)}
|
||||||
routes: route.children,
|
|
||||||
renderConditionCallback
|
|
||||||
})}
|
|
||||||
</Route>
|
</Route>
|
||||||
) : null
|
) : null
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type PublicRouteProps = CustomRouteProps<{
|
||||||
|
hiddenWhenLoggedIn?: boolean
|
||||||
|
}>
|
||||||
|
|
||||||
export const publicRoutes: PublicRouteProps[] = [
|
export const publicRoutes: PublicRouteProps[] = [
|
||||||
{
|
{
|
||||||
path: appPublicRoutes.landingPage,
|
path: appPublicRoutes.landingPage,
|
||||||
|
Loading…
Reference in New Issue
Block a user