src/App.tsx

@@ -50,22 +50,12 @@ const App = () => {
     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 (
     <Routes>

src/routes/index.tsx

@@ -41,42 +41,45 @@ export const getProfileRoute = (hexKey: string) =>
 export const getProfileSettingsRoute = (hexKey: string) =>
   appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
 
+/**
+ * Helper type allows for extending react-router-dom's **RouteProps** with generic type
+ */
 type CustomRouteProps<T> = T &
   Omit<RouteProps, 'children'> & {
     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
 
+  // 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) =>
-    renderConditionCallback(route) ? (
+    renderConditionCallbackFn(route) ? (
       <Route
         key={`${route.path}${index}`}
         path={route.path}
         element={route.element}
       >
-        {recursiveRouteRenderer({
+        {recursiveRouteRenderer(route.children, renderConditionCallbackFn)}
-          routes: route.children,
-          renderConditionCallback
-        })}
       </Route>
     ) : null
   )
 }
 
+type PublicRouteProps = CustomRouteProps<{
+  hiddenWhenLoggedIn?: boolean
+}>
+
 export const publicRoutes: PublicRouteProps[] = [
   {
     path: appPublicRoutes.landingPage,