Switch to react-query; use onSuccess hooks

frontend/app/api.ts

@@ -39,9 +39,15 @@ async function getTools (): Promise<Tool[]> {
   return data;
 }
 
-async function updateToolNav (canvas_tool_id: number, navEnabled: boolean): Promise<void> {
+interface UpdateToolNavData {
+  canvasToolId: number
+  navEnabled: boolean
+}
+
+async function updateToolNav (data: UpdateToolNavData): Promise<void> {
+  const { canvasToolId, navEnabled } = data;
   const body = { navigation_enabled: navEnabled };
-  const url = `${API_BASE}/lti_tools/${canvas_tool_id}/`;
+  const url = `${API_BASE}/lti_tools/${canvasToolId}/`;
   const requestInit: RequestInit = {
     method: 'PUT',
     body: JSON.stringify(body),

frontend/app/components/Home.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useAsync } from 'react-async-hook';
+import { useQuery } from 'react-query';
 import { Alert, Box, Grid, LinearProgress, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
@@ -29,8 +29,9 @@ const filterTools = (tools: Tool[], filter: string): Tool[] => {
 function Home () {
   const [tools, setTools] = useState<undefined | Tool[]>(undefined);
 
-  const getAndSetTools = async (): Promise<void> => setTools(await api.getTools());
-  const { loading: getToolsLoading, error: getToolsError } = useAsync<void, []>(getAndSetTools, []);
+  const { isLoading: getToolsLoading, error: getToolsError } = useQuery('getTools', api.getTools, {
+    onSuccess: (data) => setTools(data)
+  });
 
   const onToolUpdate = (newTool: Tool) => {
     /*
@@ -51,7 +52,7 @@ function Home () {
     <Box sx={{ padding: 2 }}><LinearProgress id='tool-card-container-loading' /></Box>
   );
 
-  const errors = [getToolsError].filter(e => e !== undefined) as Error[];
+  const errors = [getToolsError].filter(e => e !== null) as Error[];
   const errorsBlock = (errors.length > 0) && (
     <div>
       {errors.map((e, i) => <Alert key={i} severity='error'>{e.message}</Alert>)}

frontend/app/components/ToolCard.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useAsyncCallback } from 'react-async-hook';
+import { useMutation } from 'react-query';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
@@ -34,22 +34,19 @@ export default function ToolCard (props: ToolCardProps) {
   const { tool, onToolUpdate } = props;
   const [learnMoreActive, setLearnMoreActive] = useState(false);
 
-  const updateToolNavAndTool = async (canvasToolId: number, navEnabled: boolean) => {
-    await api.updateToolNav(canvasToolId, navEnabled);
-    const newTool = { ...tool, navigation_enabled: navEnabled };
-    onToolUpdate(newTool);
-  };
-
   const {
-    execute: doUpdateToolNav, error: updateToolNavError, loading: updateToolNavLoading
-  } = useAsyncCallback<void, [number, boolean]>(updateToolNavAndTool);
+    mutate: doUpdateToolNav, error: updateToolNavError, isLoading: updateToolNavLoading
+  } = useMutation(api.updateToolNav, { onSuccess: (data, variables) => {
+    const newTool = { ...tool, navigation_enabled: variables.navEnabled };
+    onToolUpdate(newTool);
+  }});
 
   const isLoading = updateToolNavLoading;
   const loadingBlock = isLoading && (
     <Box sx={{ padding: 2 }}><LinearProgress id='add-remove-tool-button-loading' /></Box>
   );
 
-  const errors = [updateToolNavError].filter(e => e !== undefined) as Error[];
+  const errors = [updateToolNavError].filter(e => e !== null) as Error[];
   const errorsBlock = errors.length > 0 && (
     <Grid container spacing={2}>
       {errors.map((e, i) => <Grid key={i} item><Alert key={i} severity='error'>{e.message}</Alert></Grid>)}
@@ -101,13 +98,13 @@ export default function ToolCard (props: ToolCardProps) {
               ? (
                 <RemoveToolButton
                   disabled={updateToolNavLoading}
-                  onClick={() => doUpdateToolNav(tool.canvas_id, false)}
+                  onClick={() => doUpdateToolNav({ canvasToolId: tool.canvas_id, navEnabled: false })}
                 />
               )
               : (
                 <AddToolButton
                   disabled={updateToolNavLoading}
-                  onClick={() => doUpdateToolNav(tool.canvas_id, true)}
+                  onClick={() => doUpdateToolNav({ canvasToolId: tool.canvas_id, navEnabled: true })}
                 />
               )
           }

frontend/app/index.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProvider } from '@mui/material';
 
 import Home from './components/Home';
 import theme from './theme';
 
+const queryClient = new QueryClient();
+
 ReactDOM.render(
   (
-    <ThemeProvider theme={theme}>
-      <Home />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <Home />
+      </ThemeProvider>
+    </QueryClientProvider>
   ),
   document.getElementById('react-app')
 );