fix(frontend): correctly propagage path params in <LanguageSwitcher> (

#281)

frontend/app/components/language-switcher.tsx

@@ -1,25 +1,30 @@
 import type { ComponentProps } from 'react';
 
-import { useLocation } from 'react-router';
+import { useLocation, useParams } from 'react-router';
 
 import { InlineLink } from '~/components/links';
 import { useLanguage } from '~/hooks/use-language';
 import { useRoute } from '~/hooks/use-route';
 import type { I18nRouteFile } from '~/i18n-routes';
 import { cn } from '~/utils/tailwind-utils';
 
-type LanguageSwitcherProps = Omit<ComponentProps<typeof InlineLink>, 'file' | 'lang' | 'reloadDocument' | 'to'>;
+type LanguageSwitcherProps = OmitStrict<
+  ComponentProps<typeof InlineLink>,
+  'file' | 'lang' | 'params' | 'reloadDocument' | 'search' | 'to'
+>;
 
 export function LanguageSwitcher({ className, children, ...props }: LanguageSwitcherProps) {
   const { altLanguage } = useLanguage();
   const { search } = useLocation();
   const { file } = useRoute();
+  const params = useParams();
 
   return (
     <InlineLink
       className={cn('text-white hover:text-blue-100 focus:text-blue-200 sm:text-lg', className)}
       file={file as I18nRouteFile}
       lang={altLanguage}
+      params={params}
       reloadDocument={true}
       search={search}
       {...props}

frontend/tests/components/__snapshots__/language-switcher.test.tsx.snap

@@ -5,10 +5,10 @@ exports[`LanguageSwitcher > should render a LanguageSwitcher with the correct pr
   <a
     class="underline text-white hover:text-blue-100 focus:text-blue-200 sm:text-lg"
     data-discover="true"
-    href="/en/public"
-    lang="en"
+    href="/fr/00000000-0000-0000-0000-000000000000?foo=bar"
+    lang="fr"
   >
-    English
+    Français
   </a>
 </div>
 `;

frontend/tests/components/language-switcher.test.tsx

@@ -1,20 +1,37 @@
 import { createRoutesStub } from 'react-router';
 
 import { render } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { LanguageSwitcher } from '~/components/language-switcher';
 
+vi.mock('~/i18n-routes', async (importActual) => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  const actual = await importActual<typeof import('~/i18n-routes')>();
+
+  return {
+    ...actual,
+
+    i18nRoutes: [
+      {
+        id: 'ROUTE-0001',
+        file: 'routes/index.tsx',
+        paths: { en: '/en/:id', fr: '/fr/:id' },
+      },
+    ],
+  };
+});
+
 describe('LanguageSwitcher', () => {
   it('should render a LanguageSwitcher with the correct props', () => {
     const RoutesStub = createRoutesStub([
       {
-        path: '/fr/public',
-        Component: () => <LanguageSwitcher>English</LanguageSwitcher>,
+        path: '/en/:id',
+        Component: () => <LanguageSwitcher>Français</LanguageSwitcher>,
       },
     ]);
 
-    const { container } = render(<RoutesStub initialEntries={['/fr/public']} />);
+    const { container } = render(<RoutesStub initialEntries={['/en/00000000-0000-0000-0000-000000000000?foo=bar']} />);
     expect(container).toMatchSnapshot('expected html');
   });
 });