From 6fbca8a306ee159f0c82a2cc5ddccd2177245564 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 1 Feb 2020 12:18:39 +0100
Subject: [PATCH] create usage example

---
 src/App.js                     |  3 +++
 src/components/Counter.js      | 48 ++++++++++++++++++++++++++++++++++
 src/components/CounterStore.js | 22 ++++++++++++++++
 webpack.config.js              |  1 +
 4 files changed, 74 insertions(+)
 create mode 100644 src/components/Counter.js
 create mode 100644 src/components/CounterStore.js

diff --git a/src/App.js b/src/App.js
index 2796bc7..8713ce8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,8 @@ import { SearchBar } from './components/SearchBar'
 import './App.css'
 import { LangSelect } from './components/LangSelect'
 
+import { Counter } from 'components/Counter'
+
 export const App = () => {
   const { t } = useTranslation()
   return (
@@ -20,6 +22,7 @@ export const App = () => {
         <RsvpReader></RsvpReader>
       </main>
       <footer>Made by Alfred Melch</footer>
+      <Counter />
     </>
   )
 }
diff --git a/src/components/Counter.js b/src/components/Counter.js
new file mode 100644
index 0000000..e82d003
--- /dev/null
+++ b/src/components/Counter.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { useCounter, CounterProvider } from './CounterStore'
+
+export const Counter = () => {
+  return (
+    <span>
+      <CounterProvider>
+        <MyCounter />
+        <Text />
+        <TextSetter />
+        <Logger />
+      </CounterProvider>
+    </span>
+  )
+}
+
+const Logger = () => {
+  const store = useCounter()
+  console.log(store[0])
+  return <></>
+}
+
+const MyCounter = () => {
+  const [{ counter }, { increment, decrement }] = useCounter()
+  return (
+    <div>
+      {counter}
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+    </div>
+  )
+}
+
+const Text = () => {
+  const [{ text }] = useCounter()
+  return <span>{text}</span>
+}
+
+const TextSetter = () => {
+  const [{ text }, { setText }] = useCounter()
+  return (
+    <input
+      type="text"
+      value={text}
+      onChange={evt => setText(evt.target.value)}
+    />
+  )
+}
diff --git a/src/components/CounterStore.js b/src/components/CounterStore.js
new file mode 100644
index 0000000..2243ae1
--- /dev/null
+++ b/src/components/CounterStore.js
@@ -0,0 +1,22 @@
+import { createStore } from 'context-store'
+
+const initialState = {
+  counter: 0,
+  text: 'initial'
+}
+
+const thunks = {
+  increment: () => dispatch => dispatch(),
+  decrement: () => dispatch => dispatch(),
+  setText: text => dispatch => dispatch({ text })
+}
+
+const reducer = {
+  INCREMENT: state => ({ ...state, counter: state.counter + 1 }),
+  DECREMENT: state => ({ ...state, counter: state.counter - 1 }),
+  SET_TEXT: (state, { text }) => ({ ...state, text })
+}
+
+const store = createStore({ reducer, thunks, initialState })
+export const CounterProvider = store.Provider
+export const useCounter = store.useStore
diff --git a/webpack.config.js b/webpack.config.js
index dba1be0..36e873a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -58,6 +58,7 @@ module.exports = (env, argv) => {
         name: entrypoint => `runtime-${entrypoint.name}`
       }
     },
+    resolve: { modules: ['src', 'lib', 'node_modules'] },
     plugins: [
       // creat an index.html
       new HtmlWebpackPlugin(),