frontend/containers/Languages/index.tsx (view raw)
1import {useState, useEffect} from 'react';
2import Box from '@material-ui/core/Box';
3import IconButton from '@material-ui/core/IconButton';
4import Icon from '@material-ui/core/Icon';
5import Menu from '@material-ui/core/Menu';
6import MenuItem from '@material-ui/core/MenuItem';
7import {useTranslation} from 'react-i18next';
8import useLangStore from '../../stores/useLangStore';
9import useProfile from '../../hooks/useProfile';
10import {
11 useUpdateMeMutation,
12 Enum_Userspermissionsuser_Lang,
13} from '../../generated/graphql';
14import moment from 'moment';
15
16const Languages = () => {
17 const {t, i18n} = useTranslation();
18 const [anchorEl, setAnchorEl] = useState(null);
19 const language = useLangStore(s => s.language);
20 const setLanguage = useLangStore(s => s.setLanguage);
21 const {profile, connected} = useProfile();
22 const [updateProfile] = useUpdateMeMutation();
23
24 useEffect(() => {
25 if (navigator?.language === 'en')
26 setLanguage(Enum_Userspermissionsuser_Lang.En);
27 }, []);
28
29 useEffect(() => {
30 const momentLang = language === 'FR' ? 'fr-ch' : 'en';
31 moment.locale(momentLang);
32 i18n.changeLanguage(language?.toLowerCase());
33 }, [language]);
34
35 useEffect(() => {
36 if (profile?.lang) setLanguage(profile.lang);
37 }, [profile]);
38
39 const handleClick = event => {
40 setAnchorEl(event.currentTarget);
41 };
42
43 const onConfirm = (lang: Enum_Userspermissionsuser_Lang) => {
44 setLanguage(lang);
45 setAnchorEl(null);
46
47 if (connected) {
48 updateProfile({
49 variables: {
50 userUpdate: {
51 lang,
52 },
53 },
54 });
55 }
56 };
57
58 return (
59 <>
60 <Box position="fixed" bottom={0} left={0} zIndex={1050} p={1}>
61 <IconButton
62 color="primary"
63 aria-label="Languages"
64 onClick={handleClick}
65 >
66 <Icon>language</Icon>
67 </IconButton>
68 </Box>
69 <Menu
70 id="LanguagesMenu"
71 anchorEl={anchorEl}
72 keepMounted
73 open={Boolean(anchorEl)}
74 onClose={() => setAnchorEl(null)}
75 >
76 <MenuItem
77 disabled={language === Enum_Userspermissionsuser_Lang.Fr}
78 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
79 >{t`languages.fr`}</MenuItem>
80 <MenuItem
81 disabled={language === Enum_Userspermissionsuser_Lang.En}
82 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
83 >{t`languages.en`}</MenuItem>
84 </Menu>
85 </>
86 );
87};
88
89export default Languages;