Skip to content
Permalink
Browse files

Update examples to use new state model.

  • Loading branch information...
ghengeveld committed Mar 29, 2019
1 parent 2885747 commit ff1ac2e497a75fa365b459f17bd7f8c954505ac1
@@ -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>
</>
@@ -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
@@ -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>
</>
@@ -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>
)
@@ -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>
@@ -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>
@@ -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
@@ -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

0 comments on commit ff1ac2e

Please sign in to comment.
You can’t perform that action at this time.