diff --git a/src/App.tsx b/src/App.tsx index 5dbb867..a17e708 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,14 +3,13 @@ import { useAppSelector } from './hooks/store' import { Navigate, Route, Routes } from 'react-router-dom' import { AuthController } from './controllers' import { MainLayout } from './layouts/Main' +import { appPrivateRoutes, appPublicRoutes } from './routes' +import './App.scss' import { - appPrivateRoutes, - appPublicRoutes, privateRoutes, publicRoutes, recursiveRouteRenderer -} from './routes' -import './App.scss' +} from './routes/util' const App = () => { const authState = useAppSelector((state) => state.auth) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 97d66c3..f3580f9 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,16 +1,4 @@ -import { CreatePage } from '../pages/create' -import { HomePage } from '../pages/home' -import { LandingPage } from '../pages/landing' -import { ProfilePage } from '../pages/profile' -import { SettingsPage } from '../pages/settings/Settings' -import { CacheSettingsPage } from '../pages/settings/cache' -import { NostrLoginPage } from '../pages/settings/nostrLogin' -import { ProfileSettingsPage } from '../pages/settings/profile' -import { RelaysPage } from '../pages/settings/relays' -import { SignPage } from '../pages/sign' -import { VerifyPage } from '../pages/verify' import { hexToNpub } from '../utils' -import { Route, RouteProps } from 'react-router-dom' export const appPrivateRoutes = { homePage: '/', @@ -39,93 +27,3 @@ 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 & - Omit & { - children?: Array> - } - -/** - * This function maps over nested routes with optional condition for rendering - * @param {CustomRouteProps[]} routes - routes list - * @param {RenderConditionCallbackFn} renderConditionCallbackFn - render condition callback (default true) - */ -export function recursiveRouteRenderer( - routes?: CustomRouteProps[], - renderConditionCallbackFn: (route: CustomRouteProps) => boolean = () => - true -) { - 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) => - renderConditionCallbackFn(route) ? ( - - {recursiveRouteRenderer(route.children, renderConditionCallbackFn)} - - ) : null - ) -} - -type PublicRouteProps = CustomRouteProps<{ - hiddenWhenLoggedIn?: boolean -}> - -export const publicRoutes: PublicRouteProps[] = [ - { - path: appPublicRoutes.landingPage, - hiddenWhenLoggedIn: true, - element: - }, - { - path: appPublicRoutes.profile, - element: - }, - { - path: appPublicRoutes.verify, - element: - } -] - -export const privateRoutes = [ - { - path: appPrivateRoutes.homePage, - element: - }, - { - path: appPrivateRoutes.create, - element: - }, - { - path: `${appPrivateRoutes.sign}/:id?`, - element: - }, - { - path: appPrivateRoutes.settings, - element: - }, - { - path: appPrivateRoutes.profileSettings, - element: - }, - { - path: appPrivateRoutes.cacheSettings, - element: - }, - { - path: appPrivateRoutes.relays, - element: - }, - { - path: appPrivateRoutes.nostrLogin, - element: - } -] diff --git a/src/routes/util.tsx b/src/routes/util.tsx new file mode 100644 index 0000000..efde6c5 --- /dev/null +++ b/src/routes/util.tsx @@ -0,0 +1,103 @@ +import { Route, RouteProps } from 'react-router-dom' +import { appPrivateRoutes, appPublicRoutes } from '.' +import { CreatePage } from '../pages/create' +import { HomePage } from '../pages/home' +import { LandingPage } from '../pages/landing' +import { ProfilePage } from '../pages/profile' +import { CacheSettingsPage } from '../pages/settings/cache' +import { NostrLoginPage } from '../pages/settings/nostrLogin' +import { ProfileSettingsPage } from '../pages/settings/profile' +import { RelaysPage } from '../pages/settings/relays' +import { SettingsPage } from '../pages/settings/Settings' +import { SignPage } from '../pages/sign' +import { VerifyPage } from '../pages/verify' + +/** + * Helper type allows for extending react-router-dom's **RouteProps** with generic type + */ +type CustomRouteProps = T & + Omit & { + children?: Array> + } + +/** + * This function maps over nested routes with optional condition for rendering + * @param {CustomRouteProps[]} routes - routes list + * @param {RenderConditionCallbackFn} renderConditionCallbackFn - render condition callback (default true) + */ +export function recursiveRouteRenderer( + routes?: CustomRouteProps[], + renderConditionCallbackFn: (route: CustomRouteProps) => boolean = () => + true +) { + 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) => + renderConditionCallbackFn(route) ? ( + + {recursiveRouteRenderer(route.children, renderConditionCallbackFn)} + + ) : null + ) +} + +type PublicRouteProps = CustomRouteProps<{ + hiddenWhenLoggedIn?: boolean +}> + +export const publicRoutes: PublicRouteProps[] = [ + { + path: appPublicRoutes.landingPage, + hiddenWhenLoggedIn: true, + element: + }, + { + path: appPublicRoutes.profile, + element: + }, + { + path: appPublicRoutes.verify, + element: + } +] + +export const privateRoutes = [ + { + path: appPrivateRoutes.homePage, + element: + }, + { + path: appPrivateRoutes.create, + element: + }, + { + path: `${appPrivateRoutes.sign}/:id?`, + element: + }, + { + path: appPrivateRoutes.settings, + element: + }, + { + path: appPrivateRoutes.profileSettings, + element: + }, + { + path: appPrivateRoutes.cacheSettings, + element: + }, + { + path: appPrivateRoutes.relays, + element: + }, + { + path: appPrivateRoutes.nostrLogin, + element: + } +]