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;