Display Drug Interactions (UI)

msupply-foundation · Feb 1, 2024 · 0de6382 · 0de6382
1 parent 42d659a
commit 0de6382
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 97 deletions.
diff --git a/frontend/common/src/types/schema.ts b/frontend/common/src/types/schema.ts
@@ -118,6 +118,12 @@ export type DeleteResponse = {
 
 export type DeleteUserAccountResponse = DeleteResponse;
 
+export type DrugInteractionConnector = {
+  __typename: 'DrugInteractionConnector';
+  data: Array<DrugInteractionNode>;
+  totalCount: Scalars['Int']['output'];
+};
+
 export type DrugInteractionGroupConnector = {
   __typename: 'DrugInteractionGroupConnector';
   data: Array<DrugInteractionGroupNode>;
@@ -134,6 +140,27 @@ export type DrugInteractionGroupNode = {
 
 export type DrugInteractionGroupsResponse = DrugInteractionGroupConnector;
 
+export type DrugInteractionNode = {
+  __typename: 'DrugInteractionNode';
+  action?: Maybe<Scalars['String']['output']>;
+  description?: Maybe<Scalars['String']['output']>;
+  drug1?: Maybe<EntityType>;
+  drug2?: Maybe<EntityType>;
+  group1?: Maybe<DrugInteractionGroupNode>;
+  group2?: Maybe<DrugInteractionGroupNode>;
+  id: Scalars['String']['output'];
+  name: Scalars['String']['output'];
+  reference?: Maybe<Scalars['String']['output']>;
+  severity: DrugInteractionSeverityNode;
+};
+
+export enum DrugInteractionSeverityNode {
+  Moderate = 'MODERATE',
+  NothingExpected = 'NOTHING_EXPECTED',
+  Severe = 'SEVERE',
+  Unknown = 'UNKNOWN'
+}
+
 export type DrugInteractionType = {
   __typename: 'DrugInteractionType';
   description: Scalars['String']['output'];
@@ -143,6 +170,8 @@ export type DrugInteractionType = {
   source: Scalars['String']['output'];
 };
 
+export type DrugInteractionsResponse = DrugInteractionConnector;
+
 export type EntityCollectionType = {
   __typename: 'EntityCollectionType';
   data: Array<EntityType>;
@@ -199,6 +228,7 @@ export type FullMutation = {
   approvePendingChange: UpsertEntityResponse;
   createUserAccount: CreateUserAccountResponse;
   deleteConfigurationItem: Scalars['Int']['output'];
+  deleteDrugInteraction: Scalars['Int']['output'];
   deleteDrugInteractionGroup: Scalars['Int']['output'];
   deleteUserAccount: DeleteUserAccountResponse;
   /**
@@ -214,6 +244,7 @@ export type FullMutation = {
   resetPasswordUsingToken: PasswordResetResponse;
   updatePendingChange: RequestChangeResponse;
   updateUserAccount: UpdateUserAccountResponse;
+  upsertDrugInteraction: Scalars['Int']['output'];
   upsertDrugInteractionGroup: Scalars['Int']['output'];
   upsertPropertyConfigurationItem: Scalars['Int']['output'];
   /** Validates Password Reset Token */
@@ -248,6 +279,11 @@ export type FullMutationDeleteConfigurationItemArgs = {
 };
 
 
+export type FullMutationDeleteDrugInteractionArgs = {
+  code: Scalars['String']['input'];
+};
+
+
 export type FullMutationDeleteDrugInteractionGroupArgs = {
   code: Scalars['String']['input'];
 };
@@ -295,6 +331,11 @@ export type FullMutationUpdateUserAccountArgs = {
 };
 
 
+export type FullMutationUpsertDrugInteractionArgs = {
+  input: UpsertDrugInteractionInput;
+};
+
+
 export type FullMutationUpsertDrugInteractionGroupArgs = {
   input: UpsertDrugInteractionGroupInput;
 };
@@ -311,8 +352,10 @@ export type FullMutationValidatePasswordResetTokenArgs = {
 
 export type FullQuery = {
   __typename: 'FullQuery';
-  /** Get the configuration items for a given type. */
+  /** Get all the drug interaction groups, no pagination as we assume it won't get too big... */
   allDrugInteractionGroups: DrugInteractionGroupsResponse;
+  /** Get all the drug interactions, no pagination as we assume it won't get too big... */
+  allDrugInteractions: DrugInteractionsResponse;
   apiVersion: Scalars['String']['output'];
   /**
    * Retrieves a new auth bearer and refresh token
@@ -454,8 +497,10 @@ export type LogNode = {
 export enum LogNodeType {
   ConfigurationItemCreated = 'CONFIGURATION_ITEM_CREATED',
   ConfigurationItemDeleted = 'CONFIGURATION_ITEM_DELETED',
-  InteractionGroupCreated = 'INTERACTION_GROUP_CREATED',
-  InteractionGroupDeleted = 'INTERACTION_GROUP_DELETED',
+  DrugInteractionDeleted = 'DRUG_INTERACTION_DELETED',
+  DrugInteractionGroupDeleted = 'DRUG_INTERACTION_GROUP_DELETED',
+  DrugInteractionGroupUpserted = 'DRUG_INTERACTION_GROUP_UPSERTED',
+  DrugInteractionUpserted = 'DRUG_INTERACTION_UPSERTED',
   PropertyConfigurationItemUpserted = 'PROPERTY_CONFIGURATION_ITEM_UPSERTED',
   UniversalCodeChangeApproved = 'UNIVERSAL_CODE_CHANGE_APPROVED',
   UniversalCodeChangeRejected = 'UNIVERSAL_CODE_CHANGE_REJECTED',
@@ -661,6 +706,19 @@ export type UpsertDrugInteractionGroupInput = {
   name: Scalars['String']['input'];
 };
 
+export type UpsertDrugInteractionInput = {
+  action: Scalars['String']['input'];
+  description: Scalars['String']['input'];
+  drug1?: InputMaybe<Scalars['String']['input']>;
+  drug2?: InputMaybe<Scalars['String']['input']>;
+  group1?: InputMaybe<Scalars['String']['input']>;
+  group2?: InputMaybe<Scalars['String']['input']>;
+  id: Scalars['String']['input'];
+  name: Scalars['String']['input'];
+  reference: Scalars['String']['input'];
+  severity: DrugInteractionSeverityNode;
+};
+
 export type UpsertEntityInput = {
   alternativeNames?: InputMaybe<Array<AlternativeNameInput>>;
   category?: InputMaybe<Scalars['String']['input']>;

diff --git a/frontend/system/src/Admin/Interactions/InteractionEditModal.tsx b/frontend/system/src/Admin/Interactions/InteractionEditModal.tsx
@@ -12,52 +12,18 @@ import { ModalMode, useDialog } from '@common/hooks';
 import { CheckIcon } from '@common/icons';
 import { useTranslation } from '@common/intl';
 import { Grid } from '@common/ui';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useUuid } from '../../hooks';
 import { useEntities } from '../../Entities/api';
 import { useAllDrugInteractionGroups } from './api';
-import { useTheme } from '@common/styles';
 import { DrugOrGroupSelector } from './DrugOrGroupSelector';
-
-// TODO: Use real type from api
-enum InteractionSeverity {
-  LOW = 'LOW',
-  MEDIUM = 'MEDIUM',
-  HIGH = 'HIGH',
-}
-
-/*
-type DrugInteraction {
-  id: ID!
-  interaction_id: String!
-    @id
-    @dgraph(pred: "interaction_id")
-    @search(by: [exact])
-  name: String! @dgraph(pred: "name") @search(by: [exact, fulltext, trigram])
-  severity: DrugInteractionSeverity! @search(by: [exact])
-  description: String @dgraph(pred: "description")
-  action: String @dgraph(pred: "action")
-  reference: String @dgraph(pred: "reference")
-  groups: [DrugInteractionGroup]
-    @dgraph(pred: "groups")
-    @hasInverse(field: interactions)
-  drugs: [Entity] @dgraph(pred: "drugs")
-}
-*/
-// TODO: Use real type from api
-type InteractionFragment = {
-  id: string;
-  name: string;
-  severity: InteractionSeverity;
-  description: string;
-  action: string;
-  reference: string;
-};
+import { DrugInteractionSeverityNode } from '@common/types';
+import { DrugInteractionFragment } from './api/operations.generated';
 
 type InteractionEditModalProps = {
   isOpen: boolean;
   mode: ModalMode | null;
-  interaction: InteractionFragment | null;
+  interaction: DrugInteractionFragment | null;
   onClose: () => void;
 };
 
@@ -70,13 +36,18 @@ export const InteractionEditModal = ({
   const t = useTranslation('system');
   const uuid = useUuid();
 
-  const [draft, setDraft] = useState<InteractionFragment>({
+  const [draft, setDraft] = useState<DrugInteractionFragment>({
     id: interaction?.id ?? uuid(),
     name: interaction?.name ?? '',
-    severity: interaction?.severity ?? InteractionSeverity.LOW,
+    severity:
+      interaction?.severity ?? DrugInteractionSeverityNode.NothingExpected,
     description: interaction?.description ?? '',
     action: interaction?.action ?? '',
     reference: interaction?.reference ?? '',
+    drug1: interaction?.drug1,
+    drug2: interaction?.drug2,
+    group1: interaction?.group1,
+    group2: interaction?.group2,
   });
 
   const { data: drugs, isLoading: drugListLoading } = useEntities({
@@ -143,7 +114,7 @@ export const InteractionEditModal = ({
           <DrugOrGroupSelector
             drugs={drugs?.data ?? []}
             groups={groups ?? []}
-            initialSelectedId={''} //TODO
+            initialSelectedId={draft.group1?.id ?? draft.drug1?.code}
             setSelection={function (input: {
               drugId?: string | undefined;
               groupId?: string | undefined;
@@ -161,7 +132,7 @@ export const InteractionEditModal = ({
           <DrugOrGroupSelector
             drugs={drugs?.data ?? []}
             groups={groups ?? []}
-            initialSelectedId={''} // todo
+            initialSelectedId={draft.group2?.id ?? draft.drug2?.code}
             setSelection={function (input: {
               drugId?: string | undefined;
               groupId?: string | undefined;
@@ -175,16 +146,18 @@ export const InteractionEditModal = ({
           <Select
             label={t('label.severity')}
             required
-            value={draft?.severity ?? InteractionSeverity.LOW}
-            options={Object.values(InteractionSeverity).map(severity => ({
-              id: severity,
-              label: severity,
-              value: severity,
-            }))}
+            value={draft?.severity ?? DrugInteractionSeverityNode.Unknown}
+            options={Object.values(DrugInteractionSeverityNode).map(
+              severity => ({
+                id: severity,
+                label: severity,
+                value: severity,
+              })
+            )}
             onChange={e =>
               setDraft({
                 ...draft,
-                severity: e.target.value as InteractionSeverity,
+                severity: e.target.value as DrugInteractionSeverityNode,
               })
             }
             fullWidth

diff --git a/frontend/system/src/Admin/Interactions/InteractionsTab.tsx b/frontend/system/src/Admin/Interactions/InteractionsTab.tsx
@@ -10,59 +10,20 @@ import {
 } from '@common/ui';
 import { useEditModal } from '@common/hooks';
 import { InteractionEditModal } from './InteractionEditModal';
-
-// TODO: Use real type from api
-enum InteractionSeverity {
-  LOW = 'LOW',
-  MEDIUM = 'MEDIUM',
-  HIGH = 'HIGH',
-}
-
-// TODO: Use real type from api
-type Interaction = {
-  id: string;
-  name: string;
-  severity: InteractionSeverity;
-  description: string;
-  action: string;
-  reference: string;
-};
+import { useAllDrugInteractions } from './api/hooks/useInteractions';
+import { DrugInteractionFragment } from './api/operations.generated';
 
 export const InteractionTab = () => {
   const t = useTranslation('system');
-  const { onOpen, onClose, isOpen, entity, mode } = useEditModal<Interaction>(); //TODO replace with actual data type
+  const { onOpen, onClose, isOpen, entity, mode } =
+    useEditModal<DrugInteractionFragment>(); //TODO replace with actual data type
 
-  const columns = useColumns<Interaction>([
+  const columns = useColumns<DrugInteractionFragment>([
     { key: 'name', label: 'label.name' },
     { key: 'severity', label: 'label.severity' },
   ]);
 
-  const data = [
-    {
-      id: '1',
-      name: 'Interaction 1',
-      severity: InteractionSeverity.LOW,
-      description: 'Description 1',
-      action: 'Action 1',
-      reference: 'Reference 1',
-    },
-    {
-      id: '2',
-      name: 'Interaction 2',
-      severity: InteractionSeverity.MEDIUM,
-      description: 'Description 2',
-      action: 'Action 2',
-      reference: 'Reference 2',
-    },
-    {
-      id: '3',
-      name: 'Interaction 3',
-      severity: InteractionSeverity.HIGH,
-      description: 'Description 3',
-      action: 'Action 3',
-      reference: 'Reference 3',
-    },
-  ];
+  const { data, isLoading } = useAllDrugInteractions();
 
   return (
     <TableProvider createStore={createTableStore}>

diff --git a/frontend/system/src/Admin/Interactions/api/hooks/index.ts b/frontend/system/src/Admin/Interactions/api/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useInteractionGroups';
 export * from './useUpsertInteractionGroup';
 
 export const DRUG_INTERACTION_GROUP_KEY = 'DRUG_INTERACTION_GROUP';
+export const DRUG_INTERACTION_KEY = 'DRUG_INTERACTION';
diff --git a/frontend/system/src/Admin/Interactions/api/hooks/useInteractions.ts b/frontend/system/src/Admin/Interactions/api/hooks/useInteractions.ts
@@ -0,0 +1,15 @@
+import { useGql, useQuery } from '@uc-frontend/common';
+import { getSdk } from '../operations.generated';
+import { DRUG_INTERACTION_KEY } from '.';
+
+export const useAllDrugInteractions = () => {
+  const { client } = useGql();
+  const sdk = getSdk(client);
+
+  const cacheKeys = [DRUG_INTERACTION_KEY];
+
+  return useQuery(cacheKeys, async () => {
+    const response = await sdk.DrugInteractions();
+    return response?.allDrugInteractions?.data ?? [];
+  });
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@ export * from './useInteractionGroups';
		export * from './useUpsertInteractionGroup';

		export const DRUG_INTERACTION_GROUP_KEY = 'DRUG_INTERACTION_GROUP';
		export const DRUG_INTERACTION_KEY = 'DRUG_INTERACTION';