Working implementation and more

jamiebuilds · Feb 1, 2018 · 92b836f3f7ddda00f706a1ec079bb8aa45f7e808 · 92b836f
1 parent 255b336
commit 92b836f3f7ddda00f706a1ec079bb8aa45f7e808
diff --git a/README.md b/README.md
@@ -41,9 +41,9 @@ function Counter() {
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
-          <button onClick={counter.decrement}>-</button>
+          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
-          <button onClick={counter.increment}>+</button>
+          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
diff --git a/__tests__/__snapshots__/unstated.js.snap b/__tests__/__snapshots__/unstated.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic 1`] = `<div />`;
diff --git a/__tests__/unstated.js b/__tests__/unstated.js
@@ -0,0 +1,80 @@
+// @flow
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provide, Subscribe, Container } from '../src/unstated';
+
+function render(element) {
+  return renderer.create(element).toJSON();
+}
+
+class CounterContainer extends Container<{ count: number }> {
+  state = { count: 0 };
+  increment(amount = 1) {
+    this.setState({ count: this.state.count + amount });
+  }
+  decrement(amount = 1) {
+    this.setState({ count: this.state.count - amount });
+  }
+}
+
+class AmounterContainer extends Container<{ amount: number }> {
+  state = { amount: 1 };
+  setAmount(amount) {
+    this.setState({ amount });
+  }
+}
+
+function Counter() {
+  return (
+    <Subscribe to={[CounterContainer]}>
+      {counter => (
+        <div>
+          <span>{counter.state.count}</span>
+          <button onClick={() => counter.decrement()}>-</button>
+          <button onClick={() => counter.increment()}>+</button>
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+function CounterWithAmount() {
+  return (
+    <Subscribe to={[CounterContainer, AmounterContainer]}>
+      {(counter, amounter) => (
+        <div>
+          <span>{counter.state.count}</span>
+          <button onClick={() => counter.decrement(amounter.state.amount)}>
+            -
+          </button>
+          <button onClick={() => counter.increment(amounter.state.amount)}>
+            +
+          </button>
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+function CounterWithAmountApp() {
+  return (
+    <Subscribe to={[AmounterContainer]}>
+      {amounter => (
+        <div>
+          <Counter />
+          <input
+            type="number"
+            value={amounter.state.amount}
+            onChange={event => {
+              amounter.setAmount(parseInt(event.currentTarget.value, 10));
+            }}
+          />
+        </div>
+      )}
+    </Subscribe>
+  );
+}
+
+test('basic', () => {
+  // still too lazy
+});
diff --git a/example/complex.html b/example/complex.html
diff --git a/example/complex.js b/example/complex.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { render } from 'react-dom';
-import { Subscribe, Container } from '../src';
+import { Subscribe, Container } from '../src/unstated';

 type AppState = {
  amount: number
@@ -60,7 +60,7 @@ function App() {
            type="number"
            value={app.state.amount}
            onChange={event => {
-              app.setAmount(event.currentTarget.value);
+              app.setAmount(parseInt(event.currentTarget.value, 10));
            }}
          />
        </div>
@@ -69,6 +69,4 @@ function App() {
  );
 }

-let root = document.getElementById('root');
-if (!root) throw new Error('Missing #root');
-render(<App />, root);
+render(<App />, window.complex);
diff --git a/example/index.html b/example/index.html
@@ -5,10 +5,12 @@
    <title>Unstated - Examples</title>
  </head>
  <body>
-    <h1>Unstated Examples</h1>
-    <ul>
-      <li><a href="./simple.html">Simple</a></li>
-      <li><a href="./complex.html">Complex</a></li>
-    </ul>
+    <h3>Simple</h3>
+    <div id="simple"></div>
+    <script type="text/javascript" src="./simple.js"></script>
+
+    <h3>Complex</h3>
+    <div id="complex"></div>
+    <script type="text/javascript" src="./complex.js"></script>
  </body>
 </html>
diff --git a/example/simple.html b/example/simple.html
diff --git a/example/simple.js b/example/simple.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { render } from 'react-dom';
-import { Subscribe, Container } from '../src';
+import { Subscribe, Container } from '../src/unstated';

 type CounterState = {
  count: number
@@ -24,15 +24,13 @@ function Counter() {
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
-          <button onClick={counter.decrement}>-</button>
+          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
-          <button onClick={counter.increment}>+</button>
+          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
 }

-let root = document.getElementById('root');
-if (!root) throw new Error('Missing #root');
-render(<Counter />, root);
+render(<Counter />, window.simple);