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;