refactor: Simplified i18n context and provider

Author: arek-bitnoise

src/context/LocaleProvider/LocaleProvider.tsx

@@ -1,55 +1,39 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import dayjs from "dayjs";
 import { localeContext } from "./localeContext";
 import { locales } from "./locales";
-import { LocaleProviderProps, LocaleType } from "./types";
+import { LocaleProviderProps } from "./types";
 
 const LocaleProvider = ({ children, lang, translations }: LocaleProviderProps) => {
-  const [localLang, setLocalLang] = useState<string>("en");
-  const localesData = locales.getLocales();
-
-  const findLocale = useCallback(() => {
-    const locale = localesData.find((l) => {
-      return l.id === localLang;
-    });
-
-    if (typeof locale?.dayjsTranslations === "object") {
-      dayjs.locale(locale.dayjsTranslations);
-    }
-
-    return locale || localesData[0];
-  }, [localLang]);
-
-  const [currentLocale, setCurrentLocale] = useState<LocaleType>(findLocale());
-
-  const saveCurrentLocale = (locale: LocaleType) => {
-    localStorage.setItem("locale", locale.translateCode);
-    setCurrentLocale(locale);
-  };
+  const [currentLocale, setCurrentLocale] = useState(
+    locales.getLocales().filter((locale) => locale.id === "en")[0]
+  );
 
   useEffect(() => {
-    translations?.forEach((translation) => {
-      const localeData = localesData.find((el) => el.id === translation.id);
-      if (!localeData) {
-        locales.addLocales(translation);
-      }
+    const overwrittenLocalesData = locales.locales.map((locale) => {
+      let localeTemp = locale;
+      translations?.forEach((translation) => {
+        if (locale.id === translation.id) {
+          localeTemp = translation;
+        }
+      });
+      return localeTemp;
     });
-  }, [translations]);
 
-  useEffect(() => {
-    const localeId = localStorage.getItem("locale");
-    const language = lang ?? localeId ?? "en";
-    localStorage.setItem("locale", language);
-    setLocalLang(language);
-    setCurrentLocale(findLocale());
-  }, [findLocale, lang]);
-
-  const { Provider } = localeContext;
+    const location = overwrittenLocalesData?.find((locale) => locale.id === lang);
+    if (location) {
+      setCurrentLocale(location);
+      dayjs.locale(location.dayjsTranslations);
+    }
+  }, [translations, lang]);
 
   return (
-    <Provider value={{ currentLocale, localesData, setCurrentLocale: saveCurrentLocale }}>
+    <localeContext.Provider
+      value={{
+        currentLocale
+      }}>
       {children}
-    </Provider>
+    </localeContext.Provider>
   );
 };
 
@@ -58,15 +42,5 @@ const useLanguage = () => {
   return context.currentLocale.lang;
 };
 
-const useLocales = () => {
-  const context = useContext(localeContext);
-  return context.localesData;
-};
-
-const useSetLocale = () => {
-  const context = useContext(localeContext);
-  return context.setCurrentLocale;
-};
-
 export default LocaleProvider;
-export { useLanguage, useLocales, useSetLocale };
+export { useLanguage };

src/context/LocaleProvider/index.ts

@@ -1 +1 @@
-export { default, useLanguage, useLocales, useSetLocale } from "./LocaleProvider";
+export { default, useLanguage } from "./LocaleProvider";

src/context/LocaleProvider/localeContext.tsx

@@ -3,7 +3,5 @@ import { locales } from "./locales";
 import { LocaleContextType } from "./types";
 
 export const localeContext = createContext<LocaleContextType>({
-  localesData: locales.getLocales(),
-  currentLocale: locales.getLocales()[0],
-  setCurrentLocale: () => {}
+  currentLocale: locales.getLocales().filter((locale) => locale.id === "en")[0]
 });

src/context/LocaleProvider/types.ts

@@ -3,8 +3,6 @@ import { LangCodes } from "@/types/global";
 
 export type LocaleContextType = {
   currentLocale: LocaleType;
-  localesData: LocaleType[];
-  setCurrentLocale: (locale: LocaleType) => void;
 };
 
 export type LocaleProviderProps = {