intlContext intlContext.tsx

0% Statements 0/19

0% Branches 0/2

0% Functions 0/7

0% Lines 0/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useState, useContext, createContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
 
type LanguageType = 'de' | 'nl';
 
type IntlContext = {
  language: LanguageType;
  changeLanguage: (language: LanguageType) => void;
};
 
export const IntlContext = createContext<IntlContext>({
  language: 'de',
  changeLanguage: (language: LanguageType) => { }
});
 
const { Provider } = IntlContext;
 
const IntlProvider: React.FC<{ children: React.ReactNode }> = ({
  children
}) => {
  const state: IntlContext = useProvideIntl();
  return <Provider value={state}>{children}</Provider>;
};
 
export const useIntl = () => {
  return useContext(IntlContext);
};
 
const getCurrentLocale = () => {
  const locale = localStorage.getItem('i18nextLng');
  return locale ? (locale as LanguageType) : 'de';
};
 
function useProvideIntl() {
  const [language, setLanguage] = useState(getCurrentLocale());
  const { i18n } = useTranslation();
 
  useEffect(() => {
    i18n.changeLanguage(language);
    document.documentElement.setAttribute('lang', language);
  }, [language, i18n]);
 
  const changeLanguage = (selectedValue: LanguageType) => {
    setLanguage(selectedValue);
    localStorage.setItem('i18nextLng', selectedValue);
  };
 
  return {
    language,
    changeLanguage
  };
}
 
export default IntlProvider;