Implement 'status' prop and 'isPending', 'isFulfilled' and 'isRejected' booleans.

Author: ghengeveld

README.md

@@ -382,7 +382,10 @@ is set to `"application/json"`.
 - `data` Last resolved promise value, maintained when new error arrives.
 - `error` Rejected promise reason, cleared when new data arrives.
 - `initialValue` The data or error that was provided through the `initialValue` prop.
-- `isLoading` Whether or not a Promise is currently pending.
+- `isPending` true when no promise has ever started, or one started but was cancelled.
+- `isLoading` true when a promise is currently awaiting settlement.
+- `isResolved` true when the last promise was fulfilled with a value.
+- `isRejected` true when the last promise was rejected with a reason.
 - `startedAt` When the current/last promise was started.
 - `finishedAt` When the last promise was resolved or rejected.
 - `counter` The number of times a promise was started.

src/Async.js

@@ -83,7 +83,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
         this.abortController = new window.AbortController()
       }
       this.counter++
-      this.dispatch({ type: actionTypes.start, meta: { counter: this.counter } })
+      this.mounted && this.dispatch({ type: actionTypes.start, meta: { counter: this.counter } })
     }
 
     load() {
@@ -118,7 +118,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     cancel() {
       this.counter++
       this.abortController.abort()
-      this.dispatch({ type: actionTypes.cancel, meta: { counter: this.counter } })
+      this.mounted && this.dispatch({ type: actionTypes.cancel, meta: { counter: this.counter } })
     }
 
     onResolve(counter) {

src/index.d.ts

@@ -20,13 +20,16 @@ export interface AsyncProps<T> extends AsyncOptions<T> {
   children?: AsyncChildren<T>
 }
 
-export interface AsyncState<T> {
+interface AbstractState<T> {
   data?: T
   error?: Error
   initialValue?: T
-  isLoading: boolean
   startedAt?: Date
   finishedAt?: Date
+  isPending: boolean
+  isLoading: boolean
+  isFulfilled: boolean
+  isRejected: boolean
   counter: number
   cancel: () => void
   run: (...args: any[]) => Promise<T>
@@ -35,6 +38,12 @@ export interface AsyncState<T> {
   setError: (error: Error, callback?: () => void) => Error
 }
 
+export type AsyncPending<T> = AbstractState<T> & { status: "pending" }
+export type AsyncLoading<T> = AbstractState<T> & { status: "loading" }
+export type AsyncFulfilled<T> = AbstractState<T> & { status: "fulfilled"; data: T }
+export type AsyncRejected<T> = AbstractState<T> & { status: "rejected"; error: Error }
+export type AsyncState<T> = AsyncPending<T> | AsyncLoading<T> | AsyncFulfilled<T> | AsyncRejected<T>
+
 declare class Async<T> extends React.Component<AsyncProps<T>, AsyncState<T>> {}
 
 declare namespace Async {

src/index.js

@@ -2,3 +2,4 @@ import Async from "./Async"
 export { createInstance } from "./Async"
 export { default as useAsync, useFetch } from "./useAsync"
 export default Async
+export { statusTypes } from "./status"

src/reducer.js

@@ -1,3 +1,5 @@
+import { getInitialStatus, getIdleStatus, getStatusProps, statusTypes } from "./status"
+
 export const actionTypes = {
   start: "start",
   cancel: "cancel",
@@ -9,9 +11,9 @@ export const init = ({ initialValue, promise, promiseFn }) => ({
   initialValue,
   data: initialValue instanceof Error ? undefined : initialValue,
   error: initialValue instanceof Error ? initialValue : undefined,
-  isLoading: !!promise || (promiseFn && !initialValue),
   startedAt: promise || promiseFn ? new Date() : undefined,
   finishedAt: initialValue ? new Date() : undefined,
+  ...getStatusProps(getInitialStatus(initialValue, promise || promiseFn)),
   counter: 0,
 })
 
@@ -20,32 +22,32 @@ export const reducer = (state, { type, payload, meta }) => {
     case actionTypes.start:
       return {
         ...state,
-        isLoading: true,
         startedAt: new Date(),
         finishedAt: undefined,
+        ...getStatusProps(statusTypes.loading),
         counter: meta.counter,
       }
     case actionTypes.cancel:
       return {
         ...state,
-        isLoading: false,
         startedAt: undefined,
+        ...getStatusProps(getIdleStatus(state.error || state.data)),
         counter: meta.counter,
       }
     case actionTypes.fulfill:
       return {
         ...state,
         data: payload,
         error: undefined,
-        isLoading: false,
         finishedAt: new Date(),
+        ...getStatusProps(statusTypes.fulfilled),
       }
     case actionTypes.reject:
       return {
         ...state,
         error: payload,
-        isLoading: false,
         finishedAt: new Date(),
+        ...getStatusProps(statusTypes.rejected),
       }
   }
 }

src/status.js

@@ -0,0 +1,27 @@
+export const statusTypes = {
+  pending: "pending",
+  loading: "loading",
+  fulfilled: "fulfilled",
+  rejected: "rejected",
+}
+
+export const getInitialStatus = (value, promise) => {
+  if (value instanceof Error) return statusTypes.rejected
+  if (value !== undefined) return statusTypes.fulfilled
+  if (promise) return statusTypes.loading
+  return statusTypes.pending
+}
+
+export const getIdleStatus = value => {
+  if (value instanceof Error) return statusTypes.rejected
+  if (value !== undefined) return statusTypes.fulfilled
+  return statusTypes.pending
+}
+
+export const getStatusProps = status => ({
+  status,
+  isPending: status === statusTypes.pending,
+  isLoading: status === statusTypes.loading,
+  isFulfilled: status === statusTypes.fulfilled,
+  isRejected: status === statusTypes.rejected,
+})

src/status.spec.js

@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+
+import "jest-dom/extend-expect"
+
+import { getInitialStatus, getIdleStatus, statusTypes } from "./status"
+
+describe("getInitialStatus", () => {
+  test("returns 'pending' when given an undefined value", () => {
+    expect(getInitialStatus(undefined)).toEqual(statusTypes.pending)
+  })
+  test("returns 'loading' when given only a promise", () => {
+    expect(getInitialStatus(undefined, Promise.resolve("foo"))).toEqual(statusTypes.loading)
+  })
+  test("returns 'rejected' when given an Error value", () => {
+    expect(getInitialStatus(new Error("oops"))).toEqual(statusTypes.rejected)
+  })
+  test("returns 'fulfilled' when given any other value", () => {
+    expect(getInitialStatus(null)).toEqual(statusTypes.fulfilled)
+  })
+})
+
+describe("getIdleStatus", () => {
+  test("returns 'pending' when given an undefined value", () => {
+    expect(getIdleStatus(undefined)).toEqual(statusTypes.pending)
+  })
+  test("returns 'rejected' when given an Error value", () => {
+    expect(getIdleStatus(new Error("oops"))).toEqual(statusTypes.rejected)
+  })
+  test("returns 'fulfilled' when given any other value", () => {
+    expect(getIdleStatus(null)).toEqual(statusTypes.fulfilled)
+  })
+})

src/useAsync.js

@@ -42,7 +42,7 @@ const useAsync = (arg1, arg2) => {
       abortController.current = new window.AbortController()
     }
     counter.current++
-    dispatch({ type: actionTypes.start, meta: { counter: counter.current } })
+    isMounted.current && dispatch({ type: actionTypes.start, meta: { counter: counter.current } })
   }
 
   const load = () => {
@@ -75,7 +75,7 @@ const useAsync = (arg1, arg2) => {
   const cancel = () => {
     counter.current++
     abortController.current.abort()
-    dispatch({ type: actionTypes.cancel, meta: { counter: counter.current } })
+    isMounted.current && dispatch({ type: actionTypes.cancel, meta: { counter: counter.current } })
   }
 
   useEffect(() => {
@@ -91,18 +91,14 @@ const useAsync = (arg1, arg2) => {
   useEffect(() => () => abortController.current.abort(), [])
   useEffect(() => (prevOptions.current = options) && undefined)
 
-  useDebugValue(state, ({ startedAt, finishedAt, error }) => {
-    if (startedAt && (!finishedAt || finishedAt < startedAt)) return `[${counter.current}] Loading`
-    if (finishedAt) return error ? `[${counter.current}] Rejected` : `[${counter.current}] Resolved`
-    return `[${counter.current}] Pending`
-  })
+  useDebugValue(state, ({ status }) => `[${counter.current}] ${status}`)
 
   return useMemo(
     () => ({
       ...state,
+      cancel,
       run,
       reload: () => (lastArgs.current ? run(...lastArgs.current) : load()),
-      cancel,
       setData,
       setError,
     }),
@@ -131,11 +127,7 @@ const useAsyncFetch = (input, init, { defer, json, ...options } = {}) => {
       [JSON.stringify(input), JSON.stringify(init)]
     ),
   })
-  useDebugValue(state, ({ startedAt, finishedAt, error, counter }) => {
-    if (startedAt && (!finishedAt || finishedAt < startedAt)) return `[${counter}] Loading`
-    if (finishedAt) return error ? `[${counter}] Rejected` : `[${counter}] Resolved`
-    return `[${counter}] Pending`
-  })
+  useDebugValue(state, ({ counter, status }) => `[${counter}] ${status}`)
   return state
 }