From c0734aeaca8f5b66947b1bebb83842738233ca40 Mon Sep 17 00:00:00 2001
From: Stephanie Freitag <stephanie.freitag@holi.team>
Date: Fri, 28 Mar 2025 11:16:04 +0100
Subject: [PATCH] HOLI-11059: improve naming and add documentation
---
.../navigation/OnboardingAwaitingNavigator.tsx | 4 +++-
apps/mobile/navigation/RootNavigator.tsx | 6 +++---
.../OnboardingAwaitingNavigator.test.tsx | 4 ++--
.../__tests__/createServerSideProps.test.ts | 16 ++++++++--------
apps/web/helpers/createServerSideProps.ts | 18 +++++++++---------
apps/web/pages/index.tsx | 2 +-
apps/web/pages/onboarding/index.tsx | 2 +-
apps/web/types.ts | 12 +++++++++---
8 files changed, 36 insertions(+), 28 deletions(-)
diff --git a/apps/mobile/navigation/OnboardingAwaitingNavigator.tsx b/apps/mobile/navigation/OnboardingAwaitingNavigator.tsx
index c38fed6952..9e9a296be1 100644
--- a/apps/mobile/navigation/OnboardingAwaitingNavigator.tsx
+++ b/apps/mobile/navigation/OnboardingAwaitingNavigator.tsx
@@ -22,5 +22,7 @@ export const OnboardingAwaitingNavigator = ({ onReady }: OnboardingAwaitingNavig
return null
}
- return <RootNavigator showOnboarding={showOnboardingOnStartup} />
+ // Overrides the "default route" of the app if onboarding should be shown.
+ // This is based on the suggested way to handle authentication by react navigation: https://reactnavigation.org/docs/auth-flow/
+ return <RootNavigator showOnboardingOnStartup={showOnboardingOnStartup} />
}
diff --git a/apps/mobile/navigation/RootNavigator.tsx b/apps/mobile/navigation/RootNavigator.tsx
index 44fb985238..84ac64ee6d 100644
--- a/apps/mobile/navigation/RootNavigator.tsx
+++ b/apps/mobile/navigation/RootNavigator.tsx
@@ -77,15 +77,15 @@ export type RootStackScreens = {
const RootStack = createNativeStackNavigator<RootStackScreens>()
export interface RootNavigatorProps {
- showOnboarding: boolean
+ showOnboardingOnStartup: boolean
}
-export const RootNavigator = ({ showOnboarding }: RootNavigatorProps) => {
+export const RootNavigator = ({ showOnboardingOnStartup }: RootNavigatorProps) => {
const { theme } = useTheme()
const { colors } = theme
return (
<RootStack.Navigator
- initialRouteName={showOnboarding ? RouteName.Onboarding : RouteName.BottomTabs}
+ initialRouteName={showOnboardingOnStartup ? RouteName.Onboarding : RouteName.BottomTabs}
screenOptions={{
headerShown: false,
headerShadowVisible: false,
diff --git a/apps/mobile/navigation/__tests__/OnboardingAwaitingNavigator.test.tsx b/apps/mobile/navigation/__tests__/OnboardingAwaitingNavigator.test.tsx
index 8f96792b9c..2ebe917410 100644
--- a/apps/mobile/navigation/__tests__/OnboardingAwaitingNavigator.test.tsx
+++ b/apps/mobile/navigation/__tests__/OnboardingAwaitingNavigator.test.tsx
@@ -12,8 +12,8 @@ jest.mock('@holi/core/screens/onboarding/hooks/onboardingState', () => ({
useOnboardingRedirect: jest.fn(),
}))
-const MockedRootNavigator = ({ showOnboarding }: RootNavigatorProps) => (
- <Text size="md">{showOnboarding ? 'onboarding' : 'something else'}</Text>
+const MockedRootNavigator = ({ showOnboardingOnStartup }: RootNavigatorProps) => (
+ <Text size="md">{showOnboardingOnStartup ? 'onboarding' : 'something else'}</Text>
)
jest.mock('@holi/mobile/navigation/RootNavigator', () => ({
diff --git a/apps/web/helpers/__tests__/createServerSideProps.test.ts b/apps/web/helpers/__tests__/createServerSideProps.test.ts
index 72ff38c9c2..077a7a8447 100644
--- a/apps/web/helpers/__tests__/createServerSideProps.test.ts
+++ b/apps/web/helpers/__tests__/createServerSideProps.test.ts
@@ -348,7 +348,7 @@ describe('createServerSideProps', () => {
})
})
- describe('login state dependent redirects', () => {
+ describe('onboarding state-dependent redirects', () => {
type RedirectTestData = { userType: UserType; expectedRedirect: boolean }
describe('incomplete account', () => {
const testData: RedirectTestData[] = [
@@ -424,7 +424,7 @@ describe('createServerSideProps', () => {
async ({ userType, expectedRedirect }) => {
const context = setupAndCreateContextForUser(userType)
const props = await createServerSideProps(context, [], {
- redirectIfLoggedIn: '/some-page',
+ redirectRouteForLoggedInUsers: '/some-page',
})
if (expectedRedirect) {
@@ -443,7 +443,7 @@ describe('createServerSideProps', () => {
it('should not redirect to specified page if already there', async () => {
const contextOnboarding = setupAndCreateContextForUser('loggedIn', { url: '/some-page' })
const props = await createServerSideProps(contextOnboarding, [], {
- redirectIfLoggedIn: '/some-page',
+ redirectRouteForLoggedInUsers: '/some-page',
})
expect('redirect' in props).toBeFalsy()
@@ -474,7 +474,7 @@ describe('createServerSideProps', () => {
async ({ userType, expectedRedirect }) => {
const context = setupAndCreateContextForUser(userType)
const props = await createServerSideProps(context, [], {
- redirectIfLoggedOut: '/some-page',
+ redirectRouteForLoggedOutUsers: '/some-page',
})
if (expectedRedirect) {
@@ -493,7 +493,7 @@ describe('createServerSideProps', () => {
it('should not redirect to specified page if already there', async () => {
const contextOnboarding = setupAndCreateContextForUser('newUser', { url: '/some-page' })
const props = await createServerSideProps(contextOnboarding, [], {
- redirectIfLoggedOut: '/some-page',
+ redirectRouteForLoggedOutUsers: '/some-page',
})
expect('redirect' in props).toBeFalsy()
@@ -524,7 +524,7 @@ describe('createServerSideProps', () => {
async ({ userType, expectedRedirect }) => {
const context = setupAndCreateContextForUser(userType)
const props = await createServerSideProps(context, [], {
- redirectIfNewUser: '/some-page',
+ redirectRouteForNewUsers: '/some-page',
})
if (expectedRedirect) {
@@ -543,7 +543,7 @@ describe('createServerSideProps', () => {
it('should not redirect to specified page if already there', async () => {
const contextOnboarding = setupAndCreateContextForUser('newUser', { url: '/some-page' })
const props = await createServerSideProps(contextOnboarding, [], {
- redirectIfNewUser: '/some-page',
+ redirectRouteForNewUsers: '/some-page',
})
expect('redirect' in props).toBeFalsy()
@@ -570,7 +570,7 @@ describe('createServerSideProps', () => {
expect(props).toEqual(
expectedProps.with({
customProps: {
- redirectIfLoggedIn: '/',
+ redirectRouteForLoggedInUsers: '/',
},
})
)
diff --git a/apps/web/helpers/createServerSideProps.ts b/apps/web/helpers/createServerSideProps.ts
index 8b56bb253a..e2de728dab 100644
--- a/apps/web/helpers/createServerSideProps.ts
+++ b/apps/web/helpers/createServerSideProps.ts
@@ -99,7 +99,7 @@ export const createServerSideProps = async (
const userId = userQueryResult.data?.authenticatedUserV2?.id
const user = createUserPageProps(userQueryResult.data?.authenticatedUserV2, req)
- const redirectDestination = handleLoginStateDependentRedirect(user, customProps)
+ const redirectDestination = handleOnboardingStateDependentRedirect(user, customProps)
if (redirectDestination && req.url !== redirectDestination) {
return {
@@ -118,18 +118,18 @@ export const createServerSideProps = async (
})
}
-const handleLoginStateDependentRedirect = (user: UserPageProps, customProps?: Partial<CustomProps>) => {
+const handleOnboardingStateDependentRedirect = (user: UserPageProps, customProps?: Partial<CustomProps>) => {
if (!user.isLoggedOut && !user.accountCompleted) {
return '/onboarding'
}
- if (customProps?.redirectIfLoggedIn && !user.isLoggedOut) {
- return customProps.redirectIfLoggedIn
+ if (customProps?.redirectRouteForLoggedInUsers && !user.isLoggedOut) {
+ return customProps.redirectRouteForLoggedInUsers
}
- if (customProps?.redirectIfNewUser && user.isLoggedOut && !user.guestMode) {
- return customProps.redirectIfNewUser
+ if (customProps?.redirectRouteForNewUsers && user.isLoggedOut && !user.guestMode) {
+ return customProps.redirectRouteForNewUsers
}
- if (customProps?.redirectIfLoggedOut && user.isLoggedOut) {
- return customProps.redirectIfLoggedOut
+ if (customProps?.redirectRouteForLoggedOutUsers && user.isLoggedOut) {
+ return customProps.redirectRouteForLoggedOutUsers
}
return undefined
}
@@ -138,4 +138,4 @@ export const createServerSidePropsWithLoggedInUserGuard: typeof createServerSide
context,
queries,
customProps
-) => createServerSideProps(context, queries, { ...customProps, redirectIfLoggedIn: '/' })
+) => createServerSideProps(context, queries, { ...customProps, redirectRouteForLoggedInUsers: '/' })
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index 7f0b49bc7b..ea489a3b12 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -9,7 +9,7 @@ const HomeFeedPage: NextPage = () => <HomeFeed />
export const getServerSideProps = async (context: GetServerSidePropsContext) =>
createServerSideProps(context, [], {
seoTitle: 'seo.h1.home',
- redirectIfNewUser: '/onboarding',
+ redirectRouteForNewUsers: '/onboarding',
})
export default HomeFeedPage
diff --git a/apps/web/pages/onboarding/index.tsx b/apps/web/pages/onboarding/index.tsx
index 9630c76d8e..28a0d5d4fa 100644
--- a/apps/web/pages/onboarding/index.tsx
+++ b/apps/web/pages/onboarding/index.tsx
@@ -8,7 +8,7 @@ const OnboardingPage: NextPage = () => <Onboarding />
export const getServerSideProps = async (context: GetServerSidePropsContext) =>
createServerSideProps(context, [], {
- redirectIfLoggedIn: '/',
+ redirectRouteForLoggedInUsers: '/',
})
export default OnboardingPage
diff --git a/apps/web/types.ts b/apps/web/types.ts
index b97cc47a11..c8c0854a25 100644
--- a/apps/web/types.ts
+++ b/apps/web/types.ts
@@ -10,16 +10,22 @@ export interface CustomProps {
seoTitle?: string
urls?: SeoUrls
blockIndexing?: boolean
+ /** Name of path patameters that are expected to be UUIDs. Will try to correct invalid UUIDs (and redirect accordingly) if possible. */
uuidParams?: (string | string[] | undefined)[]
- redirectIfLoggedIn?: string
- redirectIfLoggedOut?: string
- redirectIfNewUser?: string
+ /** Prevents logged in users from seeing the page but redirecting them instead to the specified route. Useful e.g. for login or onboarding screens. */
+ redirectRouteForLoggedInUsers?: string
+ /** Prevents logged out users from seeing the page but redirecting them instead to the specified route. Might be used for screens that should not be visible to logged out users. */
+ redirectRouteForLoggedOutUsers?: string
+ /** Prevents users, that never visited holi before, from seeing the page but redirecting theminstead to the specified route (this excludes guest users). Useful e.g. to enforce onboarding. */
+ redirectRouteForNewUsers?: string
}
export interface UserPageProps {
id?: string
isLoggedOut: boolean
+ /** User chose "continue as guest" (or is a bot) */
guestMode?: boolean
+ /** User is logged in but the account is not complete yet */
accountCompleted?: boolean
}
--
GitLab