Merging async-data into this package

Author: alexlanz

readme.md

@@ -8,14 +8,15 @@ This package includes different tools that support you with common tasks.
 - [Usage](#usage)
 - [Build & Publish](#build--publish)
   - [useInterval](#useinterval)
+  - [Async Data](#async-data)
 - [Information](#information)
 
 ## Usage
 
 First, you have to install the package:
 
 ```bash
-npm install @aboutbits/react-tooling
+npm install @aboutbits/react-toolbox
 ```
 
 Second, you can make use of the different tools.
@@ -29,9 +30,9 @@ The hook takes two parameters:
 - `callback`: The callback function that should be executed.
 - `delay`: The delay in milliseconds or null, if the interval should be paused.
 
-```jsx
+```tsx
 import React, { useState } from 'react'
-import { useInterval } from '@aboutbits/react-tooling'
+import { useInterval } from '@aboutbits/react-toolbox'
 
 const MyCommponent = () => {
   const [step, setStep] = useState(10)
@@ -44,6 +45,72 @@ const MyCommponent = () => {
 }
 ``` 
 
+### Async Data
+
+This part includes a utility component, that can be used to render loading, success and error views based on async state.
+
+```tsx
+import React, { useEffect } from 'react'
+import { AsyncView } from '@aboutbits/react-toolbox'
+
+type Data = {
+    greeting: string
+}
+
+type Error = {
+    message: string
+}
+
+const MyCommponent = () => {
+    const [data, setData] = useState<Data | undefined>()
+    const [error, setError] = useState<Error | undefined>()
+
+    useEffect(() => {
+        fetch('https://jsonplaceholder.typicode.com/todos/1')
+            .then(response => setData(response.json()))
+            .catch(error => setError(error))
+    })
+
+    return (
+        <AsyncView
+            data={data}
+            error={error}
+            renderLoading={<div>Loading</div>}
+            renderSuccess={(data) => <div>{data.greeting}</div>}
+            renderError={(error) => <div>{error.message}</div>} />
+    );
+}
+```
+
+And using SWR:
+
+```tsx
+import React, { useEffect } from 'react'
+import { useSWR } from 'swr'
+import { AsyncView } from '@aboutbits/react-toolbox'
+
+type Data = {
+    greeting: string
+}
+
+type Error = {
+    message: string
+}
+
+const MyCommponent = () => {
+    const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/1')
+    
+    return (
+        <AsyncView
+            data={data}
+            error={error}
+            renderLoading={'Loading'}
+            renderSuccess={'Success'}
+            renderError={'Error'} />
+    );
+}
+``` 
+
 ## Build & Publish
 
 To publish the package commit all changes and push them to main. Then run one of the following commands locally:
@@ -64,6 +131,7 @@ For support, please contact [info@aboutbits.it](mailto:info@aboutbits.it).
 
 ### Credits
 
+- [Martin Malfertheiner](https://github.com/mmalfertheiner)
 - [Alex Lanz](https://github.com/alexlanz)
 - [All Contributors](../../contributors)
 

src/async-data/AsyncView.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { isFunction } from '../util'
+import { AsyncState } from '../index'
+import { getAsyncState } from './asyncState'
+
+type LoadingFunction = () => React.ReactElement<any, any> | null
+type SuccessFunction<Data> = (data: Data) => React.ReactElement<any, any> | null
+type ErrorFunction<Error> = (
+  error: Error
+) => React.ReactElement<any, any> | null
+
+type Props<Data, Error> = {
+  data?: Data
+  error?: Error
+  renderLoading?: React.ReactNode | LoadingFunction
+  renderSuccess: React.ReactNode | SuccessFunction<Data>
+  renderError?: React.ReactNode | ErrorFunction<Error>
+}
+
+const AsyncView = <Data, Error>(
+  props: Props<Data, Error>
+): React.ReactElement<any, any> | null => {
+  const {
+    data,
+    error,
+    renderLoading = null,
+    renderSuccess,
+    renderError = null,
+  } = props
+  const asyncState = getAsyncState(data, error)
+
+  switch (asyncState) {
+    case AsyncState.FETCHING:
+      return isFunction(renderLoading) ? renderLoading() : <>{renderLoading}</>
+    case AsyncState.FINISHED_WITH_SUCCESS:
+      return isFunction(renderSuccess) ? (
+        renderSuccess(data as Data)
+      ) : (
+        <>{renderSuccess}</>
+      )
+    case AsyncState.FINISHED_WITH_ERROR:
+      return isFunction(renderError) ? renderError(error) : <>{renderError}</>
+  }
+}
+
+export { AsyncView }

src/async-data/__test__/AsyncView.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+import { AsyncView } from '../AsyncView'
+
+type Data = {
+  greeting: string
+}
+
+type Error = {
+  message: string
+}
+
+const Loading: React.FC = () => {
+  return <>Loading</>
+}
+
+const Success: React.FC<{ data: Data }> = ({ data }) => {
+  return <>{data.greeting}</>
+}
+
+const Error: React.FC<{ error: Error }> = ({ error }) => {
+  return <>{error.message}</>
+}
+
+function renderAsyncView(data?: Data, error?: Error): RenderResult {
+  return render(
+    <AsyncView<Data, Error>
+      data={data}
+      error={error}
+      renderLoading={<Loading />}
+      renderSuccess={(data) => <Success data={data} />}
+      renderError={(error) => <Error error={error} />}
+    />
+  )
+}
+
+test('should render loading if asyncState is loading for the first time', function () {
+  const { getByText } = renderAsyncView()
+  expect(getByText(/loading/i)).toBeInTheDocument()
+})
+
+test('should render success if asyncState is successful', function () {
+  const { getByText } = renderAsyncView({ greeting: 'Hello' })
+  expect(getByText(/hello/i)).toBeInTheDocument()
+})
+
+test('should render error if asyncState is error', function () {
+  const { getByText } = renderAsyncView(undefined, { message: 'Error' })
+  expect(getByText(/error/i)).toBeInTheDocument()
+})

src/async-data/__test__/asyncState.test.ts

@@ -0,0 +1,32 @@
+import { AsyncState, getAsyncState } from '../asyncState'
+
+test('given no data and no error, than it should return fetching state', function () {
+  const result = getAsyncState(null, null)
+
+  expect(result).toBe(AsyncState.FETCHING)
+})
+
+test('given data and no error, than it should return success state', function () {
+  const data = { greeting: 'Hello World!' }
+  const result = getAsyncState(data, null)
+
+  expect(result).toBe(AsyncState.FINISHED_WITH_SUCCESS)
+})
+
+test('given no data, but an error, than it should return error state', function () {
+  const result = getAsyncState(null, 'Error')
+
+  expect(result).toBe(AsyncState.FINISHED_WITH_ERROR)
+})
+
+test('given data and an error, than it should return error state', function () {
+  const result = getAsyncState('Some Data', 'Error')
+
+  expect(result).toBe(AsyncState.FINISHED_WITH_ERROR)
+})
+
+test('given empty string as data, than it should return success state', function () {
+  const result = getAsyncState('', null)
+
+  expect(result).toBe(AsyncState.FINISHED_WITH_SUCCESS)
+})

src/async-data/asyncState.ts

@@ -0,0 +1,17 @@
+enum AsyncState {
+  FETCHING,
+  FINISHED_WITH_ERROR,
+  FINISHED_WITH_SUCCESS,
+}
+
+const getAsyncState = (data: unknown, error: unknown): AsyncState => {
+  if (error != null && error != undefined) {
+    return AsyncState.FINISHED_WITH_ERROR
+  } else if (data != null && data != undefined) {
+    return AsyncState.FINISHED_WITH_SUCCESS
+  } else {
+    return AsyncState.FETCHING
+  }
+}
+
+export { AsyncState, getAsyncState }

src/index.ts

@@ -1,3 +1,5 @@
-import { useInterval } from './useInterval'
+import { useInterval } from './useInterval/useInterval'
+import { AsyncState, getAsyncState } from './async-data/asyncState'
+import { AsyncView } from './async-data/AsyncView'
 
-export { useInterval }
+export { useInterval, AsyncState, getAsyncState, AsyncView }

src/__test__/useInterval.test.tsx …seInterval/__test__/useInterval.test.tsxsrc/__test__/useInterval.test.tsx renamed to src/useInterval/__test__/useInterval.test.tsx src/__test__/useInterval.test.tsx renamed to src/useInterval/__test__/useInterval.test.tsx

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (obj: unknown): obj is Function =>
+  typeof obj === 'function'