From 49ed632207ef3d85af585dee20606c51b24facd3 Mon Sep 17 00:00:00 2001
From: Muhammad Majid <mmajidkamel@gmail.com>
Date: Mon, 31 Aug 2020 21:01:50 +0200
Subject: [PATCH] demo using react context as a replacement to redux

---
 context-demo/src/components/App.js            | 17 ++++++++--------
 context-demo/src/components/Button.js         |  2 +-
 context-demo/src/components/Field.js          |  2 +-
 .../src/components/LanguageSelector.js        |  7 ++++---
 context-demo/src/context/langContext.js       | 20 ++++++++++++++++++-
 5 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/context-demo/src/components/App.js b/context-demo/src/components/App.js
index b110951..f22c1b6 100644
--- a/context-demo/src/components/App.js
+++ b/context-demo/src/components/App.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import UserCreate from './UserCreate';
-import langContext from '../context/langContext';
+import { LanguageStore } from '../context/langContext';
 import LanguageSelector from './LanguageSelector';
+
 class App extends React.Component {
   state = { lang: 'en' };
 
@@ -9,15 +10,15 @@ class App extends React.Component {
 
   render() {
     return (
-      <div className="ui container">
-        <LanguageSelector onLangChange={this.onLangChange} />
-        {/* Provider is a react component that is created for us to convey data to children */}
-        {/* Provider creates a separate pipe of info each time it is created */}
+      <LanguageStore >
+        <div className="ui container">
+          <LanguageSelector />
+          {/* Provider is a react component that is created for us to convey data to children */}
+          {/* Provider creates a separate pipe of info each time it is created */}
 
-        <langContext.Provider value={this.state.lang}>
           <UserCreate />
-        </langContext.Provider>
-      </div>
+        </div>
+      </LanguageStore>
     );
   }
 }
diff --git a/context-demo/src/components/Button.js b/context-demo/src/components/Button.js
index 70ff80e..c60d510 100644
--- a/context-demo/src/components/Button.js
+++ b/context-demo/src/components/Button.js
@@ -13,7 +13,7 @@ class Button extends React.Component {
     return (
       <button className="ui button primary" >
         <langContext.Consumer>
-          {(val) => val === 'en' ? 'Submit' : 'Voorleggen'}
+          {({ lang }) => lang === 'en' ? 'Submit' : 'Voorleggen'}
         </langContext.Consumer>
       </button>
     );
diff --git a/context-demo/src/components/Field.js b/context-demo/src/components/Field.js
index 697ce4b..da49666 100644
--- a/context-demo/src/components/Field.js
+++ b/context-demo/src/components/Field.js
@@ -5,7 +5,7 @@ class Field extends React.Component {
   static contextType = LangContext;
 
   render () {
-    const text = this.context === 'en' ? 'Name' : 'Naam';
+    const text = this.context.lang === 'en' ? 'Name' : 'Naam';
 
     return (
       <div className="ui field">
diff --git a/context-demo/src/components/LanguageSelector.js b/context-demo/src/components/LanguageSelector.js
index 44b0e07..1a00bb0 100644
--- a/context-demo/src/components/LanguageSelector.js
+++ b/context-demo/src/components/LanguageSelector.js
@@ -1,13 +1,14 @@
 import React from 'react';
-
+import langContext from "../context/langContext";
 class LanguageSelector extends React.Component {
 
+  static contextType = langContext;
   render() {
     return (
       <div>
         Select A language :
-        <i className="flag us" onClick={() => this.props.onLangChange('en')} ></i>
-        <i className="flag nl" onClick={() => this.props.onLangChange('du')} ></i>
+        <i className="flag us" onClick={() => this.context.onLangChange('en')} ></i>
+        <i className="flag nl" onClick={() => this.context.onLangChange('du')} ></i>
       </div>
     );
   }
diff --git a/context-demo/src/context/langContext.js b/context-demo/src/context/langContext.js
index 77540a4..63e9a91 100644
--- a/context-demo/src/context/langContext.js
+++ b/context-demo/src/context/langContext.js
@@ -1,3 +1,21 @@
 import React from 'react';
 
-export default React.createContext('du');
\ No newline at end of file
+const Context = React.createContext('du');
+
+// separating business logic (state and action mutating it) from view using 
+// a store (like redux) that is implemented with React.Context
+export class LanguageStore extends React.Component {
+  state = { lang: 'en' }
+
+  onLangChange = lang => this.setState({ lang })
+
+  render() {
+    return (
+      <Context.Provider value={{ ...this.state, onLangChange: this.onLangChange }} >
+        {this.props.children}
+      </Context.Provider>
+    )
+  }
+}
+
+export default Context;
\ No newline at end of file