feat: update germlineReports to use new query hooks

DEVSU-2860

Author: kttkjl

app/context/GermlineReportContext/index.ts

@@ -5,7 +5,7 @@ import {
 
 const GermlineReportContext = React.createContext<GermlineReportContextType>({
   report: null,
-  setReport: () => {},
+  refetchReport: async () => undefined,
 });
 
 export default GermlineReportContext;

app/context/GermlineReportContext/types.d.ts

@@ -1,3 +1,4 @@
+import { UseQueryResult } from 'react-query';
 import { RecordDefaults, UserType, ProjectType } from '@/common';
 
 type ReviewType = {
@@ -65,9 +66,8 @@ type GermlineReportType = {
 
 type GermlineReportContextType = {
   /** Current report that's being viewed */
-  report: GermlineReportType | null,
-  /** Set new current report */
-  setReport: React.Dispatch<React.SetStateAction<GermlineReportType>>;
+  report: GermlineReportType | null;
+  refetchReport: UseQueryResult<GermlineReportType>['refetch'];
 };
 
 export {

app/views/GermlineView/components/Report/components/Reviews/index.tsx

@@ -21,7 +21,7 @@ import columnDefs from './columnDefs';
 import './index.scss';
 
 const Reviews = (): JSX.Element => {
-  const { report, setReport } = useContext(GermlineReportContext);
+  const { report, refetchReport } = useContext(GermlineReportContext);
 
   const [isEditing, setIsEditing] = useState(false);
   const [newComment, setNewComment] = useState('');
@@ -36,38 +36,32 @@ const Reviews = (): JSX.Element => {
 
   const handleAddReview = useCallback(async () => {
     try {
-      const newReview = await api.post(
+      await api.post(
         `/germline-small-mutation-reports/${report.ident}/reviews`,
         { type: newType, comment: newComment },
         {},
       ).request();
-      setReport((prevVal) => ({
-        ...prevVal,
-        reviews: [...prevVal.reviews, newReview],
-      }));
+      refetchReport();
       setIsEditing(false);
       snackbar.success('Review added');
     } catch (err) {
       snackbar.error(`Error adding review: ${err}`);
     }
-  }, [newComment, newType, report, setReport]);
+  }, [newComment, newType, report, refetchReport]);
 
   const handleRowDelete = useCallback(async (row) => {
     try {
-      api.del(
+      await api.del(
         `/germline-small-mutation-reports/${report.ident}/reviews/${row.data.ident}`,
         {},
         {},
       ).request();
-      setReport((prevVal) => ({
-        ...prevVal,
-        reviews: prevVal.reviews.filter((val) => val.ident !== row.data.ident),
-      }));
+      refetchReport();
       snackbar.success('Review removed');
     } catch (err) {
       snackbar.error(`Error removing review: ${err}`);
     }
-  }, [report, setReport]);
+  }, [report, refetchReport]);
 
   const DeleteCellRenderer = useCallback((row) => (
     <DeleteCell

app/views/GermlineView/components/Report/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useEffect, useState, useCallback, useMemo,
+  useState, useCallback, useMemo,
 } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import {
@@ -19,7 +19,7 @@ import { ActionCellRenderer } from '@/components/DataTable/components/ActionCell
 import AlertDialog from '@/components/AlertDialog';
 import snackbar from '@/services/SnackbarUtils';
 import { GermlineReportType, VariantType } from '@/context/GermlineReportContext/types';
-import withLoading, { WithLoadingInjectedProps } from '@/hoc/WithLoading';
+import { useGermlineSmallMutationReportsGermline } from '@/queries/get';
 import { getDate } from '@/utils/date';
 import StrikethroughCell from './components/StrikethroughCell';
 import EditDialog from './components/EditDialog';
@@ -28,16 +28,13 @@ import columnDefs from './columnDefs';
 import './index.scss';
 import LinkoutCellRenderer from '../LinkoutCellRenderer';
 
-type GermlineReportProps = WithLoadingInjectedProps;
-
-const GermlineReport = ({
-  isLoading,
-  setIsLoading,
-}: GermlineReportProps): JSX.Element => {
+const GermlineReport = (): JSX.Element => {
   const { ident } = useParams<{ ident: string }>();
   const { gridApi, colApi, onGridReady } = useGrid();
   const history = useHistory();
-  const [report, setReport] = useState<GermlineReportType>();
+  const {
+    data: report, isLoading, refetch: refetchReport,
+  } = useGermlineSmallMutationReportsGermline<GermlineReportType>(ident);
 
   const [showAllColumns, setShowAllColumns] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
@@ -46,25 +43,7 @@ const GermlineReport = ({
 
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement>();
 
-  const germlineReportContextValue = useMemo(() => ({ report, setReport }), [report]);
-
-  useEffect(() => {
-    if (ident) {
-      const getData = async () => {
-        try {
-          const reportResp = await api.get(
-            `/germline-small-mutation-reports/${ident}`,
-          ).request();
-          setReport(reportResp);
-        } catch (err) {
-          snackbar.error(`Network error: ${err}`);
-        } finally {
-          setIsLoading(false);
-        }
-      };
-      getData();
-    }
-  }, [ident, setReport, setIsLoading]);
+  const germlineReportContextValue = useMemo(() => ({ report, refetchReport }), [report, refetchReport]);
 
   const handleGridReady = useCallback((params) => {
     const { columnApi } = params;
@@ -92,13 +71,10 @@ const GermlineReport = ({
 
   const handleEditClose = useCallback((newRow) => {
     if (newRow) {
-      const newVariants = [...report.variants];
-      const index = newVariants.findIndex((variant) => variant.ident === newRow.ident);
-      newVariants[index] = newRow;
-      setReport((prevVal) => ({ ...prevVal, variants: newVariants }));
+      refetchReport();
     }
     setShowEditDialog(false);
-  }, [report]);
+  }, [refetchReport]);
 
   const RowActionCellRenderer = useCallback((row) => (
     <ActionCellRenderer
@@ -248,4 +224,4 @@ const GermlineReport = ({
   );
 };
 
-export default withLoading(GermlineReport);
+export default GermlineReport;