From eb4cda9f64e1854582ede73507650f2ab8fcfb7b Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 27 Aug 2019 14:05:53 +0200
Subject: [PATCH] Update locale serving backend

---
 src/components/Locale/Locale.tsx | 46 +++++++++++++++++---------------
 src/config.ts                    |  1 -
 tsconfig.json                    |  3 ++-
 webpack.config.js                |  3 +--
 4 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/Locale/Locale.tsx b/src/components/Locale/Locale.tsx
index 5025e71d9..34f455a1f 100644
--- a/src/components/Locale/Locale.tsx
+++ b/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;
 
-const LocaleProvider: React.FC = ({ children }) => {
-  const [localeIndex, setLocaleIndex] = React.useState(0);
-  const [messages, setMessages] = React.useState({});
+enum Locale {
+  EN = "en",
+  EN_GB = "en-gb",
+  EN_US = "en-us"
+}
 
-  const locale = navigator.languages[localeIndex];
+type LocaleMessages = Record<string, string>;
+const localeData: Record<Locale, LocaleMessages> = {
+  [Locale.EN]: {},
+  [Locale.EN_GB]: {},
+  [Locale.EN_US]: {}
+};
 
-  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);
-        }
+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]];
       }
     }
-    fetchLocale();
-  }, [localeIndex]);
+  }
+}
+
+const LocaleProvider: React.FC = ({ children }) => {
+  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>
   );
diff --git a/src/config.ts b/src/config.ts
index e24fdbbe8..ac5f694cd 100644
--- a/src/config.ts
+++ b/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,
diff --git a/tsconfig.json b/tsconfig.json
index 0962d2367..c0f25c825 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,8 @@
     "paths": {
       "@assets/*": ["assets/*"],
       "@saleor/*": ["src/*"]
-    }
+    },
+    "resolveJsonModule": true
   },
   "exclude": ["node_modules"]
 }
diff --git a/webpack.config.js b/webpack.config.js
index 9ba890630..55c8ce335 100644
--- a/webpack.config.js
+++ b/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/";