Update examples to use new state model.

Author: ghengeveld

examples/basic-fetch/src/index.js

@@ -27,19 +27,19 @@ const UserDetails = ({ data }) => (
 const App = () => (
   <>
     <Async promiseFn={loadUser} userId={1}>
-      {({ data, error, isLoading }) => {
-        if (isLoading) return <UserPlaceholder />
+      {({ data, error, isPending }) => {
+        if (isPending) return <UserPlaceholder />
         if (error) return <p>{error.message}</p>
         if (data) return <UserDetails data={data} />
         return null
       }}
     </Async>
 
     <Async promiseFn={loadUser} userId={2}>
-      <Async.Loading>
+      <Async.Pending>
         <UserPlaceholder />
-      </Async.Loading>
-      <Async.Resolved>{data => <UserDetails data={data} />}</Async.Resolved>
+      </Async.Pending>
+      <Async.Fulfilled>{data => <UserDetails data={data} />}</Async.Fulfilled>
       <Async.Rejected>{error => <p>{error.message}</p>}</Async.Rejected>
     </Async>
   </>

examples/basic-hook/src/index.js

@@ -26,8 +26,8 @@ const UserDetails = ({ data }) => (
 )
 
 const User = ({ userId }) => {
-  const { data, error, isLoading } = useAsync({ promiseFn: loadUser, userId })
-  if (isLoading) return <UserPlaceholder />
+  const { data, error, isPending } = useAsync({ promiseFn: loadUser, userId })
+  if (isPending) return <UserPlaceholder />
   if (error) return <p>{error.message}</p>
   if (data) return <UserDetails data={data} />
   return null

examples/custom-instance/src/index.js

@@ -29,19 +29,19 @@ const UserDetails = ({ data }) => (
 const App = () => (
   <>
     <AsyncUser userId={1}>
-      {({ data, error, isLoading }) => {
-        if (isLoading) return <UserPlaceholder />
+      {({ 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.Loading>
+      <AsyncUser.Pending>
         <UserPlaceholder />
-      </AsyncUser.Loading>
-      <AsyncUser.Resolved>{data => <UserDetails data={data} />}</AsyncUser.Resolved>
+      </AsyncUser.Pending>
+      <AsyncUser.Fulfilled>{data => <UserDetails data={data} />}</AsyncUser.Fulfilled>
       <AsyncUser.Rejected>{error => <p>{error.message}</p>}</AsyncUser.Rejected>
     </AsyncUser>
   </>

examples/movie-app/src/App.js

@@ -62,14 +62,14 @@ const TopMovies = ({ handleSelect }) => (
       </span>
     </h1>
     <Async promiseFn={fetchMovies}>
-      <Async.Loading>
+      <Async.Pending>
         <p>Loading...</p>
-      </Async.Loading>
-      <Async.Resolved>
+      </Async.Pending>
+      <Async.Fulfilled>
         {movies =>
           movies.map(movie => <Movie {...movie} key={movie.id} onSelect={handleSelect(movie)} />)
         }
-      </Async.Resolved>
+      </Async.Fulfilled>
     </Async>
   </Fragment>
 )
@@ -99,10 +99,10 @@ const Details = ({ onBack, id }) => (
       </span>
     </button>
     <Async promiseFn={fetchMovieDetails} id={id} onResolve={console.log}>
-      <Async.Loading>
+      <Async.Pending>
         <p>Loading...</p>
-      </Async.Loading>
-      <Async.Resolved>
+      </Async.Pending>
+      <Async.Fulfilled>
         {movie => (
           <Fragment>
             <div className="main">
@@ -126,15 +126,15 @@ const Details = ({ onBack, id }) => (
             </div>
             <div className="reviews">
               <Async promiseFn={fetchMovieReviews} id={id} onResolve={console.log}>
-                <Async.Loading>
+                <Async.Pending>
                   <p>Loading...</p>
-                </Async.Loading>
-                <Async.Resolved>{reviews => reviews.map(Review)}</Async.Resolved>
+                </Async.Pending>
+                <Async.Fulfilled>{reviews => reviews.map(Review)}</Async.Fulfilled>
               </Async>
             </div>
           </Fragment>
         )}
-      </Async.Resolved>
+      </Async.Fulfilled>
     </Async>
   </div>
 )

examples/with-abortcontroller/src/index.js

@@ -9,11 +9,11 @@ const download = (args, props, controller) =>
     .then(res => res.json())
 
 const App = () => {
-  const { run, cancel, isLoading } = useAsync({ deferFn: download })
+  const { run, cancel, isPending } = useAsync({ deferFn: download })
   return (
     <>
-      {isLoading ? <button onClick={cancel}>cancel</button> : <button onClick={run}>start</button>}
-      {isLoading ? (
+      {isPending ? <button onClick={cancel}>cancel</button> : <button onClick={run}>start</button>}
+      {isPending ? (
         <p>Loading...</p>
       ) : (
         <p>Inspect network traffic to see requests being canceled.</p>

examples/with-nextjs/pages/index.js

@@ -20,10 +20,10 @@ class Hello extends React.Component {
     const { userId = 1 } = url.query
     return (
       <Async promiseFn={loadUser} userId={userId} watch={userId} initialValue={data}>
-        <Async.Loading>
+        <Async.Pending>
           <p>Loading...</p>
-        </Async.Loading>
-        <Async.Resolved>
+        </Async.Pending>
+        <Async.Fulfilled>
           {data => (
             <>
               <p>
@@ -43,7 +43,7 @@ class Hello extends React.Component {
               </p>
             </>
           )}
-        </Async.Resolved>
+        </Async.Fulfilled>
         <i>
           This data is initially loaded server-side, then client-side when navigating prev/next.
         </i>

examples/with-react-router/js/Contributors.js

@@ -1,7 +1,7 @@
 import React from "react"
 
-const Contributors = ({ data, error, isLoading }) => {
-  if (isLoading) return "Loading Contributers..."
+const Contributors = ({ data, error, isPending }) => {
+  if (isPending) return "Loading Contributers..."
   if (error) return "Error"
   return (
     <ul>
@@ -12,4 +12,4 @@ const Contributors = ({ data, error, isLoading }) => {
   )
 }
 
-export default Contributors
+export default Contributors

examples/with-react-router/js/Repositories.js

@@ -1,7 +1,7 @@
 import React from "react"
 
-const Repositories = ({ data, error, isLoading }) => {
-  if (isLoading) return "Loading Repositories..."
+const Repositories = ({ data, error, isPending }) => {
+  if (isPending) return "Loading Repositories..."
   if (error) return "Error"
   return (
     <ul>
@@ -12,4 +12,4 @@ const Repositories = ({ data, error, isLoading }) => {
   )
 }
 
-export default Repositories
+export default Repositories