update AsyncView to work with swr's loading flag and support nullable data payloads

Author: SirCotare

src/async-data/AsyncView.tsx

@@ -2,16 +2,25 @@ import React, { ReactElement, ReactNode } from 'react'
 import { isFunction } from '../util'
 
 type LoadingFunction = () => ReactNode
-type SuccessFunction<Data> = (data: NonNullable<Data>) => ReactNode
+type SuccessFunction<Data> = (data: Data) => ReactNode
 type ErrorFunction<Error> = (error: NonNullable<Error>) => ReactNode
 
 type Props<Data, Error> = {
   data?: Data
   error?: Error
+  isLoading: boolean
   renderLoading?: ReactNode | LoadingFunction
-  renderSuccess: ReactNode | SuccessFunction<Data>
   renderError?: ReactNode | ErrorFunction<Error>
-}
+} & (
+  | {
+      allowMissingData: true
+      renderSuccess: ReactNode | SuccessFunction<Data>
+    }
+  | {
+      allowMissingData?: false
+      renderSuccess: ReactNode | SuccessFunction<NonNullable<Data>>
+    }
+)
 
 const AsyncView = <Data, Error>(
   props: Props<Data, Error>,
@@ -20,19 +29,34 @@ const AsyncView = <Data, Error>(
   const {
     data,
     error,
+    isLoading,
     renderLoading = null,
     renderSuccess,
     renderError = null,
+    allowMissingData = false,
   } = props
+
+  if (isLoading) {
+    return <>{isFunction(renderLoading) ? renderLoading() : renderLoading}</>
+  }
+
   if (error !== null && error !== undefined) {
     return <>{isFunction(renderError) ? renderError(error) : renderError}</>
-  } else if (data !== null && data !== undefined) {
-    return (
-      <>{isFunction(renderSuccess) ? renderSuccess(data) : renderSuccess}</>
+  }
+
+  if ((data === undefined || data === null) && !allowMissingData) {
+    throw new Error(
+      'Data passed into AsyncView was null or undefined. Use allowMissingData=true if this is intended.',
     )
-  } else {
-    return <>{isFunction(renderLoading) ? renderLoading() : renderLoading}</>
   }
+
+  return (
+    <>
+      {isFunction(renderSuccess)
+        ? renderSuccess(data as NonNullable<Data>)
+        : renderSuccess}
+    </>
+  )
 }
 
 export { AsyncView }