frontend/containers/Languages/index.tsx (view raw)
1import {useState, useEffect} from 'react';
2import MenuList from '@material-ui/core/MenuList';
3import MenuItem from '@material-ui/core/MenuItem';
4import {makeStyles} from '@material-ui/core/styles';
5import {useTranslation} from 'react-i18next';
6import useLangStore from '../../stores/useLangStore';
7import useProfile from '../../hooks/useProfile';
8import {
9 useUpdateMeMutation,
10 Enum_Userspermissionsuser_Lang,
11} from '../../generated/graphql';
12import moment from 'moment';
13
14const Languages = () => {
15 const {t, i18n} = useTranslation();
16 const [isSelecting, setSelecting] = useState(false);
17 const language = useLangStore(s => s.language);
18 const setLanguage = useLangStore(s => s.setLanguage);
19 const {profile, connected} = useProfile();
20 const [updateProfile] = useUpdateMeMutation();
21 const { languagesList } = useStyles({ isSelecting });
22
23 useEffect(() => {
24 if (navigator?.language === 'en')
25 setLanguage(Enum_Userspermissionsuser_Lang.En);
26 }, []);
27
28 useEffect(() => {
29 const momentLang = language === 'FR' ? 'fr-ch' : 'en';
30 moment.locale(momentLang);
31 i18n.changeLanguage(language?.toLowerCase());
32 }, [language]);
33
34 useEffect(() => {
35 if (profile?.lang) setLanguage(profile.lang);
36 }, [profile]);
37
38 const handleClick = event => {
39 setSelecting(!isSelecting);
40 };
41
42 const onConfirm = (lang: Enum_Userspermissionsuser_Lang) => {
43 setLanguage(lang);
44 setSelecting(false);
45
46 if (connected) {
47 updateProfile({
48 variables: {
49 userUpdate: {
50 lang,
51 },
52 },
53 });
54 }
55 };
56
57 return (
58 <>
59 <MenuItem onClick={handleClick} >
60 {t('menu.language')}
61 </MenuItem>
62 <MenuList className={languagesList} dense>
63 <MenuItem
64 disabled={language === Enum_Userspermissionsuser_Lang.Fr}
65 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
66 >{t`languages.fr`}</MenuItem>
67 <MenuItem
68 disabled={language === Enum_Userspermissionsuser_Lang.En}
69 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
70 >{t`languages.en`}</MenuItem>
71 </MenuList>
72 </>
73 );
74};
75
76
77const useStyles = makeStyles(theme => ({
78 languagesList: ({ isSelecting }: { isSelecting: boolean }) => ({
79 visibility: isSelecting ? 'visible' : 'hidden',
80 maxHeight: isSelecting ? 'none' : 0,
81 padding: isSelecting ? `0 ${theme.spacing(.5)}px` : 0,
82 overflow: 'hidden',
83 }),
84}));
85
86export default Languages;