M frontend/containers/Languages/withLanguagesSelection.tsx → frontend/containers/Languages/withLanguagesSelection.tsx

@@ -5,8 +5,6 @@ import {
   useUpdateMeMutation,
   Enum_Userspermissionsuser_Lang,
 } from '../../generated/graphql';
-import moment from 'moment';
-import {useTranslation} from 'react-i18next';
 
 type LangFunction = (lang: Enum_Userspermissionsuser_Lang) => void;
 
@@ -23,22 +21,10 @@ args: LanguageSelectionComponentProps
     ) => JSX.Element
   ) =>
   () => {
-    const {i18n} = useTranslation();
     const language = useLangStore(s => s.language);
     const setLanguage = useLangStore(s => s.setLanguage);
     const {profile, connected} = useProfile();
     const [updateProfile] = useUpdateMeMutation();
-
-    useEffect(() => {
-      if (i18n.language === 'en')
-        setLanguage(Enum_Userspermissionsuser_Lang.En);
-    }, []);
-
-    useEffect(() => {
-      const momentLang = language === 'FR' ? 'fr-ch' : 'en';
-      moment.locale(momentLang);
-      i18n.changeLanguage(language?.toLowerCase());
-    }, [language]);
 
     useEffect(() => {
       if (profile?.lang) setLanguage(profile.lang);

M frontend/containers/Travel/useActions.ts → frontend/containers/Travel/useActions.ts

@@ -108,17 +108,17 @@ try {
       // Put passengers in event waiting list (if any)
       // TODO Move these logics to backend and delete vehicle if no user linked
       if (Array.isArray(travel?.passengers) && travel.passengers.length > 0)
-        await updateEventMutation({
-          variables: {
-            uuid: event.uuid,
-            eventUpdate: {
-              waitingList: formatPassengers([
-                ...(event.waitingList || []),
-                ...travel.passengers.map(({name}) => ({name})),
-              ]),
-            },
+      await updateEventMutation({
+        variables: {
+          uuid: event.uuid,
+          eventUpdate: {
+            waitingList: formatPassengers([
+              ...(event.waitingList || []),
+              ...travel.passengers.map(({user, name}) => ({name, user})),
+            ]),
           },
-        });
+        },
+      });
       await deleteTravelMutation({
         variables: {
           id: travel.id,
@@ -141,7 +141,10 @@ const formatPassengers = (passengers = [], seats: number = 1000) => {
   if (!passengers) return [];
   return passengers
     .slice(0, seats)
-    .map(({__typename, ...passenger}) => passenger);
+    .map(({__typename, user, ...passenger}) => ({
+      ...passenger,
+      user: user?.id,
+    }));
 };
 
 export default useActions;

M frontend/pages/_app.tsx → frontend/pages/_app.tsx

@@ -14,13 +14,36 @@ import Toasts from '../components/Toasts';
 import theme from '../theme';
 import 'moment/locale/fr-ch';
 import '../i18n';
+import {useTranslation} from 'react-i18next';
+import useAuthStore from '../stores/useAuthStore';
 
 moment.locale('fr-ch');
 
 const App = function (props: AppProps) {
   const {Component, pageProps} = props;
   const apolloClient = useApollo(pageProps);
+  const user = useAuthStore();
+  const {i18n} = useTranslation();
   const language = useLangStore(s => s.language);
+  const setLanguage = useLangStore(s => s.setLanguage);
+
+  const i18nLang = i18n.language.split('-')[1] ?? i18n.language;
+
+  useEffect(() => {
+    if (i18nLang === 'FR') {
+      setLanguage(Enum_Userspermissionsuser_Lang.Fr);
+    } else {
+      // Fallback language
+      setLanguage(Enum_Userspermissionsuser_Lang.En);
+    }
+  }, []);
+
+  useEffect(() => {
+    const languageProfile = user?.lang ?? language;
+    const momentLang = languageProfile === 'FR' ? 'fr-ch' : 'en';
+    moment.locale(momentLang);
+    i18n.changeLanguage(languageProfile?.toLowerCase());
+  }, [language, user?.lang]);
 
   useEffect(() => {
     // Remove the server-side injected CSS.

M frontend/pages/index.tsx → frontend/pages/index.tsx

@@ -3,6 +3,7 @@ import {useTranslation} from 'react-i18next';
 import useProfile from '../hooks/useProfile';
 import Layout from '../layouts/Centered';
 import CreateEvent from '../containers/CreateEvent';
+import LanguagesIcon from '../containers/Languages/Icon';
 import Paper from '../components/Paper';
 import Logo from '../components/Logo';
 
@@ -51,6 +52,7 @@ <Paper className={null}>
         <Logo />
         <CreateEvent />
       </Paper>
+      <LanguagesIcon/>
     </Layout>
   );
 };