Fix language menu (#1290)

components/guards/AuthGuard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import LoadingContainer from '@/components/common/LoadingContainer';
-import { redirect, usePathname } from '@/i18n/routing';
+import { redirect, usePathname, useRouter } from '@/i18n/routing';
 import { useTypedSelector } from '@/lib/hooks/store';
 import useLoadUser from '@/lib/hooks/useLoadUser';
 import { getIsMaintenanceMode } from '@/lib/utils/maintenanceMode';
@@ -18,7 +18,7 @@ const authenticatedPathHeads = ['admin', 'partner-admin', 'therapy', 'account'];
 export function AuthGuard({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const locale = useLocale();
-
+  const router = useRouter();
   const userId = useTypedSelector((state) => state.user.id);
   const userLoading = useTypedSelector((state) => state.user.loading);
   const userAuthLoading = useTypedSelector((state) => state.user.authStateLoading);
@@ -33,10 +33,7 @@ export function AuthGuard({ children }: { children: ReactNode }) {
   // If app is in maintenance mode, redirect all pages to /maintenance
   if (isMaintenanceMode && pathname !== '/maintenance') {
     if (typeof window !== 'undefined') {
-      redirect({
-        href: '/maintenance',
-        locale,
-      });
+      router.replace('/maintenance', { locale });
     }
     return <LoadingContainer />;
   }
@@ -59,12 +56,10 @@ export function AuthGuard({ children }: { children: ReactNode }) {
 
   // Page requires authenticated user
   if (unauthenticated && typeof window !== 'undefined') {
-    redirect({
-      href: '/auth/login',
-      // @ts-ignore
-      query: { return_url: encodeURIComponent(pathname) },
-      locale,
-    });
+    router.replace(
+      { pathname: '/auth/login', query: { return_url: encodeURIComponent(pathname) } },
+      { locale },
+    );
   }
 
   if (userId) {

components/layout/LanguageMenu.tsx

@@ -51,17 +51,17 @@ export default function LanguageMenu() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  function onChangeLanguage(locale: string) {
+  function onChangeLanguage(newLocale: string) {
+    console.log('newLocale', newLocale, newLocale === 'en');
     startTransition(() => {
-      logEvent(generateLanguageMenuEvent(locale));
+      logEvent(generateLanguageMenuEvent(newLocale));
       handleClose();
       router.replace(
-        {
-          pathname,
-          // @ts-ignore
-          params,
-        },
-        locale,
+        // @ts-expect-error -- TypeScript will validate that only known `params`
+        // are used in combination with a given `pathname`. Since the two will
+        // always match for the current route, we can skip runtime checks.
+        { pathname, params },
+        { locale: newLocale.toUpperCase() },
       );
     });
   }

cypress/integration/tests/user-course-session-behaviour.cy.tsx

@@ -32,9 +32,9 @@ describe.only('A course session user', () => {
 
     cy.contains('How was this session?').should('not.exist'); ///no feedback form shown before course has been started
 
-    cy.get('h3', { timeout: 10000 }).contains('Activity').click(); //open activities
+    // cy.get('h3', { timeout: 10000 }).contains('Activity').click(); //open activities
 
-    // cy.get('h3').contains('Bonus content').click(); //open bonus content
+    cy.get('h3').contains('Bonus content').click(); //open bonus content
 
     cy.get('button').contains('Session complete').click(); //mark course as complete
 
@@ -48,7 +48,7 @@ describe.only('A course session user', () => {
 
     cy.get('button').contains('Send').click(); //submit feedback
 
-    // cy.get('h3').contains('Thank you for submitting your feedback').should('exist'); //check user feedback
+    cy.get('h3').contains('Thank you for submitting your feedback').should('exist'); //check user feedback
   });
 
   after(() => {