From fdc92e7e588a043aa87c364ab78c850a109dd278 Mon Sep 17 00:00:00 2001
From: James Brunskill <james@sussol.net>
Date: Fri, 2 Feb 2024 14:07:20 +1300
Subject: [PATCH] Save Interactions

---
 .../Interactions/DrugOrGroupSelector.tsx      |   8 +-
 .../Interactions/InteractionEditModal.tsx     | 111 +++++++++++++++---
 .../InteractionGroupEditModal.tsx             |   5 +-
 .../Interactions/InteractionGroupTab.tsx      |   3 +-
 .../Admin/Interactions/InteractionsTab.tsx    |  54 ++++++++-
 .../api/hooks/useDeleteInteraction.ts         |  13 ++
 .../api/hooks/useUpsertInteraction.ts         |  15 +++
 7 files changed, 180 insertions(+), 29 deletions(-)
 create mode 100644 frontend/system/src/Admin/Interactions/api/hooks/useDeleteInteraction.ts
 create mode 100644 frontend/system/src/Admin/Interactions/api/hooks/useUpsertInteraction.ts

diff --git a/frontend/system/src/Admin/Interactions/DrugOrGroupSelector.tsx b/frontend/system/src/Admin/Interactions/DrugOrGroupSelector.tsx
index 505ea659a..4c6c5e117 100644
--- a/frontend/system/src/Admin/Interactions/DrugOrGroupSelector.tsx
+++ b/frontend/system/src/Admin/Interactions/DrugOrGroupSelector.tsx
@@ -42,10 +42,10 @@ export const DrugOrGroupSelector: FC<DrugOrGroupSelectorProps> = ({
 
   const groupOptions = useMemo<SelectionOption[]>(() => {
     if (!groups) return [];
-    return groups.map(drug => ({
-      id: drug.id,
-      name: drug.description ?? 'Unknown',
-      label: drug.name ?? 'Unknown',
+    return groups.map(group => ({
+      id: group.id,
+      name: group.name ?? 'Unknown',
+      label: group.name ?? 'Unknown',
     }));
   }, [groups]);
 
diff --git a/frontend/system/src/Admin/Interactions/InteractionEditModal.tsx b/frontend/system/src/Admin/Interactions/InteractionEditModal.tsx
index 0854c18ce..2d66f4d58 100644
--- a/frontend/system/src/Admin/Interactions/InteractionEditModal.tsx
+++ b/frontend/system/src/Admin/Interactions/InteractionEditModal.tsx
@@ -19,6 +19,9 @@ import { useAllDrugInteractionGroups } from './api';
 import { DrugOrGroupSelector } from './DrugOrGroupSelector';
 import { DrugInteractionSeverityNode } from '@common/types';
 import { DrugInteractionFragment } from './api/operations.generated';
+import { useUpsertDrugInteraction } from './api/hooks/useUpsertInteraction';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 
 type InteractionEditModalProps = {
   isOpen: boolean;
@@ -50,6 +53,8 @@ export const InteractionEditModal = ({
     group2: interaction?.group2,
   });
 
+  const [addDrugInteration, invalidateQueries] = useUpsertDrugInteraction();
+
   const { data: drugs, isLoading: drugListLoading } = useEntities({
     filter: {
       categories: ['drug'],
@@ -66,10 +71,10 @@ export const InteractionEditModal = ({
   const { data: groups, isLoading: groupListLoading } =
     useAllDrugInteractionGroups();
 
-  const { Modal } = useDialog({ isOpen, onClose });
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
-  // TODO: set from queries
-  const isLoading = false;
+  const { Modal } = useDialog({ isOpen, onClose });
 
   const isInvalid = !draft.name || !draft.description || !draft.severity;
   const modalWidth = Math.min(window.innerWidth - 200, 800);
@@ -81,9 +86,33 @@ export const InteractionEditModal = ({
         <LoadingButton
           disabled={isInvalid}
           onClick={() => {
-            // TODO: save and handle errors
-            console.log('value to be saved:', draft);
-            onClose();
+            addDrugInteration({
+              input: {
+                id: draft.id,
+                name: draft.name,
+                description: draft.description ?? '',
+                action: draft.action ?? '',
+                reference: draft.reference ?? '',
+                severity: draft.severity,
+                drug1: draft.drug1?.code,
+                drug2: draft.drug2?.code,
+                group1: draft.group1?.id,
+                group2: draft.group2?.id,
+              },
+            })
+              .catch(err => {
+                setIsLoading(false);
+                if (!err || !err.message) {
+                  err = { message: t('messages.unknown-error') };
+                }
+                setErrorMessage(err.message);
+              })
+              .then(() => {
+                invalidateQueries();
+                setIsLoading(false);
+                onClose();
+              });
+            setIsLoading(false);
           }}
           isLoading={isLoading}
           startIcon={<CheckIcon />}
@@ -110,7 +139,6 @@ export const InteractionEditModal = ({
             value={draft?.name ?? ''}
             onChange={e => setDraft({ ...draft, name: e.currentTarget.value })}
           />
-
           <DrugOrGroupSelector
             drugs={drugs?.data ?? []}
             groups={groups ?? []}
@@ -119,16 +147,34 @@ export const InteractionEditModal = ({
               drugId?: string | undefined;
               groupId?: string | undefined;
             }): void {
-              // TODO....
-              // throw new Error('Function not implemented.');
+              if (input.drugId) {
+                setDraft({
+                  ...draft,
+                  drug1: {
+                    code: input.drugId,
+                    description: '',
+                    __typename: 'EntityType',
+                  },
+                  group1: undefined,
+                });
+              }
+              if (input.groupId) {
+                setDraft({
+                  ...draft,
+                  group1: {
+                    id: input.groupId,
+                    name: '',
+                    __typename: 'DrugInteractionGroupNode',
+                  },
+                  drug1: undefined,
+                });
+              }
             }}
             isLoading={drugListLoading || groupListLoading}
           />
-
           <Grid item>
             <Typography variant="h6">Interacts with</Typography>
           </Grid>
-
           <DrugOrGroupSelector
             drugs={drugs?.data ?? []}
             groups={groups ?? []}
@@ -137,12 +183,31 @@ export const InteractionEditModal = ({
               drugId?: string | undefined;
               groupId?: string | undefined;
             }): void {
-              // TODO....
-              // throw new Error('Function not implemented.');
+              if (input.drugId) {
+                setDraft({
+                  ...draft,
+                  drug2: {
+                    code: input.drugId,
+                    description: '',
+                    __typename: 'EntityType',
+                  },
+                  group2: undefined,
+                });
+              }
+              if (input.groupId) {
+                setDraft({
+                  ...draft,
+                  group2: {
+                    id: input.groupId,
+                    name: '',
+                    __typename: 'DrugInteractionGroupNode',
+                  },
+                  drug2: undefined,
+                });
+              }
             }}
             isLoading={drugListLoading || groupListLoading}
           />
-
           <Select
             label={t('label.severity')}
             required
@@ -176,8 +241,8 @@ export const InteractionEditModal = ({
                 borderRadius: '8px',
               },
             }}
+            InputLabelProps={{ shrink: true }}
           />
-
           <TextArea
             label={t('label.action')}
             value={draft?.action ?? ''}
@@ -192,8 +257,8 @@ export const InteractionEditModal = ({
                 borderRadius: '8px',
               },
             }}
+            InputLabelProps={{ shrink: true }}
           />
-
           <TextArea
             label={t('label.reference')}
             value={draft?.reference ?? ''}
@@ -208,7 +273,21 @@ export const InteractionEditModal = ({
                 borderRadius: '8px',
               },
             }}
+            InputLabelProps={{ shrink: true }}
           />
+          {errorMessage ? (
+            <Grid item>
+              <Alert
+                severity="error"
+                onClose={() => {
+                  setErrorMessage('');
+                }}
+              >
+                <AlertTitle>{t('error')}</AlertTitle>
+                {errorMessage}
+              </Alert>
+            </Grid>
+          ) : null}{' '}
         </Grid>
       )}
     </Modal>
diff --git a/frontend/system/src/Admin/Interactions/InteractionGroupEditModal.tsx b/frontend/system/src/Admin/Interactions/InteractionGroupEditModal.tsx
index b4d78ecd7..ea9efca73 100644
--- a/frontend/system/src/Admin/Interactions/InteractionGroupEditModal.tsx
+++ b/frontend/system/src/Admin/Interactions/InteractionGroupEditModal.tsx
@@ -49,7 +49,8 @@ export const InteractionGroupEditModal = ({
   const onUpdate = (patch: Partial<InteractionGroupFragment>) => {
     setGroup({ ...group, ...patch });
   };
-  const [addConfigItem, invalidateQueries] = useUpsertDrugInteractionGroup();
+  const [addDrugInterationGroup, invalidateQueries] =
+    useUpsertDrugInteractionGroup();
 
   const { data, isLoading: drugListLoading } = useEntities({
     filter: {
@@ -75,7 +76,7 @@ export const InteractionGroupEditModal = ({
         <LoadingButton
           onClick={() => {
             setIsLoading(true);
-            addConfigItem({
+            addDrugInterationGroup({
               input: {
                 id: group.id,
                 name: group.name,
diff --git a/frontend/system/src/Admin/Interactions/InteractionGroupTab.tsx b/frontend/system/src/Admin/Interactions/InteractionGroupTab.tsx
index 40ba05e14..7568edf00 100644
--- a/frontend/system/src/Admin/Interactions/InteractionGroupTab.tsx
+++ b/frontend/system/src/Admin/Interactions/InteractionGroupTab.tsx
@@ -37,7 +37,7 @@ const InteractionGroupTabComponent = () => {
   const { onOpen, onClose, isOpen, entity, mode } =
     useEditModal<InteractionGroupFragment>();
 
-  const { data, isLoading } = useAllDrugInteractionGroups();
+  const { data, isLoading, isError } = useAllDrugInteractionGroups();
 
   const [deleteErrors, setDeleteErrors] = React.useState<DeleteError[]>([]);
   const selectedRows = useTableStore(state =>
@@ -170,6 +170,7 @@ const InteractionGroupTabComponent = () => {
         columns={columns}
         data={data}
         isLoading={isLoading}
+        isError={isError}
         onRowClick={onOpen}
       />
     </>
diff --git a/frontend/system/src/Admin/Interactions/InteractionsTab.tsx b/frontend/system/src/Admin/Interactions/InteractionsTab.tsx
index 974b19c07..1e3be98ca 100644
--- a/frontend/system/src/Admin/Interactions/InteractionsTab.tsx
+++ b/frontend/system/src/Admin/Interactions/InteractionsTab.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { AppBarButtonsPortal, LoadingButton } from '@common/components';
+import {
+  AppBarButtonsPortal,
+  AppBarContentPortal,
+  DeleteLinesDropdownItem,
+  DropdownMenu,
+  LoadingButton,
+} from '@common/components';
 import { useTranslation } from '@common/intl';
 import {
   createTableStore,
@@ -7,26 +13,38 @@ import {
   PlusCircleIcon,
   TableProvider,
   useColumns,
+  useTableStore,
 } from '@common/ui';
 import { useEditModal } from '@common/hooks';
 import { InteractionEditModal } from './InteractionEditModal';
 import { useAllDrugInteractions } from './api/hooks/useInteractions';
 import { DrugInteractionFragment } from './api/operations.generated';
+import { useDeleteInteraction } from './api/hooks/useDeleteInteraction';
 
-export const InteractionTab = () => {
+export const InteractionTabComponent = () => {
   const t = useTranslation('system');
   const { onOpen, onClose, isOpen, entity, mode } =
-    useEditModal<DrugInteractionFragment>(); //TODO replace with actual data type
+    useEditModal<DrugInteractionFragment>();
+
+  const { mutateAsync: deleteInteraction } = useDeleteInteraction();
 
   const columns = useColumns<DrugInteractionFragment>([
     { key: 'name', label: 'label.name' },
     { key: 'severity', label: 'label.severity' },
+    'selection',
   ]);
 
-  const { data, isLoading } = useAllDrugInteractions();
+  const { data, isLoading, isError } = useAllDrugInteractions();
+
+  const selectedRows = useTableStore(state =>
+    Object.keys(state.rowState)
+      .filter(id => state.rowState[id]?.isSelected)
+      .map(selectedId => data?.find(({ id }) => selectedId === id))
+      .filter(Boolean)
+  );
 
   return (
-    <TableProvider createStore={createTableStore}>
+    <>
       {isOpen && (
         <InteractionEditModal
           isOpen={isOpen}
@@ -44,8 +62,32 @@ export const InteractionTab = () => {
           {t('label.add-interaction')}
         </LoadingButton>
       </AppBarButtonsPortal>
+      <AppBarContentPortal marginBottom={'10px'}>
+        <DropdownMenu label={t('label.select')}>
+          <DeleteLinesDropdownItem
+            selectedRows={selectedRows}
+            deleteItem={async (item: DrugInteractionFragment) => {
+              await deleteInteraction(item.id);
+            }}
+          />
+        </DropdownMenu>
+      </AppBarContentPortal>
 
-      <DataTable columns={columns} data={data} onRowClick={onOpen} />
+      <DataTable
+        columns={columns}
+        isLoading={isLoading}
+        isError={isError}
+        data={data}
+        onRowClick={onOpen}
+      />
+    </>
+  );
+};
+
+export const InteractionTab = () => {
+  return (
+    <TableProvider createStore={createTableStore}>
+      <InteractionTabComponent />
     </TableProvider>
   );
 };
diff --git a/frontend/system/src/Admin/Interactions/api/hooks/useDeleteInteraction.ts b/frontend/system/src/Admin/Interactions/api/hooks/useDeleteInteraction.ts
new file mode 100644
index 000000000..9abaedb7c
--- /dev/null
+++ b/frontend/system/src/Admin/Interactions/api/hooks/useDeleteInteraction.ts
@@ -0,0 +1,13 @@
+import { useGql, useMutation, useQueryClient } from '@uc-frontend/common';
+import { getSdk } from '../operations.generated';
+import { DRUG_INTERACTION_KEY } from '.';
+
+export const useDeleteInteraction = () => {
+  const { client } = useGql();
+  const sdk = getSdk(client);
+  const queryClient = useQueryClient();
+
+  return useMutation(async (id: string) => sdk.DeleteDrugInteraction({ id }), {
+    onSettled: () => queryClient.invalidateQueries(DRUG_INTERACTION_KEY),
+  });
+};
diff --git a/frontend/system/src/Admin/Interactions/api/hooks/useUpsertInteraction.ts b/frontend/system/src/Admin/Interactions/api/hooks/useUpsertInteraction.ts
new file mode 100644
index 000000000..3eeb72985
--- /dev/null
+++ b/frontend/system/src/Admin/Interactions/api/hooks/useUpsertInteraction.ts
@@ -0,0 +1,15 @@
+import { useQueryClient, useGql } from '@uc-frontend/common';
+import { getSdk } from '../operations.generated';
+import { DRUG_INTERACTION_KEY } from '.';
+
+export const useUpsertDrugInteraction = () => {
+  const { client } = useGql();
+  const sdk = getSdk(client);
+  const queryClient = useQueryClient();
+
+  const invalidateQueries = () => {
+    queryClient.invalidateQueries([DRUG_INTERACTION_KEY]);
+  };
+
+  return [sdk.UpsertDrugInteraction, invalidateQueries] as const;
+};