Merge pull request #35 from bcgsc/refactor/upgrade-and-swap-fully-to-…

…react-query

Refactor/upgrade and swap fully to react query

package.json

@@ -47,7 +47,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-google-charts": "^3.0.15",
-    "react-query": "^2.26.4",
+    "react-query": "~3.34.14",
     "react-router-dom": "~5.3.0",
     "react-select": "^2.4.4",
     "slugify": "^1.4.0",

src/App.js

@@ -11,9 +11,11 @@ import {
 import { create } from 'jss';
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
+import { QueryClientProvider } from 'react-query';
 import { BrowserRouter } from 'react-router-dom';
 
 import { AuthProvider } from '@/components/Auth';
+import api from '@/services/api';
 
 import * as cssTheme from './_theme.scss';
 import MainView from './views/MainView';
@@ -78,13 +80,15 @@ function App() {
     <StylesProvider jss={jss}>
       <CssBaseline />
       <MuiThemeProvider theme={theme}>
-        <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
-          <BrowserRouter basename={window._env_.PUBLIC_PATH}>
-            <AuthProvider>
-              <MainView />
-            </AuthProvider>
-          </BrowserRouter>
-        </SnackbarProvider>
+        <QueryClientProvider client={api.queryClient}>
+          <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+            <BrowserRouter basename={window._env_.PUBLIC_PATH}>
+              <AuthProvider>
+                <MainView />
+              </AuthProvider>
+            </BrowserRouter>
+          </SnackbarProvider>
+        </QueryClientProvider>
       </MuiThemeProvider>
     </StylesProvider>
   );

src/components/Auth/index.js

@@ -41,7 +41,9 @@ const useAuth = () => {
 const AuthProvider = (props) => {
   const { children } = props;
 
-  const [logInOrOut, { isLoading: isAuthenticating, data, error }] = useMutation(
+  const {
+    mutate: logInOrOut, isLoading: isAuthenticating, data, error,
+  } = useMutation(
     async ({ loggingIn }) => {
       if (loggingIn) {
         const loggedIn = await keycloak.init({
@@ -54,7 +56,7 @@ const AuthProvider = (props) => {
           await keycloak.login({ redirectUri: window.location.href });
         }
 
-        const { kbToken: authorizationToken } = await api.post('/token', { keyCloakToken: keycloak.token }).request();
+        const { kbToken: authorizationToken } = await api.post('/token', { keyCloakToken: keycloak.token });
         const { user } = jwt.decode(authorizationToken);
 
         await keycloak.loadUserInfo();

src/components/FormField/FilteredRecordAutocomplete/index.js

@@ -3,7 +3,7 @@ import './index.scss';
 import { FormControl, FormHelperText } from '@material-ui/core';
 import FilterIcon from '@material-ui/icons/FilterList';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import DropDownSelect from '@/components/DropDownSelect';
 import RecordAutocomplete from '@/components/RecordAutocomplete';
@@ -52,9 +52,9 @@ const FilteredRecordAutocomplete = ({
 
   const itemToString = item => schema.getLabel(item);
 
-  const searchHandler = api.defaultSuggestionHandler(
+  const getQueryBody = useMemo(() => api.getDefaultSuggestionQueryBody(
     schema.get(selectedClassName),
-  );
+  ), [selectedClassName]);
 
   const valueToString = (record) => {
     if (record && record['@rid']) {
@@ -90,13 +90,13 @@ const FilteredRecordAutocomplete = ({
           disabled={disabled}
           getOptionKey={opt => opt['@rid']}
           getOptionLabel={itemToString}
+          getQueryBody={getQueryBody}
           isMulti={isMulti}
           name={name}
           placeholder={isMulti
             ? `Search for Existing ${selectedClassName} Record(s)`
             : `Search for an Existing ${selectedClassName} Record`
           }
-          searchHandler={searchHandler}
         />
       </div>
       {helperText && (<FormHelperText>{helperText}</FormHelperText>)}