Examples/using unstated

examples/using-unstated/README.md

@@ -0,0 +1,16 @@
+# Unstated
+
+https://using-unstated.gatsbyjs.org/
+
+Gatsby example site that shows use of unstated.
+
+# Overview
+
+To use unstated in a Gatsby site you'll need to hook in to two of Gatsby's
+extension points.
+
+Once in `replaceRenderer` which runs during Gatsby's server rendering process,
+and once in `replaceRouterComponent` which is part of Gatsby's browser APIs.
+
+Check out [`./gatsby-ssr.js`](./gatsby-ssr.js) and
+[`./gatsby-browser.js`](./gatsby-browser.js) to see how this is implemented in this example.

examples/using-unstated/gatsby-browser.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Router } from 'react-router-dom'
+import { Provider } from 'unstated'
+
+export const replaceRouterComponent = ({ history }) => {
+
+    const ConnectedRouterWrapper = ({ children }) => (
+        <Provider>
+            <Router history={history}>{children}</Router>
+        </Provider>
+    )
+
+    return ConnectedRouterWrapper
+}

examples/using-unstated/gatsby-config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby Unstated`,
+  },
+}

examples/using-unstated/gatsby-ssr.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Provider } from 'unstated'
+import { renderToString } from 'react-dom/server'
+
+export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
+
+    const ConnectedBody = () => (
+        <Provider>
+            {bodyComponent}
+        </Provider>
+    )
+    replaceBodyHTMLString(renderToString(<ConnectedBody/>))
+}

examples/using-unstated/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "gatsby-example-unstated",
+  "private": true,
+  "description": "Gatsby example site that shows use of unstated.",
+  "version": "1.0.0",
+  "author": "greg lobinski <greglobinski@gmail.com>",
+  "dependencies": {
+    "gatsby": "next",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "unstated": "^2.1.1"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve"
+  }
+}

examples/using-unstated/src/components/layout.js

@@ -0,0 +1,39 @@
+import React from "react"
+import { Link } from "gatsby"
+import { Subscribe } from "unstated"
+import CounterContainer from "../state/CounterContainer"
+
+class DefaultLayout extends React.Component {
+  render() {
+    return (
+      <div>
+        <Link to="/">
+          <h3>Unstated example</h3>
+        </Link>
+        <Subscribe to={[CounterContainer]}>
+          {counter => (
+            <div>
+              <button onClick={() => counter.decrement()}>-</button>
+              <span>Count: {counter.state.count}</span>
+              <button onClick={() => counter.increment()}>+</button>
+            </div>
+          )}
+        </Subscribe>
+        <ul>
+          <li>
+            <Link to="/a/">a</Link>
+          </li>
+          <li>
+            <Link to="/b/">b</Link>
+          </li>
+          <li>
+            <Link to="/c/">c</Link>
+          </li>
+        </ul>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export default DefaultLayout

examples/using-unstated/src/pages/a.js

@@ -0,0 +1,10 @@
+import React from "react"
+import Layout from "../components/layout"
+
+const A = () => (
+  <Layout>
+    <p>Page A</p>
+  </Layout>
+)
+
+export default A

examples/using-unstated/src/pages/b.js

@@ -0,0 +1,10 @@
+import React from "react"
+import Layout from "../components/layout"
+
+const B = () => (
+  <Layout>
+    <p>Page B</p>
+  </Layout>
+)
+
+export default B

examples/using-unstated/src/pages/c.js

@@ -0,0 +1,10 @@
+import React from "react"
+import Layout from "../components/layout"
+
+const C = () => (
+  <Layout>
+    <p>Page C</p>
+  </Layout>
+)
+
+export default C

examples/using-unstated/src/pages/index.js

@@ -0,0 +1,10 @@
+import React from "react"
+import Layout from "../components/layout"
+
+const Home = () => (
+  <Layout>
+    <p>Home</p>
+  </Layout>
+)
+
+export default Home

examples/using-unstated/src/state/CounterContainer.js

@@ -0,0 +1,17 @@
+import { Container } from "unstated"
+
+class CounterContainer extends Container {
+  state = {
+    count: 0,
+  }
+
+  increment() {
+    this.setState({ count: this.state.count + 1 })
+  }
+
+  decrement() {
+    this.setState({ count: this.state.count - 1 })
+  }
+}
+
+export default CounterContainer