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
sfbrigade · Sep 19, 2024 · fdff6ba · fdff6ba
1 parent dfca65a
commit fdff6ba
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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,15 +23,13 @@ const searchDatabaseInputFieldProps = {
 export default function SearchDatabaseInputField({
   data,
   loading,
-  inputValue,
   searchQuery,
   label,
   combobox,
   handleSelectValue,
   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>