203fde92ac
* creating overview page and menu * styling the home page * adjusting breadcrumb * renaming isnt working * renaming isnt working * renaming isnt working * fixing import * fixing scroll when resize window * fixing eslint errors * prepending links * adding target option * refactoring * adding dark mode support * fixing prettier format * fixing i18n * reverting some unnecessary changes * addressing PR comments * fixing functional tests * ordering observability menu * fixing tests * addressing PR comments * fixing scroll * addressing pr comments * addressing pr comments * creating overview page * mocking data * mocking data * refactoring * crearting apm chart * adding overview page * adding metric charts * adding charts * changing mock data location * adding mock registry * adding date picker * adding route validation * adding io-ts * adding io-ts * adding io-ts support * fixing imports and mock data * adding app folder * creating a section for each plugin * adding stats * adding domain min max * refactoring xcoordinaters * fixing route * adding bucket size * adding group property on logs * adding home page * dont break page if location state is undefined * each component fetches its own data * Refactoring * adding loading indicator to chart * fixing uptime chart * adding brush functionality to charts * fixing refresh button and auto refresh function * adding horizontal line to accordion section * adding emptySection to dashboard page * adding add data button * adding resources section * removing margins from horizontal rule * changing min interval to 60s * fixing empty section * removing unnecessary code * adding unit tests * fixing imports * adding initial story book for observability * removeing uptime mock data * fixing xDomain to show correct data on x-axis * fixing empty state alignment * adding story book and other improvements * adding news component * adding support to custom colors on EuiProgress and EuiStats * removing infra mock data * adding error message when api throwns an error * adding alert section * Adding alerts * adding alert api call * addressing PR comments * adding storybook * adding feedback button * addressing PR comments * chamging plugins return data * fixing kibana app navigation * fixing unit test * fixing ts issues * addressing PR comments * using lodash truncate * adding comment * updating public documentation * fixing alerts request * fixing unit test * fixing unit test * aligin beta badge to the center * adding moment duration to get the units as seconds * addressing PR comments * addressing PR comments
85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
/*
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
* or more contributor license agreements. Licensed under the Elastic License;
|
|
* you may not use this file except in compliance with the Elastic License.
|
|
*/
|
|
|
|
import { useEffect, useState, useMemo } from 'react';
|
|
|
|
export enum FETCH_STATUS {
|
|
LOADING = 'loading',
|
|
SUCCESS = 'success',
|
|
FAILURE = 'failure',
|
|
PENDING = 'pending',
|
|
}
|
|
|
|
export interface FetcherResult<Data> {
|
|
data?: Data;
|
|
status: FETCH_STATUS;
|
|
error?: Error;
|
|
}
|
|
|
|
// fetcher functions can return undefined OR a promise. Previously we had a more simple type
|
|
// but it led to issues when using object destructuring with default values
|
|
type InferResponseType<TReturn> = Exclude<TReturn, undefined> extends Promise<infer TResponseType>
|
|
? TResponseType
|
|
: unknown;
|
|
|
|
export function useFetcher<TReturn>(
|
|
fn: () => TReturn,
|
|
fnDeps: any[],
|
|
options: {
|
|
preservePreviousData?: boolean;
|
|
} = {}
|
|
): FetcherResult<InferResponseType<TReturn>> & { refetch: () => void } {
|
|
const { preservePreviousData = true } = options;
|
|
|
|
const [result, setResult] = useState<FetcherResult<InferResponseType<TReturn>>>({
|
|
data: undefined,
|
|
status: FETCH_STATUS.PENDING,
|
|
});
|
|
const [counter, setCounter] = useState(0);
|
|
useEffect(() => {
|
|
async function doFetch() {
|
|
const promise = fn();
|
|
if (!promise) {
|
|
return;
|
|
}
|
|
|
|
setResult((prevResult) => ({
|
|
data: preservePreviousData ? prevResult.data : undefined,
|
|
status: FETCH_STATUS.LOADING,
|
|
error: undefined,
|
|
}));
|
|
|
|
try {
|
|
const data = await promise;
|
|
setResult({
|
|
data,
|
|
status: FETCH_STATUS.SUCCESS,
|
|
error: undefined,
|
|
} as FetcherResult<InferResponseType<TReturn>>);
|
|
} catch (e) {
|
|
setResult((prevResult) => ({
|
|
data: preservePreviousData ? prevResult.data : undefined,
|
|
status: FETCH_STATUS.FAILURE,
|
|
error: e,
|
|
}));
|
|
}
|
|
}
|
|
|
|
doFetch();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [counter, ...fnDeps]);
|
|
|
|
return useMemo(() => {
|
|
return {
|
|
...result,
|
|
refetch: () => {
|
|
// this will invalidate the deps to `useEffect` and will result in a new request
|
|
setCounter((count) => count + 1);
|
|
},
|
|
};
|
|
}, [result]);
|
|
}
|