From b6f152bb7b2991931130713bd8f1822cac384099 Mon Sep 17 00:00:00 2001
From: Mohammad Imran <imrancrazy200@gmail.com>
Date: Wed, 26 Jan 2022 17:36:58 +0530
Subject: [PATCH 1/2] fix: prettier errors

---
 src/components/GraphWrapper/graphWrapper.test.tsx   | 7 +++++--
 src/components/GraphWrapper/index.tsx               | 7 +++++--
 src/components/RouteSelector/routeSelector.test.tsx | 7 ++-----
 src/components/TimeQuerier/index.tsx                | 7 +++++--
 src/theme/components/DateTime.ts                    | 7 +++----
 5 files changed, 20 insertions(+), 15 deletions(-)

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..9b99864 100644
--- a/src/components/GraphWrapper/index.tsx
+++ b/src/components/GraphWrapper/index.tsx
@@ -20,8 +20,11 @@ interface PageProps {
 
 const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
   const { selectedRoutePath } = props;
-  const { selectedStartTimestamp, selectedEndTimestamp, selectedStepValue } =
-    useTimeQuerierStore();
+  const {
+    selectedStartTimestamp,
+    selectedEndTimestamp,
+    selectedStepValue,
+  } = useTimeQuerierStore();
 
   const { data, error, status } = useFetch<apiResponse<queryResponse>>(
     queryEntities(
diff --git a/src/components/RouteSelector/routeSelector.test.tsx b/src/components/RouteSelector/routeSelector.test.tsx
index 9718198..1141faf 100644
--- a/src/components/RouteSelector/routeSelector.test.tsx
+++ b/src/components/RouteSelector/routeSelector.test.tsx
@@ -8,11 +8,8 @@ import { getRoutes } from "../../services/getRoutes";
 import { truncate } from "../../utils/stringManipulation";
 
 jest.mock("axios");
-jest.mock(
-  "react-virtualized-auto-sizer",
-  () =>
-    ({ children }: any) =>
-      children({ height: 600, width: 600 })
+jest.mock("react-virtualized-auto-sizer", () => ({ children }: any) =>
+  children({ height: 600, width: 600 })
 );
 
 const mockedAxios = axios as jest.Mocked<typeof axios>;
diff --git a/src/components/TimeQuerier/index.tsx b/src/components/TimeQuerier/index.tsx
index 7aa7060..e01d034 100644
--- a/src/components/TimeQuerier/index.tsx
+++ b/src/components/TimeQuerier/index.tsx
@@ -20,8 +20,11 @@ import { useTimeQuerierStore } from "../../store/timeQuerier";
 
 const TimeQuerier: React.FC = () => {
   const styles = useStyleConfig("DateTime", {});
-  const { selectedStartTimestamp, selectedEndTimestamp, changeTimeQuerier } =
-    useTimeQuerierStore();
+  const {
+    selectedStartTimestamp,
+    selectedEndTimestamp,
+    changeTimeQuerier,
+  } = useTimeQuerierStore();
   const { defaultStepValue, minStepValue, dateFormat, timeFormat } = constants;
   const [startTime, setStartTime] = useState(moment(selectedStartTimestamp));
   const [endTime, setEndTime] = useState(moment(selectedEndTimestamp));
diff --git a/src/theme/components/DateTime.ts b/src/theme/components/DateTime.ts
index aa89ac5..6e42c43 100644
--- a/src/theme/components/DateTime.ts
+++ b/src/theme/components/DateTime.ts
@@ -26,10 +26,9 @@ export const DateTime = {
     },
     ".rdtPicker td.rdtDay:hover,.rdtPicker thead tr:first-of-type th:hover\
     ,.rdtPicker .rdtTimeToggle:hover,.rdtCounter .rdtBtn:hover\
-    ,td.rdtMonth:hover, td.rdtYear:hover,.rdtSwitch:hover":
-      {
-        bg: mode("#eee", "darkPrimary")(props),
-      },
+    ,td.rdtMonth:hover, td.rdtYear:hover,.rdtSwitch:hover": {
+      bg: mode("#eee", "darkPrimary")(props),
+    },
     ".rdtPicker td.rdtDisabled:hover": {
       bg: "none",
     },

From 7f2ad67c7f51f676e01a8cc82b9d1ca4d4720394 Mon Sep 17 00:00:00 2001
From: Mohammad Imran <imrancrazy200@gmail.com>
Date: Thu, 27 Jan 2022 09:04:38 +0530
Subject: [PATCH 2/2] feat: migrate useFetch to react-query

---
 package.json                             |   1 +
 src/App.tsx                              |  31 ++++---
 src/components/GraphWrapper/index.tsx    |  13 +--
 src/components/MachineSelector/index.tsx |  18 ++--
 src/components/RouteSelector/index.tsx   |  18 ++--
 src/utils/customRender.tsx               |   9 +-
 src/utils/useFetch.ts                    | 100 ++---------------------
 yarn.lock                                |  83 +++++++++++++++++++
 8 files changed, 148 insertions(+), 125 deletions(-)

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 = () => (
-  <ChakraProvider theme={theme}>
-    <Router>
-      <BasicLayout>
-        <Switch>
-          <Route exact path="/">
-            <Home />
-          </Route>
-          <Redirect to="/" />
-        </Switch>
-      </BasicLayout>
-    </Router>
-  </ChakraProvider>
+  <QueryClientProvider client={queryClient}>
+    <ChakraProvider theme={theme}>
+      <Router>
+        <BasicLayout>
+          <Switch>
+            <Route exact path="/">
+              <Home />
+            </Route>
+            <Redirect to="/" />
+          </Switch>
+        </BasicLayout>
+      </Router>
+    </ChakraProvider>
+    <ReactQueryDevtools initialIsOpen={false} />
+  </QueryClientProvider>
 );
diff --git a/src/components/GraphWrapper/index.tsx b/src/components/GraphWrapper/index.tsx
index 9b99864..dc62896 100644
--- a/src/components/GraphWrapper/index.tsx
+++ b/src/components/GraphWrapper/index.tsx
@@ -26,7 +26,10 @@ const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
     selectedStepValue,
   } = useTimeQuerierStore();
 
-  const { data, error, status } = useFetch<apiResponse<queryResponse>>(
+  const { data, error, isLoading, isFetching, isError } = useFetch<
+    apiResponse<queryResponse>
+  >(
+    "graph",
     queryEntities(
       selectedRoutePath,
       selectedStartTimestamp,
@@ -35,7 +38,7 @@ const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
     )
   );
 
-  if (error) {
+  if (isError) {
     return (
       <VStack w="95%" h="100%" margin="auto" justifyContent="center">
         <Alert
@@ -50,7 +53,7 @@ const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
         >
           <AlertIcon boxSize="40px" mr={0} />
           <AlertTitle mt={4} mb={1} fontSize="lg">
-            {error}
+            {error?.response?.data}
           </AlertTitle>
           <AlertDescription maxWidth="sm">
             An unexpected error occurred while processing the graph.
@@ -60,7 +63,7 @@ const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
     );
   }
 
-  if (status === "fetching" || status === "init")
+  if (isLoading || isFetching)
     return (
       <VStack w="95%" h="100%" margin="auto" justifyContent="center">
         <CircularProgress size="10vh" isIndeterminate />
@@ -93,7 +96,7 @@ const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
   return (
     <VStack w="95%" h="100%" margin="auto" justifyContent="center">
       <Box data-testid="graph" width="100%" height="90vh">
-        <ReusableGraph graphData={data.data} />
+        <ReusableGraph graphData={data.data.data} />
       </Box>
     </VStack>
   );
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<apiResponse<machineResponse>>(
-    getActiveMachines()
-  );
-  const machines = data ? data.data.machines : [];
+  const { data, error, isFetching, isLoading, isError, isFetched } = useFetch<
+    apiResponse<machineResponse>
+  >("machines", getActiveMachines());
+
+  const machines = data ? data.data.data.machines : [];
 
   useEffect(() => {
     if (machines.length) changeSelectedMachine(machines[0]);
   }, [data]);
 
-  if (error) {
+  if (isError) {
     return (
       <Alert data-testid="error-message" fontSize="xs" status="error">
         <AlertIcon />
-        {error}
+        {error?.response?.data}
       </Alert>
     );
   }
 
-  if (status === "fetching" || status === "init") {
+  if (isFetching || isLoading) {
     return (
       <VStack w="95%" h="100%" margin="auto" justifyContent="center">
         <CircularProgress size="5vh" isIndeterminate />
       </VStack>
     );
   }
+
   return (
     <VStack w="100%">
       <Select
         mt={3}
-        isDisabled={status != "fetched" || error !== undefined}
+        isDisabled={!isFetched || isError}
         value={selectedMachine ? selectedMachine : "Fetching Machines"}
         data-testid="machine-selector"
         onChange={(e) => {
diff --git a/src/components/RouteSelector/index.tsx b/src/components/RouteSelector/index.tsx
index 8fc51b8..2171bec 100644
--- a/src/components/RouteSelector/index.tsx
+++ b/src/components/RouteSelector/index.tsx
@@ -9,10 +9,11 @@ import { apiResponse, routeResponse } from "../../utils/types";
 
 const RouteSelector: React.FC = () => {
   const { selectedMachine } = useGlobalStore();
-  const { data, error, status } = useFetch<apiResponse<routeResponse[]>>(
-    getRoutes(selectedMachine ? selectedMachine : "")
-  );
-  const routes = data ? data.data : [];
+  const { data, error, isLoading, isFetching, isError, isFetched } = useFetch<
+    apiResponse<routeResponse[]>
+  >("routes", getRoutes(selectedMachine ? selectedMachine : ""));
+
+  const routes = data ? data.data.data : [];
   const [filteredRoutes, changeFilteredRoutes] = useState<routeResponse[]>([]);
 
   useEffect(() => {
@@ -21,23 +22,24 @@ const RouteSelector: React.FC = () => {
   const handleFilteredRoutesChange = (routes: routeResponse[]) => {
     changeFilteredRoutes([...routes]);
   };
-  if (error) {
+
+  if (isError) {
     return (
       <VStack data-testid="route-selector" mt={4} w="100%" h="100%">
         <Search
           routes={routes}
-          isDisabled={error !== undefined || status != "fetched"}
+          isDisabled={isError || !isFetched}
           changeFilteredRoutes={handleFilteredRoutesChange}
         />
         <Alert data-testid="error-message" fontSize="xs" status="error">
           <AlertIcon />
-          {error}
+          {error?.response?.data}
         </Alert>
       </VStack>
     );
   }
 
-  if (status === "fetching" || status === "init")
+  if (isFetching || isLoading)
     return (
       <VStack w="95%" h="100%" margin="auto" justifyContent="center">
         <CircularProgress size="5vh" isIndeterminate />
diff --git a/src/utils/customRender.tsx b/src/utils/customRender.tsx
index 7571ab0..b8b9923 100644
--- a/src/utils/customRender.tsx
+++ b/src/utils/customRender.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { render, RenderOptions } from "@testing-library/react";
 import { ChakraProvider } from "@chakra-ui/react";
+import { QueryClient, QueryClientProvider } from "react-query";
+
 import theme from "../theme";
 
 /*  Function used to render the component that we need to test
@@ -9,8 +11,13 @@ import theme from "../theme";
     input : component that is tested
     output : component after being wrapped by all the providers
 */
+
+const queryClient = new QueryClient();
+
 const AllProviders = ({ children }: { children?: React.ReactNode }) => (
-  <ChakraProvider theme={theme}>{children}</ChakraProvider>
+  <QueryClientProvider client={queryClient}>
+    <ChakraProvider theme={theme}>{children}</ChakraProvider>
+  </QueryClientProvider>
 );
 
 const customRender = (ui: React.ReactElement, options?: RenderOptions) =>
diff --git a/src/utils/useFetch.ts b/src/utils/useFetch.ts
index c2dbf59..e43bfad 100644
--- a/src/utils/useFetch.ts
+++ b/src/utils/useFetch.ts
@@ -1,101 +1,19 @@
 /* eslint-disable */
-import { useEffect, useReducer, useRef } from "react";
-import axios, { AxiosRequestConfig } from "axios";
-
-interface Response<T> {
-  status: "init" | "fetching" | "error" | "fetched";
-  data?: T | undefined;
-  error?: string | undefined;
-}
-
-// used if you want to reference
-// persistent storage
-interface Cache<T> {
-  [url: string]: T;
-}
-
-type Action<T> =
-  | { type: "request" }
-  | { type: "success"; payload: T }
-  | { type: "failure"; payload: string };
+import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from "axios";
+import { useQuery } from "react-query";
 
 /*  Reusable fetch service for making requests to api endpoints 
-    input - url,options
-    output - data,error,status
+    input - uniqueName, url, options
+    output - data, error, status
 */
 const useFetch = <T = unknown>(
+  uniqueName: string,
   url: string,
   options?: AxiosRequestConfig
-): Response<T> => {
-  const cache = useRef<Cache<T>>({});
-  const cancelRequest = useRef<boolean>(false);
-
-  const initialState: Response<T> = {
-    status: "init",
-    error: undefined,
-    data: undefined,
-  };
-
-  // main function
-  const fetchReducer = (state: Response<T>, action: Action<T>): Response<T> => {
-    switch (action.type) {
-      case "request":
-        return { ...initialState, status: "fetching" };
-      case "success":
-        return { ...initialState, status: "fetched", data: action.payload };
-      case "failure":
-        return { ...initialState, status: "error", error: action.payload };
-      default:
-        return state;
-    }
-  };
-
-  // useReducer instead of use state could make the function
-  // easier to debug across multiple usages.
-  const [state, dispatch] = useReducer(fetchReducer, initialState);
-  useEffect(() => {
-    if (!url) {
-      return;
-    }
-
-    const fetchData = async () => {
-      dispatch({ type: "request" });
-
-      if (cache.current[url]) {
-        dispatch({ type: "success", payload: cache.current[url] });
-      } else {
-        try {
-          const response = options
-            ? await axios.get(url, options)
-            : await axios.get(url);
-
-          cache.current[url] = response.data;
-
-          if (cancelRequest.current) return;
-
-          dispatch({ type: "success", payload: response.data });
-        } catch (error) {
-          // Let's keep error handling to another day,
-          // hence the type for error is "any" here.
-          if (cancelRequest.current) return;
-
-          // server should return a message, else use a custom message such as "something went wrong"
-          dispatch({ type: "failure", payload: error.message });
-        }
-      }
-    };
-
-    fetchData();
-  }, [url]);
-
-  useEffect(() => {
-    // runs when component is destroyed.
-    return () => {
-      cancelRequest.current = true;
-    };
-  }, []);
-
-  return state;
+) => {
+  return useQuery<AxiosResponse<T>, AxiosError>(uniqueName, () =>
+    options ? axios.get(url, options) : axios.get(url)
+  );
 };
 
 export default useFetch;
diff --git a/yarn.lock b/yarn.lock
index 44ab270..c4f2142 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1127,6 +1127,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.6.2":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
+  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz"
@@ -3625,6 +3632,11 @@ bfj@^7.0.2:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
+big-integer@^1.6.16:
+  version "1.6.51"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
+  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
@@ -3735,6 +3747,20 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+broadcast-channel@^3.4.1:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
+  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    detect-node "^2.1.0"
+    js-sha3 "0.8.0"
+    microseconds "0.2.0"
+    nano-time "1.0.0"
+    oblivious-set "1.0.0"
+    rimraf "3.0.2"
+    unload "2.2.0"
+
 brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz"
@@ -5079,6 +5105,11 @@ detect-node@^2.0.4:
   resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.0.5.tgz"
   integrity sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw==
 
+detect-node@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
 detect-port-alt@1.1.6:
   version "1.1.6"
   resolved "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz"
@@ -7886,6 +7917,11 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -8371,6 +8407,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-sorter@^6.0.2:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
+  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
@@ -8476,6 +8520,11 @@ micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+microseconds@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
+  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz"
@@ -8683,6 +8732,13 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
+nano-time@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
+  integrity sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=
+  dependencies:
+    big-integer "^1.6.16"
+
 nanoid@^3.1.22:
   version "3.1.30"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz"
@@ -8984,6 +9040,11 @@ object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.3:
     es-abstract "^1.18.0-next.2"
     has "^1.0.3"
 
+oblivious-set@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
+  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz"
@@ -10501,6 +10562,15 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-query@^3.34.12:
+  version "3.34.12"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.12.tgz#dcaaf7b629f0868aae8afef9fb7692f6ea7643bf"
+  integrity sha512-flDdudQVH4CqE+kNYYYyo4g2Yjek3H/36G3b9bK5oe26jD5gFnx+PPwnq0gayq5z2dcSfr2z4+drvuyeZ3A5QQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    broadcast-channel "^3.4.1"
+    match-sorter "^6.0.2"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
@@ -10886,6 +10956,11 @@ relateurl@^0.2.7:
   resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz"
@@ -12527,6 +12602,14 @@ universalify@^2.0.0:
   resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
+unload@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
+  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "^2.0.4"
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"