feat: Add language selector

Closes #212

client/src/i18n.js

@@ -1,11 +1,11 @@
 import i18n from 'i18next';
-import languageDetector from 'i18next-browser-languagedetector';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import formatDate from 'date-fns/format';
 import parseDate from 'date-fns/parse';
 import { registerLocale, setDefaultLocale } from 'react-datepicker';
 
-import { embedLocales, languages } from './locales';
+import { embeddedLocales, languages } from './locales';
 
 i18n.dateFns = {
   locales: {},
@@ -52,12 +52,12 @@ const parseDatePostProcessor = {
 };
 
 i18n
-  .use(languageDetector)
+  .use(LanguageDetector)
   .use(formatDatePostProcessor)
   .use(parseDatePostProcessor)
   .use(initReactI18next)
   .init({
-    resources: embedLocales,
+    resources: embeddedLocales,
     fallbackLng: 'en',
     supportedLngs: languages,
     load: 'languageOnly',
@@ -74,7 +74,7 @@ i18n
       },
     },
     react: {
-      useSuspense: false,
+      useSuspense: true,
     },
     debug: process.env.NODE_ENV !== 'production',
   });
@@ -95,4 +95,20 @@ i18n.loadCoreLocale = async (language = i18n.resolvedLanguage) => {
   });
 };
 
+i18n.detectLanguage = () => {
+  const {
+    services: { languageDetector, languageUtils },
+  } = i18n;
+
+  localStorage.removeItem(languageDetector.options.lookupLocalStorage);
+
+  const detectedLanguages = languageDetector.detect();
+
+  i18n.language = languageUtils.getBestMatchFromCodes(detectedLanguages);
+  i18n.languages = languageUtils.toResolveHierarchy(i18n.language);
+
+  i18n.resolvedLanguage = undefined;
+  i18n.setResolvedLanguage(i18n.language);
+};
+
 export default i18n;