feat: Language selection

Author: Zenoo

client/public/static/i18n/en/common.json

@@ -2,7 +2,7 @@
   "home": "Home",
   "account": "Account",
   "userList": "User list",
-  "Examples": "Examples",
+  "examples": "Examples",
   "giveAdminRights": "Give admin rights",
   "cancel": "Cancel",
   "save": "Save",

client/public/static/i18n/en/home.json

@@ -0,0 +1,5 @@
+{
+  "users": "Users",
+  "stat2": "Stat 2",
+  "stat3": "Stat 3"
+}

client/public/static/i18n/en/user.json

@@ -11,5 +11,8 @@
   "password": "Password",
   "passwordConfirm": "Confirm Password",
   "giveAdminRights": "Give admin rights",
-  "newUserAdded": "New user added"
+  "newUserAdded": "New user added",
+  "lang": "Language",
+  "fr": "French",
+  "en": "English"
 }

client/public/static/i18n/fr/common.json

@@ -2,7 +2,7 @@
   "home": "Accueil",
   "account": "Compte",
   "userList": "Utilisateurs",
-  "Examples": "Exemples",
+  "examples": "Exemples",
   "giveAdminRights": "Donner les droits admin",
   "cancel": "Annuler",
   "save": "Sauvegarder",

client/public/static/i18n/fr/home.json

@@ -0,0 +1,5 @@
+{
+  "users": "Utilisateurs",
+  "stat2": "Stat 2",
+  "stat3": "Stat 3"
+}

client/public/static/i18n/fr/user.json

@@ -8,7 +8,10 @@
   "email": "Email",
   "phone": "Téléphone",
   "password": "Mot de passe",
-"passwordConfirm": "Confirmer le mot de passe",
+  "passwordConfirm": "Confirmer le mot de passe",
   "giveAdminRights": "Donner les droits d'administrateur",
-  "newUserAdded": "Nouvel utilisateur ajouté"
-}
+  "newUserAdded": "Nouvel utilisateur ajouté",
+  "lang": "Langue",
+  "fr": "Français",
+  "en": "Anglais"
+}

client/src/api/HomeRoutes.ts

@@ -0,0 +1,7 @@
+import Fetch from '../utils/fetcher';
+
+const HomeRoutes = {
+  stats: () => Fetch<{ users: number, stat2: number, stat3: number }>('/api/home/stats'),
+};
+
+export default HomeRoutes;

client/src/components/forms/UserForm.tsx

@@ -1,18 +1,21 @@
-import { Prisma } from '@fullstack-typescript-monorepo/prisma';
+import { DEFAULT_LANGUAGE, Language } from '@fullstack-typescript-monorepo/core';
+import { Lang } from '@fullstack-typescript-monorepo/prisma';
 import { LoadingButton } from '@mui/lab';
-import { Box, Checkbox, Divider, FormControlLabel, Grid, TextField } from '@mui/material';
+import { Box, Checkbox, Divider, FormControl, FormControlLabel, Grid, InputLabel, MenuItem, Select, TextField } from '@mui/material';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import UserRoutes from '../../api/UserRoutes';
 import { useAlert } from '../../hooks/useAlert';
+import { useAuth } from '../../hooks/useAuth';
 import useForm from '../../hooks/useForm';
 import { useLoader } from '../../hooks/useLoader';
 import catchError from '../../utils/catchError';
 
 interface Data {
   id?: number;
   admin: boolean;
+  lang: Language;
   login: string;
   password: string;
   idperson?: number;
@@ -32,15 +35,17 @@ const UserForm = ({ data }: Props) => {
   const Loader = useLoader();
   const { t } = useTranslation('user');
   const navigate = useNavigate();
+  const { user, updateData } = useAuth();
 
   const { register, handleSubmit, formState: { isSubmitting }, reset } = useForm<Data>('user', {
     defaultValues: data,
   });
 
   // Submit user data
   const onSubmit = async (formData: Data) => {
-    const processedData: Prisma.UserUpdateInput = {
+    const processedData = {
       admin: formData.admin,
+      lang: formData.lang,
       login: formData.login,
       active: true,
     };
@@ -64,13 +69,25 @@ const UserForm = ({ data }: Props) => {
           update: personData,
         },
       }).then(() => {
+        // Update user data if it's the current user
+        if (user.id === formData.id) {
+          updateData((prev) => ({
+            ...prev,
+            ...processedData,
+            person: {
+              ...prev.person,
+              ...personData,
+            },
+          }));
+        }
+
         Alert.open('success', t('common:saved'));
       }).catch(catchError(Alert));
       Loader.close();
     } else { // Addition
-      processedData.password = formData.password;
       await UserRoutes.insert({
         ...processedData,
+        password: formData.password,
         connexionToken: '',
         person: {
           create: personData,
@@ -87,12 +104,22 @@ const UserForm = ({ data }: Props) => {
   return (
     <form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={3} sx={{ pb: 2 }}>
-        <Grid item xs={12}>
+        <Grid item xs={12} sm={6}>
           <FormControlLabel
             control={<Checkbox {...register('admin', 'checkbox')} defaultChecked={data.admin} />}
             label={t('giveAdminRights')}
           />
         </Grid>
+        <Grid item xs={12} sm={6}>
+          <FormControl fullWidth>
+            <InputLabel>{t('lang')}</InputLabel>
+            <Select {...register('lang', 'select', { required: true })} defaultValue={data.lang || DEFAULT_LANGUAGE}>
+              {Object.keys(Lang).map((lang) => (
+                <MenuItem key={lang} value={lang}>{t(lang)}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Grid>
         <Grid item md={6} xs={12}>
           <TextField {...register('login', 'text', { required: true })} fullWidth />
         </Grid>

client/src/hooks/useAuth.tsx

@@ -1,13 +1,14 @@
 import { DEFAULT_LANGUAGE } from '@fullstack-typescript-monorepo/core';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import UserRoutes, { UserWithPerson } from '../api/UserRoutes';
+import { useLanguage } from './useLanguage';
 
 interface AuthContextInterface {
   user: UserWithPerson,
   authed: boolean,
   signin: (login: string, password: string) => Promise<UserWithPerson | null>,
   signout: () => void,
-  updateData: (data: UserWithPerson) => void,
+  updateData: (data: React.SetStateAction<UserWithPerson>) => void,
 }
 
 export const emptyUser: UserWithPerson = {
@@ -51,15 +52,22 @@ interface AuthProviderProps {
 }
 
 export const AuthProvider = ({ children }: AuthProviderProps) => {
+  const { setLanguage } = useLanguage();
   const [user, setUser] = useState<UserWithPerson>(emptyUser);
   const [authed, setAuthed] = useState(false);
 
+  // Update language when necessary
+  useEffect(() => {
+    setLanguage(user.lang);
+  }, [user.lang, setLanguage]);
+
   const signin = useCallback((
     login: string,
     password: string,
   ) => UserRoutes.authenticate(login, password).then((response) => {
     localStorage.setItem('user', response.login);
     localStorage.setItem('token', response.connexionToken);
+
     setUser(response);
     if (response) setAuthed(true);
     return response;
@@ -72,7 +80,7 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     setUser(emptyUser);
   }, []);
 
-  const updateData = useCallback((data: UserWithPerson) => {
+  const updateData = useCallback((data: React.SetStateAction<UserWithPerson>) => {
     setUser(data);
   }, []);
 

client/src/layouts/DashboardLayout/NavBar/NavBar.tsx

@@ -51,22 +51,22 @@ const NavBar = ({ onMobileClose, openMobile }: Props) => {
         {
           href: '/app/todo',
           icon: Quiz,
-          title: t('TODO'),
+          title: t('TODO 1'),
         },
         {
           href: '/app/todo',
           icon: Quiz,
-          title: t('TODO'),
+          title: t('TODO 2'),
         },
         {
           href: '/app/todo',
           icon: Quiz,
-          title: t('TODO'),
+          title: t('TODO 3'),
         },
         {
           href: '/app/todo',
           icon: Quiz,
-          title: t('TODO'),
+          title: t('TODO 4'),
         },
       ],
     },