-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
15 changed files
with
173 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React, { useState } from 'react' | ||
| import { useLoadingEffect } from './api-utils' | ||
| import { render, screen, waitFor } from '@testing-library/react' | ||
|
|
||
| const LoadingTestComponent = () => { | ||
| const [loadedList, setLoadedList] = useState<string[]>([]) | ||
| const { isLoading } = useLoadingEffect(async () => { | ||
| const response = await Promise.resolve(['item1']) | ||
| setLoadedList(response) | ||
| }) | ||
| return <div> | ||
| {!isLoading && <ul> | ||
| {loadedList.map(item => <li key={item}>{item}</li>)} | ||
| </ul>} | ||
| {isLoading && <span>LOADING</span>} | ||
| </div> | ||
| } | ||
|
|
||
| describe('useLoadingEffect handles loading state', () => { | ||
| it('manages isLoading', async () => { | ||
| render(<LoadingTestComponent/>) | ||
| expect(screen.getByText('LOADING')).toBeInTheDocument() | ||
| await waitFor(() => expect(screen.getByText('item1')).toBeInTheDocument()) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useEffect, useState } from 'react' | ||
| import { failureNotification } from 'util/notifications' | ||
| import { Store } from 'react-notifications-component' | ||
|
|
||
| export type ApiErrorResponse = { | ||
| message: string, | ||
| statusCode: number | ||
| } | ||
|
|
||
| const errorSuffix = 'If this error persists, please contact [email protected]' | ||
|
|
||
| /** | ||
| * performs default error message alerting if an error occurs during an API request. | ||
| * shows a specific error message if the error is auth-related. | ||
| */ | ||
| export const defaultApiErrorHandle = (error: ApiErrorResponse, | ||
| errorHeader = 'An unexpected error occurred. ') => { | ||
| if (error.statusCode === 401 || error.statusCode === 403) { | ||
| Store.addNotification(failureNotification(<div> | ||
| <div>{errorHeader}</div> | ||
| <div>Request could not be authorized | ||
| -- you may need to log in again </div> | ||
| <div>{errorSuffix}</div> | ||
| </div> | ||
| )) | ||
| } else { | ||
| Store.addNotification(failureNotification(<div> | ||
| <div>{errorHeader}</div> | ||
| <div>{error.message}</div> | ||
| <div>{errorSuffix}</div> | ||
| </div> | ||
| )) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * utility effect for components that want to load something from the API on first render. | ||
| * returns loading and error state, as well as a function that can be called to reload. | ||
| */ | ||
| export const useLoadingEffect = (loadingFunc: () => Promise<unknown>, | ||
| deps: unknown[] = [], customErrorMsg?: string) => { | ||
| const [isLoading, setIsLoading] = useState(true) | ||
| const [isError, setIsError] = useState(false) | ||
| const reload = () => doApiLoad(loadingFunc, { setIsError, customErrorMsg, setIsLoading }) | ||
|
|
||
| useEffect(() => { | ||
| reload() | ||
| }, deps) | ||
| return { isLoading, isError, reload } | ||
| } | ||
|
|
||
| /** | ||
| * utility function for wrapping an Api call in loading and error handling | ||
| */ | ||
| export const doApiLoad = async (loadingFunc: () => Promise<unknown>, | ||
| opts: { | ||
| setIsLoading?: (isLoading: boolean) => void, | ||
| setIsError?: (isError: boolean) => void, | ||
| customErrorMsg?: string | ||
| } = {}) => { | ||
| if (opts.setIsLoading) { opts.setIsLoading(true) } | ||
| try { | ||
| await loadingFunc() | ||
| if (opts.setIsError) { opts.setIsError(false) } | ||
| } catch (e) { | ||
| defaultApiErrorHandle(e as ApiErrorResponse, opts.customErrorMsg) | ||
| if (opts.setIsError) { opts.setIsError(true) } | ||
| } | ||
| if (opts.setIsLoading) { opts.setIsLoading(false) } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.