From fdff6ba01fd3d8273c3c4d5de2f722b761b378ab Mon Sep 17 00:00:00 2001
From: samau3 <samau415@gmail.com>
Date: Wed, 18 Sep 2024 23:27:10 -0700
Subject: [PATCH] Reduce prop drilling and unnecessary complexity

Resolved bug when trying to change prefilled healthcare choices due to improper deletion logic
Removed unnecessary inputValue prop since it was duplicative of searchQuery
---
 .../pages/patients/PatientRegistration.jsx    | 16 ++++++---------
 .../inputs/HealthcareChoicesSearch.jsx        | 20 +++----------------
 .../inputs/SearchDatabaseInputField.jsx       |  8 ++------
 3 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/client/src/pages/patients/PatientRegistration.jsx b/client/src/pages/patients/PatientRegistration.jsx
index 53fadca1..f2f08f07 100644
--- a/client/src/pages/patients/PatientRegistration.jsx
+++ b/client/src/pages/patients/PatientRegistration.jsx
@@ -25,8 +25,8 @@ const FORM_TABS = {
 export default function PatientRegistration() {
   const [loading, setLoading] = useState(false);
   const [initialMedicalData, setInitialMedicalData] = useState({});
-  const [initialHospitalData, setInitialHospitalData] = useState({});
-  const [initialPhysicianData, setInitialPhysicianData] = useState({});
+  const [initialHospitalData, setInitialHospitalData] = useState('');
+  const [initialPhysicianData, setInitialPhysicianData] = useState('');
   const [openedSection, setOpenedSection] = useState('patientData');
   const [opened, { open, close }] = useDisclosure(false);
 
@@ -167,15 +167,11 @@ export default function PatientRegistration() {
         }),
       });
 
-      setInitialHospitalData({
-        id: hospital ? hospital.id : '',
-        name: hospital ? hospital.name : '',
-      });
+      setInitialHospitalData(hospital ? hospital.name : '');
 
-      setInitialPhysicianData({
-        id: physician ? physician.id : '',
-        name: physician ? `${physician.firstName} ${physician.lastName}` : '',
-      });
+      setInitialPhysicianData(
+        physician ? `${physician.firstName} ${physician.lastName}` : '',
+      );
 
       const patientData = {
         firstName,
diff --git a/client/src/pages/patients/inputs/HealthcareChoicesSearch.jsx b/client/src/pages/patients/inputs/HealthcareChoicesSearch.jsx
index d5f0753f..197ca5d2 100644
--- a/client/src/pages/patients/inputs/HealthcareChoicesSearch.jsx
+++ b/client/src/pages/patients/inputs/HealthcareChoicesSearch.jsx
@@ -22,16 +22,14 @@ const healthcareChoicesSearchProps = {
 export default function HealthcareChoicesSearch({ form, choice, initialData }) {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
-  const [value, setValue] = useState({ name: '', id: '' });
   const [empty, setEmpty] = useState(false);
   const [search, setSearch] = useState('');
 
   const abortController = useRef();
 
   useEffect(() => {
-    if (Object.keys(initialData).length > 0) {
-      setValue(initialData);
-      setSearch(initialData.name);
+    if (initialData.length > 0) {
+      setSearch(initialData);
     }
   }, [initialData]);
 
@@ -73,22 +71,12 @@ export default function HealthcareChoicesSearch({ form, choice, initialData }) {
 
   const handleSelectValue = (id, key) => {
     const name = key.children;
-    setValue({ id, name });
+    // setValue({ id, name });
     setSearch(name);
     form.setFieldValue(`healthcareChoices.${choice}Id`, id);
     combobox.closeDropdown();
   };
 
-  const handleKeyDown = (event) => {
-    if (event.key === 'Backspace' && search?.length <= 1) {
-      event.preventDefault();
-      setValue({ name: '', id: '' });
-      setSearch('');
-      fetchOptions('');
-      form.setFieldValue(`healthcareChoices.${choice}Id`, '');
-    }
-  };
-
   const options = (data || []).map((item) => (
     <Combobox.Option value={item.id} key={item.id}>
       {item.name}
@@ -123,13 +111,11 @@ export default function HealthcareChoicesSearch({ form, choice, initialData }) {
       label={
         choice === 'hospital' ? 'Hospital of Choice' : 'Preferred Care Provider'
       }
-      inputValue={value.name ? value.name : search}
       searchQuery={search}
       handleSelectValue={handleSelectValue}
       fetchOptions={fetchOptions}
       comboboxOptions={renderComboxContent}
       handleSearch={handleSearch}
-      handleKeyDown={handleKeyDown}
     />
   );
 }
diff --git a/client/src/pages/patients/inputs/SearchDatabaseInputField.jsx b/client/src/pages/patients/inputs/SearchDatabaseInputField.jsx
index 07c82925..5880bd9a 100644
--- a/client/src/pages/patients/inputs/SearchDatabaseInputField.jsx
+++ b/client/src/pages/patients/inputs/SearchDatabaseInputField.jsx
@@ -13,7 +13,6 @@ const searchDatabaseInputFieldProps = {
   fetchOptions: PropTypes.func.isRequired,
   comboboxOptions: PropTypes.func.isRequired,
   handleSearch: PropTypes.func.isRequired,
-  handleKeyDown: PropTypes.func.isRequired,
   children: PropTypes.object,
 };
 
@@ -24,7 +23,6 @@ const searchDatabaseInputFieldProps = {
 export default function SearchDatabaseInputField({
   data,
   loading,
-  inputValue,
   searchQuery,
   label,
   combobox,
@@ -32,7 +30,6 @@ export default function SearchDatabaseInputField({
   fetchOptions,
   comboboxOptions,
   handleSearch,
-  handleKeyDown,
   children = undefined,
 }) {
   return (
@@ -58,16 +55,15 @@ export default function SearchDatabaseInputField({
               }
             }}
             onBlur={() => combobox.closeDropdown()}
-            value={inputValue}
+            value={searchQuery}
             placeholder={`Search ${label}`}
             onChange={(event) => {
               combobox.updateSelectedOptionIndex();
               handleSearch(event.currentTarget.value);
               fetchOptions(event.currentTarget.value);
-              combobox.resetSelectedOption();
+              combobox.updateSelectedOptionIndex();
               combobox.openDropdown();
             }}
-            onKeyDown={(event) => handleKeyDown(event)}
             rightSection={loading ? <Loader size="xs" /> : null}
           />
         </Combobox.EventsTarget>