Merge pull request #607 from bcgsc/feature/DEVSU-2581-Update-template-page-to-use-react-query

DEVSU-2581 Update TemplateView to use react-query

Author: OwenCoelho14

app/App.tsx

@@ -1,6 +1,7 @@
 /**
  * @module /App
  */
+import { QueryClientProvider, QueryClient } from 'react-query';
 import { SnackbarProvider } from 'notistack';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
@@ -23,6 +24,16 @@ import '@ag-grid-community/core/dist/styles/ag-theme-material.min.css';
 import '@fontsource/roboto';
 import './styles/ag-grid.scss';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 15 * 60 * 1000, // 15m
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+    },
+  },
+});
+
 ModuleRegistry.registerModules([
   ClientSideRowModelModule,
   CsvExportModule,
@@ -42,15 +53,17 @@ function App() {
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
-          <SnackbarUtilsConfigurator />
-          <CssBaseline />
-          <BrowserRouter basename={basename}>
-            <CacheBuster>
-              <MainView />
-            </CacheBuster>
-          </BrowserRouter>
-        </SnackbarProvider>
+        <QueryClientProvider client={queryClient}>
+          <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
+            <SnackbarUtilsConfigurator />
+            <CssBaseline />
+            <BrowserRouter basename={basename}>
+              <CacheBuster>
+                <MainView />
+              </CacheBuster>
+            </BrowserRouter>
+          </SnackbarProvider>
+        </QueryClientProvider>
       </ThemeProvider>
     </StyledEngineProvider>
   );

app/views/TemplateView/index.tsx

@@ -1,25 +1,39 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useSnackbar } from 'notistack';
+import React, { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import snackbar from '@/services/SnackbarUtils';
 
 import DataTable from '@/components/DataTable';
 import api from '@/services/api';
 import AddEditTemplate from './components/AddEditTemplate';
 import columnDefs from './columnDefs';
 
+const fetchTemplates = async () => api.get('/templates', {}).request();
+
+const deleteTemplate = async (ident: string) => {
+  await api.del(`/templates/${ident}/signature-types`, {}, {}).request();
+  return api.del(`/templates/${ident}`, {}, {}).request();
+};
+
 const TemplateView = (): JSX.Element => {
   const [showDialog, setShowDialog] = useState(false);
-  const [templates, setTemplates] = useState([]);
   const [selectedRow, setSelectedRow] = useState();
+  const queryClient = useQueryClient();
 
-  const snackbar = useSnackbar();
+  const { data: templates = [] } = useQuery({
+    queryKey: ['templates'],
+    queryFn: fetchTemplates,
+  });
 
-  useEffect(() => {
-    const getData = async () => {
-      const templatesResp = await api.get('/templates', {}).request();
-      setTemplates(templatesResp);
-    };
-    getData();
-  }, []);
+  const deleteMutation = useMutation({
+    mutationFn: deleteTemplate,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['templates'] });
+      snackbar.success('Template deleted');
+    },
+    onError: (err) => {
+      snackbar.error(`Error deleting template: ${err}`);
+    },
+  });
 
   const handleEditStart = (rowData) => {
     setShowDialog(true);
@@ -31,28 +45,19 @@ const TemplateView = (): JSX.Element => {
   const handleDialogClose = useCallback((newData) => {
     setShowDialog(false);
     if (newData) {
-      const templateIndex = templates.findIndex((template) => template.ident === newData.ident);
-      if (templateIndex !== -1) {
-        const newTemplates = [...templates];
-        newTemplates[templateIndex] = newData;
-        setTemplates(newTemplates);
-      } else {
-        setTemplates((prevVal) => [...prevVal, newData]);
-      }
+      queryClient.invalidateQueries({ queryKey: ['templates'] });
     }
     setSelectedRow(null);
-  }, [templates]);
+  }, [queryClient]);
 
   const handleDelete = useCallback(async (rowData) => {
     try {
-      await api.del(`/templates/${rowData.ident}/signature-types`, {}, {}).request();
-      await api.del(`/templates/${rowData.ident}`, {}, {}).request();
-      setTemplates((prevVal) => prevVal.filter((template) => template.ident !== rowData.ident));
-      snackbar.enqueueSnackbar('Template deleted');
+      deleteMutation.mutate(rowData.ident);
+      snackbar.success('Template deleted');
     } catch (err) {
-      snackbar.enqueueSnackbar(`Error deleting template: ${err}`);
+      snackbar.error(`Error deleting template: ${err}`);
     }
-  }, [snackbar]);
+  }, [deleteMutation]);
 
   return (
     <div>