Update locale serving backend

src/components/Locale/Locale.tsx

@@ -1,39 +1,41 @@
-import { LOCALE_URI } from "@saleor/config";
 import React from "react";
 import { IntlProvider } from "react-intl";
-import urlJoin from "url-join";
 
 export type LocaleContextType = string;
 export const LocaleContext = React.createContext<LocaleContextType>("en");
 
 const { Consumer: LocaleConsumer, Provider: RawLocaleProvider } = LocaleContext;
 
+enum Locale {
+  EN = "en",
+  EN_GB = "en-gb",
+  EN_US = "en-us"
+}
+
+type LocaleMessages = Record<string, string>;
+const localeData: Record<Locale, LocaleMessages> = {
+  [Locale.EN]: {},
+  [Locale.EN_GB]: {},
+  [Locale.EN_US]: {}
+};
+
+function getMatchingLocale(): Locale {
+  const localeEntries = Object.entries(Locale);
+
+  for (const preferredLocale of navigator.languages) {
+    for (const localeEntry of localeEntries) {
+      if (localeEntry[1].toLowerCase() === preferredLocale.toLowerCase()) {
+        return Locale[localeEntry[0]];
+      }
+    }
+  }
+}
+
 const LocaleProvider: React.FC = ({ children }) => {
-  const [localeIndex, setLocaleIndex] = React.useState(0);
-  const [messages, setMessages] = React.useState({});
-
-  const locale = navigator.languages[localeIndex];
-
-  React.useEffect(() => {
-    async function fetchLocale() {
-      if (locale) {
-        const res = await fetch(urlJoin(LOCALE_URI, `${locale}.json`), {
-          credentials: "same-origin",
-          mode: "cors"
-        });
-        if (res.ok) {
-          const localeData = await res.json();
-          setMessages(localeData);
-        } else {
-          setLocaleIndex(localeIndex + 1);
-        }
-      }
-    }
-    fetchLocale();
-  }, [localeIndex]);
+  const [locale] = React.useState(getMatchingLocale());
 
   return (
-    <IntlProvider locale={locale} messages={messages} key={locale}>
+    <IntlProvider locale={locale} messages={localeData[locale]} key={locale}>
       <RawLocaleProvider value={locale}>{children}</RawLocaleProvider>
     </IntlProvider>
   );

src/config.ts

@@ -3,7 +3,6 @@ import { ListSettings, ListViews } from "./types";
 
 export const APP_MOUNT_URI = process.env.APP_MOUNT_URI || "/";
 export const API_URI = process.env.API_URI || "/graphql/";
-export const LOCALE_URI = process.env.LOCALE_URI || "/";
 
 export const DEFAULT_INITIAL_SEARCH_DATA: SearchQueryVariables = {
   after: null,

tsconfig.json

@@ -11,7 +11,8 @@
     "paths": {
       "@assets/*": ["assets/*"],
       "@saleor/*": ["src/*"]
-    }
+    },
+    "resolveJsonModule": true
   },
   "exclude": ["node_modules"]
 }

webpack.config.js

@@ -21,8 +21,7 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
 });
 const environmentPlugin = new webpack.EnvironmentPlugin([
   "APP_MOUNT_URI",
-  "API_URI",
-  "LOCALE_URI"
+  "API_URI"
 ]);
 
 const dashboardBuildPath = "build/dashboard/";