Streamline adding params to app routes

src/modules/core/AppRoute.constants.ts

@@ -18,6 +18,16 @@ type AppRouteInfo = {
 
 type TAppRoutes = Record<string, AppRouteInfo & { childRoutes?: TAppRoutes }>;
 
+const createParam = (name: string, value: any): string => (value ? `${name}=${encodeURIComponent(value)}` : '');
+
+const createQueryParam = (query: string | null | undefined): string => createParam('query', query);
+
+const addParams = (path: string, ...params: string[]) => {
+    const joinedParams = params.filter(Boolean).join('&');
+
+    return `${path}${joinedParams ? `?${joinedParams}` : ''}`;
+};
+
 export const AppRoutes = {
     root: {
         match: '/',
@@ -94,11 +104,11 @@ export const AppRoutes = {
     sources: {
         match: 'sources',
         path: '/sources',
-
         childRoutes: {
             browse: {
                 match: ':sourceId',
-                path: (sourceId: SourceType['id']) => `/sources/${sourceId}`,
+                path: (sourceId: SourceType['id'], query?: string | null | undefined) =>
+                    addParams(`/sources/${sourceId}`, createQueryParam(query)),
             },
             configure: {
                 match: ':sourceId/configure',
@@ -106,11 +116,7 @@ export const AppRoutes = {
             },
             searchAll: {
                 match: 'all/search',
-                path: (query?: string | null | undefined) => {
+                path: (query?: string | null | undefined) => addParams('/sources/all/search', createQueryParam(query)),
-                    const queryParam = query ? `query=${encodeURIComponent(query)}` : '';
-
-                    return `/sources/all/search${queryParam ? `?${queryParam}` : ''}`;
-                },
             },
         },
     },
@@ -132,14 +138,8 @@ export const AppRoutes = {
     },
     library: {
         match: 'library',
-        path: (tab?: string, search?: string) => {
+        path: (tab?: string, search?: string) =>
-            const tabParam = tab ? `tab=${tab}` : '';
+            addParams('/library', createParam('tab', tab), createQueryParam(search)),
-            const searchParam = search ? `query=${encodeURIComponent(search)}` : '';
-
-            const params = [tabParam, searchParam].filter(Boolean).join('&');
-
-            return `/library${params ? `?${params}` : ''}`;
-        },
     },
     updates: {
         match: 'updates',
@@ -164,8 +164,8 @@ export const AppRoutes = {
         childRoutes: {
             search: {
                 match: 'manga/:mangaId/search',
-                path: (sourceId: SourceType['id'], mangaId: MangaIdInfo['id']) =>
+                path: (sourceId: SourceType['id'], mangaId: MangaIdInfo['id'], query?: string | null | undefined) =>
-                    `/migrate/source/${sourceId}/manga/${mangaId}/search`,
+                    addParams(`/migrate/source/${sourceId}/manga/${mangaId}/search`, createQueryParam(query)),
             },
         },
     },

src/modules/global-search/screens/SearchAll.tsx

@@ -165,7 +165,7 @@ const SourceSearchPreview = React.memo(
                 <Card sx={{ mb: 1 }}>
                     <CardActionArea
                         component={Link}
-                        to={`${AppRoutes.sources.childRoutes.browse.path(id)}?query=${searchString}`}
+                        to={AppRoutes.sources.childRoutes.browse.path(id, searchString)}
                         sx={{ p: 3 }}
                     >
                         <Typography variant="h5">{displayName}</Typography>

src/modules/manga/components/MangaActionMenuItems.tsx

@@ -157,7 +157,7 @@ export const MangaActionMenuItems = ({
             )}
             {isSingleMode && (
                 <Link
-                    to={`${AppRoutes.migrate.childRoutes.search.path(manga?.sourceId ?? -1, manga?.id ?? -1)}?query=${manga?.title}`}
+                    to={AppRoutes.migrate.childRoutes.search.path(manga?.sourceId ?? -1, manga?.id ?? -1, manga?.title)}
                     state={{ mangaTitle: manga?.title }}
                     style={{ textDecoration: 'none', color: 'inherit' }}
                 >

src/modules/manga/components/MangaToolbarMenu.tsx

@@ -66,7 +66,11 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                         <>
                             <CustomTooltip title={t('global.button.migrate')}>
                                 <Link
-                                    to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
+                                    to={AppRoutes.migrate.childRoutes.search.path(
+                                        manga.sourceId,
+                                        manga.id,
+                                        manga.title,
+                                    )}
                                     state={{ mangaTitle: manga.title }}
                                     style={{ textDecoration: 'none', color: 'inherit' }}
                                 >
@@ -126,7 +130,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                             <MenuItem
                                 key="migrate"
                                 component={Link}
-                                to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
+                                to={AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id, manga.title)}
                                 state={{ mangaTitle: manga.title }}
                                 style={{ textDecoration: 'none', color: 'inherit' }}
                             >

src/modules/manga/components/cards/MangaCard.tsx

@@ -34,7 +34,7 @@ const getMangaLinkTo = (
         case 'duplicate':
             return AppRoutes.manga.path(mangaId);
         case 'migrate.search':
-            return `${AppRoutes.migrate.childRoutes.search.path(sourceId ?? '-1', mangaId)}?query=${mangaTitle}`;
+            return AppRoutes.migrate.childRoutes.search.path(sourceId ?? '-1', mangaId, mangaTitle);
         case 'migrate.select':
             return '';
         default: