Add redux

Author: completejavascript

package.json

@@ -14,7 +14,10 @@
     "react-app-rewired": "^2.1.5",
     "react-dom": "^16.12.0",
     "react-intl": "^3.11.0",
-    "react-scripts": "3.3.0"
+    "react-redux": "^7.1.3",
+    "react-scripts": "3.3.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -36,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "redux-devtools-extension": "^2.13.8"
   }
 }

src/App.js

@@ -1,22 +1,19 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { useRoutes } from 'hookrouter';
 import { IntlProvider } from 'react-intl';
-import messages_en from './translations/en.json';
-import messages_vi from './translations/vi.json';
+import en from './translations/en.json';
+import vi from './translations/vi.json';
 import routes from './router';
 import NoPageFound from './pages/NoPageFound/NoPageFound';
 import './App.scss';
 
-const messages = {
-  en: messages_en,
-  vi: messages_vi
-};
-
-const language = 'en';
+const messages = { en, vi };
 
-const App = () => {
+const App = props => {
   console.log('This console will be remove in Production mode');
   const routeResult = useRoutes(routes);
+  const language = props.languageTrans;
 
   return (
     <IntlProvider locale={language} messages={messages[language]}>
@@ -25,4 +22,9 @@ const App = () => {
   );
 };
 
-export default App;
+export default connect(
+  state => ({
+    languageTrans: state.system.languageTrans
+  }),
+  {}
+)(App);

src/components/ChangeLanguage/ChangeLanguage.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { actionChangeLanguage } from '../../system/systemAction';
+import './ChangeLanguage.scss';
+
+const ChangeLanguage = props => {
+  const handleClick = lang => () => {
+    props.actionChangeLanguage(lang);
+  };
+
+  return (
+    <div className="change-language-container">
+      <span
+        className={`item left ${props.languageTrans === 'en' ? 'active' : ''}`}
+        onClick={handleClick('en')}
+      >
+        EN
+      </span>
+      <span
+        className={`item right ${props.languageTrans === 'vi' ? 'active' : ''}`}
+        onClick={handleClick('vi')}
+      >
+        VI
+      </span>
+    </div>
+  );
+};
+
+export default connect(
+  state => ({
+    languageTrans: state.system.languageTrans
+  }),
+  {
+    actionChangeLanguage
+  }
+)(ChangeLanguage);

src/components/ChangeLanguage/ChangeLanguage.scss

@@ -0,0 +1,24 @@
+@import "../../scss/variables.scss";
+
+.change-language-container {
+  display: inline-block;
+  .item {
+    line-height: 1;
+    padding: 0;
+    font-weight: 600;
+    cursor: default;
+    &:not(.active):hover {
+      cursor: pointer;
+    }
+    &.active {
+      color: $primaryColor;
+    }
+    &.left {
+      padding-right: 15px;
+      border-right: 1px solid #999;
+    }
+    &.right {
+      padding-left: 15px;
+    }
+  }
+}

src/components/Navigation/Navigation.js

@@ -1,17 +1,46 @@
 import React from 'react';
 import { A } from 'hookrouter';
+import { FormattedMessage } from 'react-intl';
+import ChangeLanguage from '../ChangeLanguage/ChangeLanguage';
 import './Navigation.scss';
 
 const Navigation = () => {
   return (
     <div className="navigation-container">
-      <ul>
-        <li><A href="/">Home</A></li>
-        <li><A href="/terms">Terms of Use</A></li>
-        <li><A href="/privacy">Privacy Policy</A></li>
-        <li><A href="/blog/1">Blog 1</A></li>
-        <li><A href="/blog/2">Blog 2</A></li>
+      <ul className="left">
+        <li>
+          <A href="/">
+            <FormattedMessage id="IDS_HOME_PAGE" />
+          </A>
+        </li>
+        <li>
+          <A href="/terms">
+            <FormattedMessage id="IDS_TERMS_OF_USE" />
+          </A>
+        </li>
+        <li>
+          <A href="/privacy">
+            <FormattedMessage id="IDS_PRIVACY_POLICY" />
+          </A>
+        </li>
+        <li>
+          <A href="/blog/1">
+            <FormattedMessage
+              id="IDS_BLOG_PAGE_WITH_ID"
+              values={{ blogId: 1 }}
+            />
+          </A>
+        </li>
+        <li>
+          <A href="/blog/2">
+            <FormattedMessage
+              id="IDS_BLOG_PAGE_WITH_ID"
+              values={{ blogId: 2 }}
+            />
+          </A>
+        </li>
       </ul>
+      <ChangeLanguage />
     </div>
   );
 };

src/components/Navigation/Navigation.scss

@@ -1,6 +1,9 @@
-@import "../../scss/variables.scss";
+@import '../../scss/variables.scss';
 
 .navigation-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   ul {
     li {
       a {

src/constants/actionTypes.js

@@ -0,0 +1,3 @@
+export const systemActions = {
+  CHANGE_LANGUAGE: 'CHANGE_LANGUAGE'
+};

src/index.js

@@ -1,10 +1,19 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import configureStore from './store/configureStore';
 import './index.scss';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const store = configureStore();
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/store/combineReducers.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import system from '../system/systemReducer';
+
+export default combineReducers({
+  system
+});

src/store/configureStore.js

@@ -0,0 +1,28 @@
+import { applyMiddleware, createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension'
+import thunkMiddleware from 'redux-thunk';
+import combineReducers from './combineReducers';
+
+const loggerMiddleware = store => next => action => {
+  console.group(action.type);
+  console.log('prev state', store.getState());
+  let result = next(action);
+  console.log('next state', store.getState());
+  console.groupEnd();
+  return result;
+};
+
+const configureStore = preloadedState => {
+  const middlewares = [];
+  if (process.env.NODE_ENV === 'development') {
+    middlewares.push(loggerMiddleware)
+  }
+  middlewares.push(thunkMiddleware);
+  
+  const middlewareEnhancer = applyMiddleware(...middlewares);
+  const enhancers = [middlewareEnhancer];
+  const composedEnhancers = composeWithDevTools(...enhancers);
+  return createStore(combineReducers, preloadedState, composedEnhancers);
+};
+
+export default configureStore;