Add basic fetch example.

ghengeveld · ghengeveld · commit 4f5fdd27878b · 2018-12-30T15:10:18.000+01:00
diff --git a/examples/basic-fetch/README.md b/examples/basic-fetch/README.md
@@ -0,0 +1,5 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/ghengeveld/react-async/tree/master/examples/basic-fetch)
+
+# Basic fetch with React Async
+
+This demonstrates a very simple HTTP GET using `fetch`, wrapped with React Async.
diff --git a/examples/basic-fetch/package.json b/examples/basic-fetch/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "basic-fetch",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-async": "latest",
+    "react-dom": "^16.7.0",
+    "react-scripts": "2.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/basic-fetch/public/favicon.ico b/examples/basic-fetch/public/favicon.ico
diff --git a/examples/basic-fetch/public/index.html b/examples/basic-fetch/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/basic-fetch/src/index.css b/examples/basic-fetch/src/index.css
@@ -0,0 +1,29 @@
+body {
+  margin: 20px;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.user {
+  display: inline-block;
+  margin: 20px;
+  text-align: center;
+}
+
+.avatar {
+  background: #eee;
+  border-radius: 64px;
+  width: 128px;
+  height: 128px;
+}
+
+.name {
+  margin-top: 10px;
+}
+
+.placeholder {
+  opacity: 0.5;
+}
diff --git a/examples/basic-fetch/src/index.js b/examples/basic-fetch/src/index.js
@@ -0,0 +1,42 @@
+import React from "react"
+import Async from "react-async"
+import ReactDOM from "react-dom"
+import "./index.css"
+
+const loadUser = ({ userId }) =>
+  fetch(`https://reqres.in/api/users/${userId}`)
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+
+const UserPlaceholder = () => (
+  <div className="user placeholder">
+    <div className="avatar" />
+    <div className="name">══════</div>
+  </div>
+)
+
+const UserDetails = ({ data }) => (
+  <div className="user">
+    <img className="avatar" src={data.data.avatar} alt="" />
+    <div className="name">
+      {data.data.first_name} {data.data.last_name}
+    </div>
+  </div>
+)
+
+const App = () => (
+  <>
+    <Async promiseFn={loadUser} userId={1}>
+      {({ data, isLoading }) => (isLoading ? <UserPlaceholder /> : <UserDetails data={data} />)}
+    </Async>
+
+    <Async promiseFn={loadUser} userId={2}>
+      <Async.Loading>
+        <UserPlaceholder />
+      </Async.Loading>
+      <Async.Resolved>{data => <UserDetails data={data} />}</Async.Resolved>
+    </Async>
+  </>
+)
+
+ReactDOM.render(<App />, document.getElementById("root"))
