From 94a9b026090674ac781295a79849b7274624a7d8 Mon Sep 17 00:00:00 2001
From: Greg Baker <48123208+gregory-j-baker@users.noreply.github.com>
Date: Wed, 26 Feb 2025 18:14:45 -0330
Subject: [PATCH] fix(frontend): correctly propagage path params in
 `<LanguageSwitcher>` (#281)

---
 frontend/app/components/language-switcher.tsx |  9 +++++--
 .../language-switcher.test.tsx.snap           |  6 ++---
 .../components/language-switcher.test.tsx     | 25 ++++++++++++++++---
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/language-switcher.tsx b/frontend/app/components/language-switcher.tsx
index 231670b3..a1d245e6 100644
--- a/frontend/app/components/language-switcher.tsx
+++ b/frontend/app/components/language-switcher.tsx
@@ -1,6 +1,6 @@
 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';
@@ -8,18 +8,23 @@ 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}
diff --git a/frontend/tests/components/__snapshots__/language-switcher.test.tsx.snap b/frontend/tests/components/__snapshots__/language-switcher.test.tsx.snap
index 644cf21f..933c4519 100644
--- a/frontend/tests/components/__snapshots__/language-switcher.test.tsx.snap
+++ b/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>
 `;
diff --git a/frontend/tests/components/language-switcher.test.tsx b/frontend/tests/components/language-switcher.test.tsx
index 293762ee..ba5e0aa3 100644
--- a/frontend/tests/components/language-switcher.test.tsx
+++ b/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');
   });
 });