Add DevTools to each example.

ghengeveld · ghengeveld · commit 3998b9ad2dca · 2019-07-09T11:53:04.000+02:00
diff --git a/examples/basic-fetch/package.json b/examples/basic-fetch/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "^16.8.6",
     "react-scripts": "^3.0.1"
   },
diff --git a/examples/basic-fetch/src/index.js b/examples/basic-fetch/src/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import Async from "react-async"
+import DevTools from "react-async-devtools"
 import ReactDOM from "react-dom"
 import "./index.css"
 
@@ -26,7 +27,8 @@ const UserDetails = ({ data }) => (
 
 const App = () => (
   <>
-    <Async promiseFn={loadUser} userId={1}>
+    <DevTools />
+    <Async promiseFn={loadUser} userId={1} debugLabel="User 1">
       {({ data, error, isPending }) => {
         if (isPending) return <UserPlaceholder />
         if (error) return <p>{error.message}</p>
@@ -35,7 +37,7 @@ const App = () => (
       }}
     </Async>
 
-    <Async promiseFn={loadUser} userId={2}>
+    <Async promiseFn={loadUser} userId={2} debugLabel="User 2">
       <Async.Pending>
         <UserPlaceholder />
       </Async.Pending>
diff --git a/examples/basic-hook/package.json b/examples/basic-hook/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "16.8.5",
     "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "16.8.5",
     "react-scripts": "2.1.8"
   },
diff --git a/examples/basic-hook/src/index.js b/examples/basic-hook/src/index.js
@@ -1,6 +1,7 @@
 import React from "react"
 import { useAsync } from "react-async"
 import ReactDOM from "react-dom"
+import DevTools from "react-async-devtools"
 import "./index.css"
 
 const loadUser = ({ userId }) =>
@@ -26,7 +27,11 @@ const UserDetails = ({ data }) => (
 )
 
 const User = ({ userId }) => {
-  const { data, error, isPending } = useAsync({ promiseFn: loadUser, userId })
+  const { data, error, isPending } = useAsync({
+    promiseFn: loadUser,
+    debugLabel: `User ${userId}`,
+    userId,
+  })
   if (isPending) return <UserPlaceholder />
   if (error) return <p>{error.message}</p>
   if (data) return <UserDetails data={data} />
@@ -35,6 +40,7 @@ const User = ({ userId }) => {
 
 const App = () => (
   <>
+    <DevTools />
     <User userId={1} />
     <User userId={2} />
   </>
diff --git a/examples/custom-instance/package.json b/examples/custom-instance/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.8.5",
     "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "^16.8.5",
     "react-scripts": "2.1.8"
   },
diff --git a/examples/custom-instance/src/index.js b/examples/custom-instance/src/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import { createInstance } from "react-async"
+import DevTools from "react-async-devtools"
 import ReactDOM from "react-dom"
 import "./index.css"
 
@@ -28,16 +29,16 @@ const UserDetails = ({ data }) => (
 
 const App = () => (
   <>
-    <AsyncUser userId={1}>
+    <DevTools />
+    <AsyncUser userId={1} debugLabel="User 1">
       {({ data, error, isPending }) => {
         if (isPending) return <UserPlaceholder />
         if (error) return <p>{error.message}</p>
         if (data) return <UserDetails data={data} />
         return null
       }}
     </AsyncUser>
-
-    <AsyncUser userId={2}>
+    <AsyncUser userId={2} debugLabel="User 2">
       <AsyncUser.Pending>
         <UserPlaceholder />
       </AsyncUser.Pending>
diff --git a/examples/movie-app/package.json b/examples/movie-app/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "dependencies": {
     "react": "^16.8.5",
-    "react-async": "5.1.2",
+    "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "^16.8.5",
     "react-scripts": "2.1.8"
   },
diff --git a/examples/movie-app/src/App.js b/examples/movie-app/src/App.js
@@ -61,7 +61,7 @@ const TopMovies = ({ handleSelect }) => (
         🍿
       </span>
     </h1>
-    <Async promiseFn={fetchMovies}>
+    <Async promiseFn={fetchMovies} debugLabel={`Movies`}>
       <Async.Pending>
         <p>Loading...</p>
       </Async.Pending>
@@ -98,7 +98,12 @@ const Details = ({ onBack, id }) => (
         👈
       </span>
     </button>
-    <Async promiseFn={fetchMovieDetails} id={id} onResolve={console.log}>
+    <Async
+      promiseFn={fetchMovieDetails}
+      debugLabel={`Details ${id}`}
+      id={id}
+      onResolve={console.log}
+    >
       <Async.Pending>
         <p>Loading...</p>
       </Async.Pending>
@@ -125,7 +130,12 @@ const Details = ({ onBack, id }) => (
               </div>
             </div>
             <div className="reviews">
-              <Async promiseFn={fetchMovieReviews} id={id} onResolve={console.log}>
+              <Async
+                promiseFn={fetchMovieReviews}
+                debugLabel={`Reviews ${id}`}
+                id={id}
+                onResolve={console.log}
+              >
                 <Async.Pending>
                   <p>Loading...</p>
                 </Async.Pending>
diff --git a/examples/movie-app/src/index.js b/examples/movie-app/src/index.js
@@ -1,10 +1,17 @@
 import React from "react"
+import DevTools from "react-async-devtools"
 import ReactDOM from "react-dom"
 import "./index.css"
 import App from "./App"
 // import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById("root"))
+ReactDOM.render(
+  <>
+    <DevTools />
+    <App />
+  </>,
+  document.getElementById("root")
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/examples/with-abortcontroller/package.json b/examples/with-abortcontroller/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "16.8.5",
     "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "16.8.5",
     "react-scripts": "2.1.8"
   },
diff --git a/examples/with-abortcontroller/src/index.js b/examples/with-abortcontroller/src/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import { useAsync } from "react-async"
+import DevTools from "react-async-devtools"
 import ReactDOM from "react-dom"
 import "./index.css"
 
@@ -9,7 +10,7 @@ const download = (args, props, controller) =>
     .then(res => res.json())
 
 const App = () => {
-  const { run, cancel, isPending } = useAsync({ deferFn: download })
+  const { run, cancel, isPending } = useAsync({ deferFn: download, debugLabel: "User 1" })
   return (
     <>
       {isPending ? <button onClick={cancel}>cancel</button> : <button onClick={run}>start</button>}
@@ -22,4 +23,10 @@ const App = () => {
   )
 }
 
-ReactDOM.render(<App />, document.getElementById("root"))
+ReactDOM.render(
+  <>
+    <DevTools />
+    <App />
+  </>,
+  document.getElementById("root")
+)
diff --git a/examples/with-nextjs/package.json b/examples/with-nextjs/package.json
@@ -16,6 +16,7 @@
     "next": "8.0.3",
     "react": "16.8.5",
     "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "16.8.5"
   }
 }
diff --git a/examples/with-nextjs/pages/index.js b/examples/with-nextjs/pages/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import Async from "react-async"
+import DevTools from "react-async-devtools"
 import fetch from "isomorphic-fetch"
 import Link from "next/link"
 
@@ -19,35 +20,44 @@ class Hello extends React.Component {
     const { data, url } = this.props
     const { userId = 1 } = url.query
     return (
-      <Async promiseFn={loadUser} userId={userId} watch={userId} initialValue={data}>
-        <Async.Pending>
-          <p>Loading...</p>
-        </Async.Pending>
-        <Async.Fulfilled>
-          {data => (
-            <>
-              <p>
-                [{userId}] Hello {data.first_name}
-              </p>
-              <p>
-                {userId > 1 && (
-                  <Link href={`?userId=${userId - 1}`}>
-                    <a>Prev</a>
-                  </Link>
-                )}{" "}
-                {userId < 12 && (
-                  <Link href={`?userId=${data.id + 1}`}>
-                    <a>Next</a>
-                  </Link>
-                )}
-              </p>
-            </>
-          )}
-        </Async.Fulfilled>
-        <i>
-          This data is initially loaded server-side, then client-side when navigating prev/next.
-        </i>
-      </Async>
+      <>
+        {process.browser && <DevTools />}
+        <Async
+          promiseFn={loadUser}
+          debugLabel={`User ${userId}`}
+          userId={userId}
+          watch={userId}
+          initialValue={data}
+        >
+          <Async.Pending>
+            <p>Loading...</p>
+          </Async.Pending>
+          <Async.Fulfilled>
+            {data => (
+              <>
+                <p>
+                  [{userId}] Hello {data.first_name}
+                </p>
+                <p>
+                  {userId > 1 && (
+                    <Link href={`?userId=${userId - 1}`}>
+                      <a>Prev</a>
+                    </Link>
+                  )}{" "}
+                  {userId < 12 && (
+                    <Link href={`?userId=${data.id + 1}`}>
+                      <a>Next</a>
+                    </Link>
+                  )}
+                </p>
+              </>
+            )}
+          </Async.Fulfilled>
+          <i>
+            This data is initially loaded server-side, then client-side when navigating prev/next.
+          </i>
+        </Async>
+      </>
     )
   }
 }
diff --git a/examples/with-react-router/index.js b/examples/with-react-router/index.js
@@ -1,4 +1,5 @@
 import React from "react"
+import DevTools from "react-async-devtools"
 import ReactDOM from "react-dom"
 import { BrowserRouter as Router, NavLink } from "react-router-dom"
 import AsyncRoute from "./js/AsyncRoute"
@@ -8,15 +9,16 @@ import Repositories from "./js/Repositories"
 const App = () => (
   <Router>
     <>
+      <DevTools />
       <div>
         <NavLink to="/">Contributors To react-async</NavLink>
         <NavLink to="/repositories">Other github repositories</NavLink>
       </div>
-      <AsyncRoute 
+      <AsyncRoute
         exact
-        path="/" 
-        fetchUrl="https://api.github.com/repos/ghengeveld/react-async/contributors" 
-        component={Contributors} 
+        path="/"
+        fetchUrl="https://api.github.com/repos/ghengeveld/react-async/contributors"
+        component={Contributors}
       />
       <AsyncRoute
         path="/repositories"
diff --git a/examples/with-react-router/js/AsyncRoute.js b/examples/with-react-router/js/AsyncRoute.js
@@ -1,20 +1,21 @@
 import React from "react"
 import Async from "react-async"
-import { Route} from "react-router-dom"
+import { Route } from "react-router-dom"
 
 const loader = fetchUrl => () =>
   fetch(fetchUrl)
     .then(res => (res.ok ? res : Promise.reject(res)))
     .then(res => res.json())
 
 const AsyncRoute = ({ component: Component, fetchUrl, ...props }) => (
-  <Route {...props} render={props => (
-    <Async promiseFn={loader(fetchUrl)}>
-      {asyncState => (
-        <Component {...props} {...asyncState} />
-      )}
-    </Async>
-  )} />
+  <Route
+    {...props}
+    render={props => (
+      <Async promiseFn={loader(fetchUrl)} debugLabel={fetchUrl}>
+        {asyncState => <Component {...props} {...asyncState} />}
+      </Async>
+    )}
+  />
 )
 
-export default AsyncRoute
+export default AsyncRoute
diff --git a/examples/with-react-router/package.json b/examples/with-react-router/package.json
@@ -10,7 +10,8 @@
     "@babel/preset-react": "^7.0.0",
     "parcel-bundler": "^1.12.3",
     "react": "^16.8.5",
-    "react-async": "^5.1.2",
+    "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "^16.8.5",
     "react-router-dom": "^5.0.0"
   },
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
@@ -8,6 +8,7 @@
     "@types/react-dom": "^16.8.4",
     "react": "^16.8.6",
     "react-async": "latest",
+    "react-async-devtools": "latest",
     "react-dom": "^16.8.6",
     "react-scripts": "^3.0.1",
     "typescript": "^3.5.1"
diff --git a/examples/with-typescript/src/App.tsx b/examples/with-typescript/src/App.tsx
@@ -1,11 +1,13 @@
 import React, { Component } from "react"
 import Async from "react-async"
+import DevTools from "react-async-devtools"
 import "./App.css"
 
 class App extends Component {
   render() {
     return (
       <div className="App">
+        <DevTools />
         <header className="App-header">
           <Async promiseFn={() => Promise.resolve("foo")}>{({ data }) => <>{data}</>}</Async>
           <Async promiseFn={() => Promise.resolve("bar")}>
diff --git a/yarn.lock b/yarn.lock
