feat: use LoadingAndErrorComponent and fix queries

helpwave · Jul 30, 2023 · acfc5df · acfc5df
1 parent 29de621
commit acfc5df
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 44 deletions.
diff --git a/lib/components/user_input/Select.tsx b/lib/components/user_input/Select.tsx
@@ -36,7 +36,7 @@ export const Select = <T, >({ value, label, options, onChange, isHidingCurrentVa
         {({ open }) => (
           <>
             <Menu.Button
-              className={tx('inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-3 hover:bg-gray-100 font-medium', { 'rounded-b-lg': !open })}
+              className={tx('inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 hover:bg-gray-100 font-medium', { 'rounded-b-lg': !open })}
             >
               <span>{options.find(option => option.value === value)?.label ?? hintText}</span>
               {open ? <ChevronUp/> : <ChevronDown/>}

diff --git a/tasks/components/RoomBedDropDown.tsx b/tasks/components/RoomBedDropDown.tsx
@@ -8,6 +8,7 @@ import { Undo2 } from 'lucide-react'
 import { Select } from '@helpwave/common/components/user_input/Select'
 import { Span } from '@helpwave/common/components/Span'
 import { noop } from '@helpwave/common/util/noop'
+import { LoadingAndErrorComponent } from '@helpwave/common/components/LoadingAndErrorComponent'
 
 type RoomBedDropDownTranslation = {
   saved: string,
@@ -57,47 +58,45 @@ export const RoomBedDropDown = ({
     setCurrentSelection(initialRoomAndBed)
   }, [initialRoomAndBed])
 
-  // TODO use loading component
-  if (isLoading) {
-    return <div>Loading RoomBedDropDown</div>
-  }
-
-  if (isError || !data || !currentRoom) {
-    return <div>Error in RoomBedDropDown</div>
-  }
-
   const hasChanges = initialRoomAndBed.bedID !== currentSelection.bedID || initialRoomAndBed.roomID !== currentSelection.roomID
   return (
-    <div className={tw('flex flex-col gap-y-2')}>
-      <div className={tw('flex flex-row gap-x-2 items-center')}>
-        <Select
-          className={tw('min-w-[100px]')}
-          value={currentSelection.roomID}
-          options={data.map(room => ({ value: room.id, label: room.name }))}
-          onChange={value => setCurrentSelection({ ...currentSelection, roomID: value, bedID: undefined })}
-        />
-        <Select
-          className={tw('min-w-[100px]')}
-          value={currentSelection.bedID}
-          options={currentRoom.beds.map(value => ({ value: value.id, label: value.name }))}
-          onChange={value => {
-            setCurrentSelection({
-              ...currentSelection,
-              bedID: value
-            })
-            assignBedMutation.mutate({ id: value, patientID: initialRoomAndBed.patientID })
-          }}
-        />
-        <div
-          className={tx('h-4 w-4 text-transparent', { '!text-black cursor-pointer': hasChanges })}
-          onClick={() => {
-            if (hasChanges) {
-              setCurrentSelection({ ...initialRoomAndBed })
-            }
-          }}
-        ><Undo2/></div>
-      </div>
-      <Span className={tx({ '!text-hw-negative-400': hasChanges, '!text-hw-positive-400': !hasChanges })}>{hasChanges ? translation.unsaved : translation.saved}</Span>
-    </div>
+    <LoadingAndErrorComponent
+      isLoading={isLoading}
+      hasError={isError || !data || !currentRoom}
+    >
+      {data && currentRoom && (
+        <div className={tw('flex flex-col gap-y-2')}>
+          <div className={tw('flex flex-row gap-x-2 items-center')}>
+            <Select
+              className={tw('min-w-[100px]')}
+              value={currentSelection.roomID}
+              options={data.map(room => ({ value: room.id, label: room.name }))}
+              onChange={value => setCurrentSelection({ ...currentSelection, roomID: value, bedID: undefined })}
+            />
+            <Select
+              className={tw('min-w-[150px]')}
+              value={currentSelection.bedID}
+              options={currentRoom.beds.map(value => ({ value: value.id, label: value.name }))}
+              onChange={value => {
+                setCurrentSelection({
+                  ...currentSelection,
+                  bedID: value
+                })
+                assignBedMutation.mutate({ id: value, patientID: initialRoomAndBed.patientID })
+              }}
+            />
+            <div
+              className={tx('h-4 w-4 text-transparent', { '!text-black cursor-pointer': hasChanges })}
+              onClick={() => {
+                if (hasChanges) {
+                  setCurrentSelection({ ...initialRoomAndBed })
+                }
+              }}
+            ><Undo2/></div>
+          </div>
+          <Span className={tx({ '!text-hw-negative-400': hasChanges, '!text-hw-positive-400': !hasChanges })}>{hasChanges ? translation.unsaved : translation.saved}</Span>
+        </div>
+      )}
+    </LoadingAndErrorComponent>
   )
 }
diff --git a/tasks/mutations/patient_mutations.ts b/tasks/mutations/patient_mutations.ts
@@ -208,14 +208,15 @@ export const usePatientListQuery = (wardID: string) => {
 }
 
 export const usePatientCreateMutation = (callback: (patient: PatientDTO) => void) => {
+  const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (patient: PatientDTO) => {
       const req = new CreatePatientRequest()
       req.setNotes(patient.note)
       req.setHumanReadableIdentifier(patient.name)
       const res = await patientService.createPatient(req, getAuthenticatedGrpcMetadata())
+
       if (!res.getId()) {
-        // TODO some check whether request was successful
         console.error('create room failed')
       }
 
@@ -224,26 +225,35 @@ export const usePatientCreateMutation = (callback: (patient: PatientDTO) => void
       callback(patient)
       return patient
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([roomsQueryKey]).catch(reason => console.log(reason))
+    }
   })
 }
 
 export const usePatientUpdateMutation = (callback: (patient: PatientDTO) => void) => {
+  const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (patient: PatientDTO) => {
       const req = new UpdatePatientRequest()
       req.setId(patient.id)
       req.setNotes(patient.note)
       req.setHumanReadableIdentifier(patient.name)
 
-      await patientService.updatePatient(req, getAuthenticatedGrpcMetadata())
+      const res = await patientService.updatePatient(req, getAuthenticatedGrpcMetadata())
 
-      // TODO some check whether request was successful
+      if (!res.toObject()) {
+        console.error('error in PatientUpdate')
+      }
 
       patient = { ...patient }
 
       callback(patient)
       return patient
     },
+    onSuccess: () => {
+      queryClient.refetchQueries([roomsQueryKey]).catch(reason => console.log(reason))
+    }
   })
 }