BlankSlate
2 years ago
BulkActions
11 months ago
CustomFilter
11 months ago
Filters
11 months ago
Input
11 months ago
InterweaveSSR
11 months ago
ListTable
11 months ago
ListTableHeaders
11 months ago
ListTablePage
11 months ago
ListTableRows
11 months ago
ListTableStats
11 months ago
Pagination
11 months ago
ProductRecommendations
11 months ago
RowAction
11 months ago
Select
11 months ago
TableCell
11 months ago
ToggleSwitch
11 months ago
hooks
1 year ago
README.MD
3 years ago
api.ts
11 months ago
api.ts
87 lines
| 1 | import useSWR from 'swr'; |
| 2 | import lagData from './hooks/lagData'; |
| 3 | import useFallbackAsInitial from '@givewp/components/ListTable/hooks/useFallbackAsInitial'; |
| 4 | |
| 5 | export default class ListTableApi { |
| 6 | private readonly apiRoot: string; |
| 7 | private controller: AbortController | null; |
| 8 | private readonly headers: {'X-WP-Nonce': string; 'Content-Type': string}; |
| 9 | private readonly swrOptions; |
| 10 | |
| 11 | constructor({apiNonce, apiRoot, preload = null, swrConfig = {}}) { |
| 12 | this.controller = null; |
| 13 | this.apiRoot = apiRoot; |
| 14 | this.headers = { |
| 15 | 'Content-Type': 'application/json', |
| 16 | 'X-WP-Nonce': apiNonce, |
| 17 | }; |
| 18 | this.swrOptions = { |
| 19 | use: [lagData], |
| 20 | ...swrConfig, |
| 21 | onErrorRetry: (error, key, config, revalidate, {retryCount}) => { |
| 22 | //don't retry if we cancelled the initial request |
| 23 | if (error.name == 'AbortError') return; |
| 24 | if (retryCount >= 5) return; |
| 25 | const retryAfter = (retryCount + 1) * 500; |
| 26 | setTimeout(() => revalidate({retryCount}), retryAfter); |
| 27 | }, |
| 28 | }; |
| 29 | if (preload) { |
| 30 | this.swrOptions.fallbackData = preload; |
| 31 | this.swrOptions.use.push(useFallbackAsInitial); |
| 32 | } |
| 33 | } |
| 34 | |
| 35 | fetchWithArgs = (endpoint, args, method = 'GET', signal = null) => { |
| 36 | const url = new URL(this.apiRoot + endpoint); |
| 37 | for (const [param, value] of Object.entries(args)) { |
| 38 | value !== '' && url.searchParams.set(param, value as string); |
| 39 | } |
| 40 | return fetch(url.href, { |
| 41 | method: method, |
| 42 | signal: signal, |
| 43 | headers: this.headers, |
| 44 | }).then((res) => { |
| 45 | if (!res.ok) { |
| 46 | return res.text().then((errorMessage) => { |
| 47 | throw new Error(errorMessage); |
| 48 | }); |
| 49 | } |
| 50 | return res.json(); |
| 51 | }); |
| 52 | }; |
| 53 | |
| 54 | fetcher = (params) => { |
| 55 | if (this.controller instanceof AbortController) this.controller.abort(); |
| 56 | this.controller = new AbortController(); |
| 57 | return this.fetchWithArgs('', params, 'GET', this.controller.signal); |
| 58 | }; |
| 59 | |
| 60 | // SWR Fetcher |
| 61 | useListTable = ({page, perPage, sortColumn, sortDirection, locale, testMode, ...filters}) => { |
| 62 | const {data, error, mutate, isValidating} = useSWR( |
| 63 | { |
| 64 | page, |
| 65 | perPage, |
| 66 | sortColumn, |
| 67 | sortDirection, |
| 68 | locale, |
| 69 | testMode, |
| 70 | ...filters, |
| 71 | }, |
| 72 | this.fetcher, |
| 73 | this.swrOptions |
| 74 | ); |
| 75 | return {data, error, mutate, isValidating}; |
| 76 | }; |
| 77 | |
| 78 | useStats = (testMode) => { |
| 79 | const {data, error, mutate, isValidating} = useSWR( |
| 80 | {testMode}, |
| 81 | (params) => this.fetchWithArgs('/stats', params, 'GET'), |
| 82 | this.swrOptions |
| 83 | ); |
| 84 | return {data, error, mutate, isValidating}; |
| 85 | }; |
| 86 | } |
| 87 |