improve change locale logic

Author: iamvijaydev

src/App/AppRoutes/index.js

@@ -12,12 +12,12 @@ const AppRoutes = ({ show }) => {
   // untill some API fetch to complete
   if (show) {
     return (
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/about" component={About} />
-          <Route path="/topics" component={Topics} />
-          <Route component={Page404} />
-        </Switch>
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+        <Route path="/topics" component={Topics} />
+        <Route component={Page404} />
+      </Switch>
     );
   }
 

src/App/DemoToBeDeleted/components/DemoSwitchLocale/component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { arrayOf, shape, string, func } from 'prop-types';
 
 const DemoSwitchLocale = ({ locale, selected, changeLocale }) => (
   <>
@@ -9,7 +10,7 @@ const DemoSwitchLocale = ({ locale, selected, changeLocale }) => (
         <button
           type="button"
           disabled={id === selected}
-          onClick={() => changeLocale({ id })}
+          onClick={() => changeLocale(id)}
         >
           {name}
         </button>
@@ -18,4 +19,10 @@ const DemoSwitchLocale = ({ locale, selected, changeLocale }) => (
   </>
 );
 
+DemoSwitchLocale.propTypes = {
+  locale: arrayOf(shape({ id: string, name: string })).isRequired,
+  selected: string.isRequired,
+  changeLocale: func.isRequired
+};
+
 export default DemoSwitchLocale;

src/App/DemoToBeDeleted/components/DemoSwitchLocale/index.js

@@ -4,7 +4,7 @@ import DemoSwitchLocale from './component';
 
 const mapState = ({ locale }) => ({
   locale: locale.data,
-  selected: locale.selected,
+  selected: locale.selected.id,
 });
 
 const mapDispatch = ({ locale }) => ({

src/App/DemoToBeDeleted/components/DemoSwitchTheme/component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import { arrayOf, shape, string, func } from 'prop-types';
 
 const DemoSwitchTheme = ({ themes, selected, changeTheme }) => (
   <>
@@ -18,4 +19,10 @@ const DemoSwitchTheme = ({ themes, selected, changeTheme }) => (
   </>
 );
 
+DemoSwitchTheme.propTypes = {
+  themes: arrayOf(shape({ id: string, name: string })).isRequired,
+  selected: string.isRequired,
+  changeTheme: func.isRequired
+};
+
 export default DemoSwitchTheme;

src/App/DemoToBeDeleted/components/DemoSwitchTheme/index.js

@@ -4,7 +4,7 @@ import DemoSwitchTheme from './component';
 
 const mapState = ({ themes }) => ({
   themes: themes.data,
-  selected: themes.selected,
+  selected: themes.selected.id,
 });
 
 const mapDispatch = ({ themes }) => ({

src/App/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { arrayOf, shape, string, func } from 'prop-types';
 import { connect } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 import intl from 'react-intl-universal';
@@ -12,58 +12,27 @@ import AppScrollToTop from './AppScrollToTop';
 import AppRoutes from './AppRoutes';
 import DemoToBeDeleted from './DemoToBeDeleted';
 
-const App = ({ themes, changeTheme, locale, changeLocale }) => {
-  const loadLocale = useCallback(
-    userLocale => {
-      const hasLocale = check => locale.data.find(({ id }) => id === check);
-
-      if (!!userLocale && !hasLocale(userLocale)) {
-        return;
-      }
-
-      let currentLocale;
-
-      if (!!userLocale && hasLocale(userLocale)) {
-        currentLocale = userLocale;
-      } else {
-        currentLocale = intl.determineLocale({
-          cookieLocaleKey: 'lang'
-        });
-
-        if (!hasLocale(currentLocale)) {
-          currentLocale = 'en-US';
-        }
-      }
-
-      const onChangeLocale = () => {
-        changeLocale({ id: currentLocale });
-      };
-
-      import(`../../config/locale/${currentLocale}.json`)
-        .then(res =>
-          intl.init({
-            currentLocale,
-            locales: {
-              [currentLocale]: res
-            }
-          })
-        )
-        .then(onChangeLocale)
-        .catch(onChangeLocale);
-    },
-    [changeLocale]
-  );
+const App = ({ selectedTheme, selectedLocale, locale, changeLocale }) => {
 
+  // try and detect locale
+  // just once when the app loads
   useEffect(() => {
-    loadLocale();
-  }, [loadLocale]);
+    const currentLocale = intl.determineLocale({
+      cookieLocaleKey: 'lang'
+    });
+    const hasLocale = locale.find(({ id }) => id === currentLocale)
+
+    if (currentLocale !== selectedLocale && hasLocale) {
+      changeLocale(currentLocale);
+    }
+  }, [changeLocale]);
 
   const getTheme = useCallback(() => {
     let theme = {};
 
-    if (themes.selected.id === 'white_theme') {
+    if (selectedTheme === 'white_theme') {
       theme = whitetheme;
-    } else if (themes.selected.id === 'dark_theme') {
+    } else if (selectedTheme === 'dark_theme') {
       theme = darktheme;
     }
 
@@ -87,10 +56,10 @@ const App = ({ themes, changeTheme, locale, changeLocale }) => {
 };
 
 App.propTypes = {
-  themes: PropTypes.object.isRequired,
-  locale: PropTypes.object.isRequired,
-  changeTheme: PropTypes.func.isRequired,
-  changeLocale: PropTypes.func.isRequired
+  locale: arrayOf(shape({ id: string, name: string })).isRequired,
+  selectedLocale: string.isRequired,
+  selectedTheme: string.isRequired,
+  changeLocale: func.isRequired
 };
 
 /**
@@ -99,12 +68,12 @@ App.propTypes = {
  */
 
 const mapState = ({ themes, locale }) => ({
-  themes,
-  locale
+  locale: locale.data,
+  selectedLocale: locale.selected.id,
+  selectedTheme: themes.selected.id
 });
 
-const mapDispatch = ({ themes, locale }) => ({
-  changeTheme: themes.changeTheme,
+const mapDispatch = ({ locale }) => ({
   changeLocale: locale.changeLocale
 });
 

src/models/locale.js

@@ -1,32 +1,53 @@
-const data = [{
-  id: 'en-US',
-  value: 'en-US',
-  name: 'English',
-}, {
-  id: 'fr-FR',
-  value: 'fr-FR',
-  name: 'French',
-}, {
-  id: 'ja-JP',
-  value: 'ja-JP',
-  name: 'Japanese',
-}];
+import intl from 'react-intl-universal';
+
+const data = [
+  {
+    id: 'en-US',
+    value: 'en-US',
+    name: 'English'
+  },
+  {
+    id: 'fr-FR',
+    value: 'fr-FR',
+    name: 'French'
+  },
+  {
+    id: 'ja-JP',
+    value: 'ja-JP',
+    name: 'Japanese'
+  }
+];
 
 const selected = data[0];
 
 const initialState = {
   data,
-  selected,
+  selected
 };
 
 export const locale = {
   state: initialState,
   reducers: {
-    changeLocale(state, payload) {
+    updateLocale(state, currentLocale) {
       return {
         ...state,
-        selected: data.find(({ id }) => id === payload.id) || state.selected,
+        selected: data.find(({ id }) => id === currentLocale) || state.selected
       };
-    },
+    }
   },
+  effects: dispatch => ({
+    async changeLocale(currentLocale) {
+      console.log(currentLocale)
+      await import(`../../config/locale/${currentLocale}.json`).then(res =>
+        intl.init({
+          currentLocale,
+          locales: {
+            [currentLocale]: res
+          }
+        })
+      );
+
+      dispatch.locale.updateLocale(currentLocale);
+    }
+  })
 };

src/services/dynamicStyles/index.js

@@ -26,4 +26,4 @@ const dynamicStyles = (uid, styles) => {
   }
 };
 
-export { dynamicStyles as default };
+export default dynamicStyles;