Landing page - new design implementation #122
52
src/App.tsx
52
src/App.tsx
@ -7,7 +7,8 @@ import {
|
||||
appPrivateRoutes,
|
||||
appPublicRoutes,
|
||||
privateRoutes,
|
||||
publicRoutes
|
||||
publicRoutes,
|
||||
recursiveRouteRenderer
|
||||
} from './routes'
|
||||
import { State } from './store/rootReducer'
|
||||
import { getNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey } from './utils'
|
||||
@ -48,39 +49,28 @@ const App = () => {
|
||||
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
|
||||
}
|
||||
|
||||
const publicRoutesList = recursiveRouteRenderer({
|
||||
routes: publicRoutes,
|
||||
renderConditionCallback: (r) => {
|
||||
if (authState?.loggedIn) {
|
||||
s marked this conversation as resolved
Outdated
|
||||
if (!r.hiddenWhenLoggedIn) {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const privateRouteList = recursiveRouteRenderer({ routes: privateRoutes })
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<MainLayout />}>
|
||||
{authState?.loggedIn &&
|
||||
privateRoutes.map((route, index) => (
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
{authState?.loggedIn && privateRouteList}
|
||||
{publicRoutesList}
|
||||
<Route path="*" element={<Navigate to={handleRootRedirect()} />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
|
@ -8,7 +8,7 @@ import {
|
||||
} from '@mui/material'
|
||||
import { useEffect } from 'react'
|
||||
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 { State } from '../../store/rootReducer'
|
||||
import { saveVisitedLink } from '../../utils'
|
||||
@ -279,6 +279,7 @@ export const LandingPage = () => {
|
||||
</Typography>
|
||||
</Box>
|
||||
)} */}
|
||||
<Outlet />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
@ -10,6 +10,7 @@ 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: '/',
|
||||
@ -35,16 +36,54 @@ export const getProfileRoute = (hexKey: string) =>
|
||||
export const getProfileSettingsRoute = (hexKey: string) =>
|
||||
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
|
||||
|
||||
s
commented
Add some comments about the function. Add some comments about the function.
|
||||
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,
|
||||
hiddenWhenLoggedIn: true,
|
||||
element: <LandingPage />
|
||||
},
|
||||
{
|
||||
path: appPublicRoutes.login,
|
||||
hiddenWhenLoggedIn: true,
|
||||
element: <Login />
|
||||
element: <LandingPage />,
|
||||
children: [
|
||||
{
|
||||
path: appPublicRoutes.login,
|
||||
hiddenWhenLoggedIn: true,
|
||||
element: <Login />
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: appPublicRoutes.profile,
|
||||
|
Loading…
Reference in New Issue
Block a user
It'll be good to add a comment about
renderConditionCallback
to explain what it does.