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 const momentLang = language === 'FR' ? 'fr-ch' : 'en';
26 moment.locale(momentLang);
27 i18n.changeLanguage(language?.toLowerCase());
28 }, [language]);
29
30 useEffect(() => {
31 if (profile) setLanguage(profile.lang);
32 }, [profile]);
33
34 const handleClick = event => {
35 setAnchorEl(event.currentTarget);
36 };
37
38 const onConfirm = (lang: Enum_Userspermissionsuser_Lang) => {
39 setLanguage(lang);
40 setAnchorEl(null);
41
42 if (connected) {
43 updateProfile({
44 variables: {
45 userUpdate: {
46 lang,
47 },
48 },
49 });
50 }
51 };
52
53 return (
54 <>
55 <Box p={1} position="fixed" bottom={0} left={0} zIndex={1050}>
56 <IconButton
57 color="primary"
58 aria-label="Languages"
59 onClick={handleClick}
60 >
61 <Icon>language</Icon>
62 </IconButton>
63 </Box>
64 <Menu
65 id="LanguagesMenu"
66 anchorEl={anchorEl}
67 keepMounted
68 open={Boolean(anchorEl)}
69 onClose={() => setAnchorEl(null)}
70 >
71 <MenuItem
72 disabled={language === Enum_Userspermissionsuser_Lang.Fr}
73 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
74 >{t`languages.fr`}</MenuItem>
75 <MenuItem
76 disabled={language === Enum_Userspermissionsuser_Lang.En}
77 onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
78 >{t`languages.en`}</MenuItem>
79 </Menu>
80 </>
81 );
82};
83
84export default Languages;