fix(dashboard): persist language choice

.changeset/seven-badgers-rush.md

@@ -0,0 +1,5 @@
+---
+'@lagon/dashboard': patch
+---
+
+Persist language choice

packages/dashboard/locales/index.ts

@@ -1,6 +1,32 @@
 import { createI18n } from 'next-international';
+import { useEffect } from 'react';
 
-export const { I18nProvider, useScopedI18n, defineLocale, useChangeLocale, getLocaleProps } = createI18n({
+export const {
+  I18nProvider,
+  useScopedI18n,
+  defineLocale,
+  useChangeLocale: _useChangeLocale,
+  getLocaleProps,
+} = createI18n({
   en: () => import('./en'),
   fr: () => import('./fr'),
 });
+
+export const useChangeLocale = () => {
+  const changeLocale = _useChangeLocale();
+  return (newLocale: Parameters<typeof changeLocale>[0]) => {
+    changeLocale(newLocale);
+    localStorage.setItem('locale', newLocale);
+  };
+};
+
+export const usePersistLocale = () => {
+  const changeLocale = useChangeLocale();
+
+  useEffect(() => {
+    const locale = localStorage.getItem('locale') as Parameters<typeof changeLocale>[0] | null;
+    if (locale) {
+      changeLocale(locale);
+    }
+  }, []);
+};

packages/dashboard/pages/_app.tsx

@@ -4,7 +4,7 @@ import AuthGuard from 'lib/components/AuthGuard';
 import '@lagon/ui/src/styles/globals.css';
 import { Toaster } from 'react-hot-toast';
 import Layout from 'lib/Layout';
-import { I18nProvider } from 'locales';
+import { I18nProvider, usePersistLocale } from 'locales';
 import en from 'locales/en';
 import { trpc } from 'lib/trpc';
 import { useMemo } from 'react';
@@ -17,6 +17,8 @@ type LayoutAppProps = AppProps & {
 };
 
 const App = ({ Component, pageProps: { session, ...pageProps } }: LayoutAppProps) => {
+  usePersistLocale();
+
   const MaybeAuthGuard = useMemo(
     () => (Component.anonymous ? ({ children }: { children: React.ReactNode }) => <>{children}</> : AuthGuard),
     [Component.anonymous],