✨ add Store context with basic example

 #10

src/App.js

@@ -3,20 +3,36 @@ import './App.css'
 
 import {Trans, withNamespaces} from 'react-i18next'
 import LanguageChooser from './LanguageChooser'
+import {withStore} from './db'
+import initValues from './db/initialValues.json'
 
 
 const App = ({t}) =>
   <div className="App">
     <header className="App-header">
-      <LanguageChooser/>
+      <TestStoreContext/>
       <h1 className="App-title">
         {t('welcome.title', {framework: "react-i18next"})}
       </h1>
       <Trans i18nKey="welcome.intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </Trans>
+      <LanguageChooser/>
     </header>
   </div>
 
 export default withNamespaces('common')(App)
 
+
+const TestStoreContext = withStore(({store}) =>
+  <div>
+    <h3>Testing store context</h3>
+    <button onClick={() => store.handleHelloWorld(store.value)}>Click me!</button>
+    <input autoFocus onChange={e => store.handleChangeValue(e.target.value)} value={store.value}/>
+    {
+      initValues.value !== store.value &&
+      <button onClick={() => store.handleChangeValue("")}>Clear</button>
+    }
+    <hr/>
+  </div>
+)

src/db/Store.js

@@ -0,0 +1,33 @@
+import React, {Component} from "react"
+import helloWorld, {changeValue} from "./actions/helloWorld"
+import initValues from "./initialValues.json"
+
+const Store = React.createContext()
+
+export class Database extends Component {
+
+  state = {
+    ...initValues
+  }
+
+
+  helloWorld = helloWorld.bind(this)
+
+  changeValue = changeValue.bind(this)
+
+  render() {
+    return (
+      <Store.Provider
+        value={{
+          handleHelloWorld: this.helloWorld,
+          handleChangeValue: this.changeValue,
+          ...this.state
+        }}
+      >
+        {this.props.children}
+      </Store.Provider>
+    )
+  }
+}
+
+export default Store

src/db/actions/helloWorld.js

@@ -0,0 +1,16 @@
+import initValues from "../initialValues.json"
+
+/**
+ * Test function
+ */
+export default function helloWorld() {
+  alert(this.state.value)
+}
+
+/**
+ * Change store value
+ * @param {string} value
+ */
+export function changeValue(value) {
+  this.setState({value: value === "" ? initValues.value : value})
+}

src/db/index.js

@@ -0,0 +1,5 @@
+import withStore from "./withStore"
+import Store, {Database} from "./Store"
+
+export default Store
+export {withStore, Database}

src/db/initialValues.json

@@ -0,0 +1,3 @@
+{
+  "value": "This is an initial value"
+}

src/db/withStore.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Store from '.'
+
+/**
+ * HOC implementation of Store context
+ * @param {Component} WrappedComponent The component to pass the store values to
+ * @returns {Component} new component with the Store values in this.props.store
+ */
+const withStore = WrappedComponent => props =>
+  <Store.Consumer>
+    {store => <WrappedComponent {...props } store={store}/>}
+  </Store.Consumer>
+
+export default withStore

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 
+import {Database} from './db'
 
 import i18next from "./lib/i18next"
 import {I18nextProvider} from 'react-i18next'
@@ -11,7 +12,9 @@ import * as serviceWorker from './serviceWorker'
 
 ReactDOM.render(
   <I18nextProvider i18n={i18next}>
-    <App/>
+    <Database>
+      <App/>
+    </Database>
   </I18nextProvider>,
   document.getElementById('root')
 )