diff --git a/package.json b/package.json index b4b4152..fc4ffab 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react": "^17.0.2", "react-datetime": "^3.0.4", "react-dom": "^17.0.2", + "react-query": "^3.34.12", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-virtualized-auto-sizer": "^1.0.5", diff --git a/src/App.tsx b/src/App.tsx index 92d6389..219ecac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,21 +7,28 @@ import { Route, Redirect, } from "react-router-dom"; +import { QueryClient, QueryClientProvider } from "react-query"; +import { ReactQueryDevtools } from "react-query/devtools"; import Home from "./pages/Home"; import theme from "./theme"; +const queryClient = new QueryClient(); + export const App: React.FC = () => ( - - - - - - - - - - - - + + + + + + + + + + + + + + + ); diff --git a/src/components/GraphWrapper/graphWrapper.test.tsx b/src/components/GraphWrapper/graphWrapper.test.tsx index ae58cd1..8a39168 100644 --- a/src/components/GraphWrapper/graphWrapper.test.tsx +++ b/src/components/GraphWrapper/graphWrapper.test.tsx @@ -12,8 +12,11 @@ import { queryEntities } from "../../services/queryEntity"; import constants from "../../utils/constants"; import { useGlobalStore } from "../../store/global"; -const { defaultStartTimestamp, defaultStepValue, defaultEndTimestamp } = - constants; +const { + defaultStartTimestamp, + defaultStepValue, + defaultEndTimestamp, +} = constants; const TestComponent = () => { const { changeRoute } = useGlobalStore(); diff --git a/src/components/GraphWrapper/index.tsx b/src/components/GraphWrapper/index.tsx index fea4ba4..dc62896 100644 --- a/src/components/GraphWrapper/index.tsx +++ b/src/components/GraphWrapper/index.tsx @@ -20,10 +20,16 @@ interface PageProps { const GraphWrapper: React.FC = (props: PageProps) => { const { selectedRoutePath } = props; - const { selectedStartTimestamp, selectedEndTimestamp, selectedStepValue } = - useTimeQuerierStore(); + const { + selectedStartTimestamp, + selectedEndTimestamp, + selectedStepValue, + } = useTimeQuerierStore(); - const { data, error, status } = useFetch>( + const { data, error, isLoading, isFetching, isError } = useFetch< + apiResponse + >( + "graph", queryEntities( selectedRoutePath, selectedStartTimestamp, @@ -32,7 +38,7 @@ const GraphWrapper: React.FC = (props: PageProps) => { ) ); - if (error) { + if (isError) { return ( = (props: PageProps) => { > - {error} + {error?.response?.data} An unexpected error occurred while processing the graph. @@ -57,7 +63,7 @@ const GraphWrapper: React.FC = (props: PageProps) => { ); } - if (status === "fetching" || status === "init") + if (isLoading || isFetching) return ( @@ -90,7 +96,7 @@ const GraphWrapper: React.FC = (props: PageProps) => { return ( - + ); diff --git a/src/components/MachineSelector/index.tsx b/src/components/MachineSelector/index.tsx index 9b1acce..42c61df 100644 --- a/src/components/MachineSelector/index.tsx +++ b/src/components/MachineSelector/index.tsx @@ -13,36 +13,38 @@ import { apiResponse, machineResponse } from "../../utils/types"; const MachineSelector: React.FC = () => { const { selectedMachine, changeSelectedMachine } = useGlobalStore(); - const { data, error, status } = useFetch>( - getActiveMachines() - ); - const machines = data ? data.data.machines : []; + const { data, error, isFetching, isLoading, isError, isFetched } = useFetch< + apiResponse + >("machines", getActiveMachines()); + + const machines = data ? data.data.data.machines : []; useEffect(() => { if (machines.length) changeSelectedMachine(machines[0]); }, [data]); - if (error) { + if (isError) { return ( - {error} + {error?.response?.data} ); } - if (status === "fetching" || status === "init") { + if (isFetching || isLoading) { return ( ); } + return (