Rate my Routes

[Jared-Dahlke]

hey guys, so it is not perfect but I've made a ton of progress converting from RRv5 to React-Location.

This is my first time using React-Location. Note, there are a couple things I'm doing that I did not see in examples or docs.

Here is my LocationGenerics:

export type MyLocationGenerics = MakeGenerics<{
    Params: {
        scenarioId: string
        brandProfileId: string
    }
    Search: {
        accountId?: number
        viewOnly: boolean
        redirect?: string
        brandProfileId: number
        boardIds: number[]
        timeRange: number
        date: string
        hour: number

        searchTerm: string
        sortBy: string
        actions: string[]
    }
    LoaderData: {
        user: User
        accounts: Account[]
        currentAccount: Account
        perms: any
        userCan: (perm: string) => boolean
        trends: {
            trendsLatestBatch: TrendsLatestBatchType
        }
    }
    Error: {
        message: string
    }
}>

And here is my Routes array:

const rlRoutes: Route<MyLocationGenerics>[] = [
        {
            path: '/',
            element: <MyLogin />
        },
        {
            path: '/login',
            element: <MyLogin />
        },
        {
            path: '/resetPassword',
            element: <ResetPassword />
        },
        {
            path: routes.changePassword.path,
            element: <ChangePassword />
        },
        {
            path: '/admin',
            element: (
                <div>
                    <p>This route was moved to /app/admin</p>
                    <Link to={'/app/admin/roles'}>Click here to go there now</Link>
                </div>
            )
        },
        {
            path: 'app',
            element: <AuthRoute />,
            searchFilters: [
                search => ({
                    ...search,
                    accountId: search.accountId
                })
            ],
            pendingMs: 1,
            pendingMinMs: 1,
            //  pendingElement: async () => <LoadingPage message="Fetching user data..." />,
            errorElement: <h2>Error fetching this user, please contact your account admin</h2>,
            loader: async ({ search }, { dispatch }) => {
                const userId = localStorage.getItem('userId')
                if (!userId) {
                    throw new Error('User ID not found')
                }
                const data = await api.user.get(Number(userId))
                if (!data) {
                    throw new Error('Error fetching user')
                }
                let account: Account
                if (search.accountId) {
                    account = findAccountNodeByAccountId(search.accountId, data.accounts)
                    if (!account) {
                        account = data.accounts[0]
                    }
                } else {
                    account = data.accounts[0]
                }
                const userPermissions = data.permissions.map(p => p.permissionName)
                return {
                    user: data,
                    accounts: data.accounts,
                    currentAccount: account,
                    perms,
                    userCan: (perm: string) => userPermissions?.includes(perm) || false
                }
            },
            children: [
                {
                    path: 'admin',
                    children: [
                        {
                            path: 'scenarios',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.scenarios.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'labels',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.scenarios.labels.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'types',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.scenarios.types.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'create',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.scenarios.create.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'edit',
                                    children: [
                                        {
                                            path: ':scenarioId',
                                            element: (
                                                <ProtectedRoute
                                                    component={routes.admin.scenarios.edit.component}
                                                    permissionsNeeded={[perms.ADMIN_READ]}
                                                />
                                            )
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            path: 'opinions',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.opinions.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'types',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.opinions.types.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'create',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.opinions.create.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'edit',
                                    children: [
                                        {
                                            path: ':opinionId',
                                            element: (
                                                <ProtectedRoute
                                                    component={routes.admin.opinions.edit.component}
                                                    permissionsNeeded={[perms.ADMIN_READ]}
                                                />
                                            )
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            path: 'questions',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.questions.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                }
                            ]
                        },
                        {
                            path: 'permissions',
                            element: (
                                <ProtectedRoute
                                    component={routes.admin.permissions.component}
                                    permissionsNeeded={[perms.ADMIN_READ]}
                                />
                            )
                        },
                        {
                            path: 'roles',
                            element: (
                                <ProtectedRoute
                                    component={routes.admin.roles.component}
                                    permissionsNeeded={[perms.ADMIN_READ]}
                                />
                            )
                        },
                        {
                            path: 'iabCategories',
                            element: (
                                <ProtectedRoute
                                    component={routes.admin.iabCategories.component}
                                    permissionsNeeded={[perms.ADMIN_READ]}
                                />
                            )
                        },
                        {
                            path: 'evergreenChannels',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.evergreenChannels.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'create',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.admin.evergreenChannels.create.component}
                                            permissionsNeeded={[perms.ADMIN_READ]}
                                        />
                                    )
                                }
                            ]
                        }
                    ]
                },
                {
                    path: 'discover',
                    children: [
                        {
                            path: 'moments',
                            searchFilters: [
                                search => ({
                                    ...search,
                                    accountId: search.accountId,
                                    brandProfileId: search.brandProfileId,
                                    date: search.date,
                                    hour: search.hour
                                })
                            ],
                            element: (
                                <ProtectedRoute
                                    component={routes.app.discover.trends.component}
                                    permissionsNeeded={[perms.TRENDS_READ]}
                                />
                            ),
                            pendingMs: 1,
                            pendingMinMs: 200,
                            // errorElement: <div>error</div>,
                            pendingElement: <LoadingPage message="Loading..." />,
                            loader: async () => {
                                const trendsLatestBatch = await api.trends.getLatestBatch()

                                return {
                                    trends: {
                                        trendsLatestBatch
                                    }
                                }
                            }
                        },
                        {
                            path: 'boards',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={Dashboard}
                                            permissionsNeeded={[perms.AYLIEN_TRENDS_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'dashboard',
                                    element: (
                                        <ProtectedRoute
                                            component={Dashboard}
                                            permissionsNeeded={[perms.AYLIEN_TRENDS_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'welcome',
                                    element: (
                                        <ProtectedRoute
                                            component={Welcome}
                                            permissionsNeeded={[perms.AYLIEN_TRENDS_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'board',
                                    searchFilters: [
                                        search => ({
                                            ...search,
                                            accountId: search.accountId,
                                            brandProfileId: search.brandProfileId,
                                            timeRange: search.timeRange || 1,
                                            searchTerm: search.searchTerm || '',
                                            boardIds: search.boardIds,
                                            actions: search.actions || ['Target', 'Monitor', 'Block'],
                                            sortBy: search.sortBy || 'keywords'
                                        })
                                    ],
                                    element: (
                                        <ProtectedRoute
                                            component={AylienBoard}
                                            permissionsNeeded={[perms.AYLIEN_TRENDS_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'create',
                                    children: [
                                        {
                                            path: 'custom',
                                            element: (
                                                <ProtectedRoute
                                                    component={Custom}
                                                    permissionsNeeded={[perms.AYLIEN_TRENDS_READ]}
                                                />
                                            )
                                        },
                                        {
                                            path: 'general',
                                            element: (
                                                <ProtectedRoute
                                                    component={General}
                                                    permissionsNeeded={[perms.AYLIEN_TRENDS_READ]}
                                                />
                                            )
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            path: 'measure',
                            element: (
                                <ProtectedRoute
                                    component={routes.app.discover.measure.component}
                                    permissionsNeeded={[perms.MEASURE_READ]}
                                />
                            )
                        },
                        {
                            path: 'reporting',
                            element: (
                                <ProtectedRoute
                                    component={routes.app.discover.reporting.component}
                                    permissionsNeeded={[perms.REPORTING_READ]}
                                />
                            )
                        },
                        {
                            path: 'momentIntelligence',
                            element: (
                                <ProtectedRoute
                                    component={routes.app.discover.momentsIntelligence.component}
                                    permissionsNeeded={[perms.MOMENTS_INTELLIGENCE_READ]}
                                />
                            )
                        }
                    ]
                },
                {
                    path: 'settings',
                    children: [
                        {
                            path: 'users',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.app.settings.users.component}
                                            permissionsNeeded={[perms.USER_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'create',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.app.settings.users.create.component}
                                            permissionsNeeded={[perms.USER_CREATE]}
                                        />
                                    )
                                },
                                {
                                    path: 'edit',
                                    children: [
                                        {
                                            path: ':userId',
                                            element: (
                                                <ProtectedRoute
                                                    component={routes.app.settings.users.edit.component}
                                                    permissionsNeeded={[perms.USER_READ]}
                                                />
                                            )
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            path: 'profile',
                            element: (
                                <ProtectedRoute
                                    component={routes.app.settings.profile.component}
                                    permissionsNeeded={[]}
                                />
                            )
                        },
                        {
                            path: 'notificationPreferences',
                            element: (
                                <ProtectedRoute
                                    component={routes.app.settings.notificationPreferences.component}
                                    permissionsNeeded={[perms.NOTIFICATIONS_READ]}
                                />
                            )
                        },
                        {
                            path: 'account',
                            element: (
                                <ProtectedRoute
                                    component={routes.app.settings.account.component}
                                    permissionsNeeded={[perms.ACCOUNT_READ]}
                                />
                            )
                        },
                        {
                            path: 'brandProfiles',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.app.settings.brandProfiles.component}
                                            permissionsNeeded={[perms.BRAND_PROFILES_PAGE_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'brandProfile',
                                    children: [
                                        {
                                            path: ':brandProfileId',
                                            element: (
                                                <ProtectedRoute
                                                    component={routes.app.settings.brandProfiles.brandProfile.component}
                                                    permissionsNeeded={[perms.BRAND_PROFILE_READ]}
                                                />
                                            ),
                                            children: [
                                                {
                                                    path: 'brandInformation',
                                                    element: (
                                                        <>
                                                            <BasicInfo />
                                                            <Questions />
                                                        </>
                                                    )
                                                },
                                                {
                                                    path: 'outcomes',
                                                    element: <Outcomes />
                                                },
                                                {
                                                    path: 'brands',
                                                    element: (
                                                        <QueryTypeOneSection
                                                            key="1"
                                                            queryType={typeOneSections.competitors}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'influencers',
                                                    element: (
                                                        <QueryTypeOneSection
                                                            key="2"
                                                            queryType={typeOneSections.influencers}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'events',
                                                    element: <EventSection />
                                                },
                                                {
                                                    path: 'philanthropic',
                                                    element: (
                                                        <QueryTypeOneSection
                                                            key="4"
                                                            queryType={typeOneSections.philanthropic}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'social',
                                                    element: <SocialSection />
                                                },
                                                {
                                                    path: 'questions',
                                                    element: <QuestionsSection />
                                                },
                                                {
                                                    path: 'opinions',
                                                    element: <Opinions />
                                                },
                                                {
                                                    path: 'scenarios',
                                                    element: <Scenarios />
                                                },
                                                {
                                                    path: 'mediaResponsibility',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={MediaResponsibility}
                                                            permissionsNeeded={[
                                                                perms.BRAND_PROFILE_AD_FONTES_MEDIA_RESPONSIBILITY
                                                            ]}
                                                        />
                                                    )
                                                },

                                                {
                                                    path: 'iabCategories',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={IabCategories}
                                                            permissionsNeeded={[perms.BRAND_PROFILE_CATEGORIES_READ]}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'topics',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={Topics}
                                                            permissionsNeeded={[perms.BRAND_PROFILE_TOPICS_READ]}
                                                        />
                                                    )
                                                },

                                                {
                                                    path: 'news',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={AylienNews}
                                                            permissionsNeeded={[perms.BRAND_PROFILE_AYLIEN_NEWS_READ]}
                                                        />
                                                    )
                                                },

                                                {
                                                    path: 'industries',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={AylienIndustries}
                                                            permissionsNeeded={[
                                                                perms.BRAND_PROFILE_AYLIEN_INDUSTRY_READ
                                                            ]}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'keywords',
                                                    element: <Keywords />
                                                },
                                                {
                                                    path: 'targetview',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={Targetview}
                                                            permissionsNeeded={[perms.BRAND_PROFILE_IOS_READ]}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'submit',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={Review}
                                                            permissionsNeeded={[perms.BRAND_PROFILE_UPDATE]}
                                                        />
                                                    )
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    path: 'engage',
                    children: [
                        {
                            path: 'lists',
                            children: [
                                {
                                    path: '/',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.app.engage.lists.lists.component}
                                            permissionsNeeded={[perms.ENGAGE_READ]}
                                        />
                                    )
                                },
                                {
                                    path: 'createList',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.app.engage.lists.createList.component}
                                            permissionsNeeded={[perms.ENGAGE_READ, perms.SMARTLIST_CREATE]}
                                        />
                                    )
                                },
                                {
                                    path: 'uploadList',
                                    element: (
                                        <ProtectedRoute
                                            component={routes.app.engage.lists.uploadList.component}
                                            permissionsNeeded={[perms.ENGAGE_READ, perms.SMARTLIST_CREATE_UPLOAD]}
                                        />
                                    )
                                },
                                {
                                    path: 'channelListBuilder',
                                    children: [
                                        {
                                            path: ':versionId',
                                            children: [
                                                {
                                                    path: 'view',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={
                                                                routes.app.engage.lists.channelListBuilder.component
                                                            }
                                                            permissionsNeeded={[perms.SMARTLIST_READ]}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'edit',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={
                                                                routes.app.engage.lists.channelListBuilder.component
                                                            }
                                                            permissionsNeeded={[perms.SMARTLIST_EDIT]}
                                                        />
                                                    )
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    path: 'videoListBuilder',
                                    children: [
                                        {
                                            path: ':versionId',
                                            children: [
                                                {
                                                    path: 'view',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={
                                                                routes.app.engage.lists.videoListBuilder.component
                                                            }
                                                            permissionsNeeded={[perms.SMARTLIST_READ]}
                                                        />
                                                    )
                                                },
                                                {
                                                    path: 'edit',
                                                    element: (
                                                        <ProtectedRoute
                                                            component={
                                                                routes.app.engage.lists.videoListBuilder.component
                                                            }
                                                            permissionsNeeded={[perms.SMARTLIST_EDIT]}
                                                        />
                                                    )
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]