fix: added defensive programming and now page uses search input compo…

…nent

sanitas_frontend/src/views/SearchPatientView/index.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import Button from "src/components/Button";
 import DropdownMenu from "src/components/DropdownMenu";
 import { BaseInput, DateInput, RadioInput } from "src/components/Input";
+import SearchInput from "src/components/Input/search";
 import { NAV_PATHS } from "src/router";
 
 /**
@@ -27,6 +28,7 @@ export default function SearchPatientView({ searchPatientsApiCall, useStore }) {
 
   const [queryReturnedEmpty, setQueryReturnedEmpty] = useState(false);
   const [error, setError] = useState("");
+  const [searchTypeWasCUI, setSearchTypeWasCUI] = useState(false);
   const navigate = useNavigate();
 
   const showErrorMessage = (message) => setError(`ERROR: ${message}`);
@@ -38,8 +40,23 @@ export default function SearchPatientView({ searchPatientsApiCall, useStore }) {
     { value: "Carnet", label: "Carnet Estudiante" },
     { value: "NumeroColaborador", label: "Código Colaborador" },
     { value: "Nombres", label: "Nombres y Apellidos" },
+    { value: "CUI", label: "CUI" },
   ];
 
+  const handleInputChange = (e) => {
+    let value = e.target.value;
+    if (type === "Nombres") {
+      value = value.replace(/\d/g, "");
+    } else if (type != "Nombres") {
+      value = value.replace(/\D/g, "");
+    }
+
+    if (type === "CUI") {
+      value = value.slice(0, 13);
+    }
+    setSearchQuery(value, type);
+  };
+
   const searchBtnClick = async () => {
     hideErrorMessage();
     if (emptyQuery) {
@@ -48,6 +65,7 @@ export default function SearchPatientView({ searchPatientsApiCall, useStore }) {
     }
 
     const result = await searchPatientsApiCall(query, type);
+    setSearchTypeWasCUI(type === "CUI");
     if (result.error) {
       const { error } = result;
       if (error.cause) {
@@ -93,23 +111,29 @@ export default function SearchPatientView({ searchPatientsApiCall, useStore }) {
           onChange={(e) => setSearchQuery(query, e.target.value)}
           options={dropdownOptions}
         />
-        <BaseInput
+        <SearchInput
           type="text"
           value={query}
-          onChange={(e) => setSearchQuery(e.target.value, type)}
+          onChange={handleInputChange}
           placeholder="Ingrese su búsqueda..."
         />
         <Button text="Buscar" onClick={searchBtnClick} disabled={emptyQuery} />
       </div>
       <p style={{ color: "red" }}>{error}</p>
       {queryReturnedEmpty
-        ? (
-          <div>
-            <p>Parece que el paciente no existe!</p>
-            <Button text="Puedes añadir uno nuevo aquí" onClick={onAddNewPatientClick} />
-          </div>
-        )
-        : null}
+        && (!searchTypeWasCUI
+          ? (
+            <div>
+              <p>¡Parece que el paciente no existe!</p>
+              <p>Prueba buscarlo por CUI.</p>
+            </div>
+          )
+          : (
+            <div>
+              <p>Ingresa la información del paciente aquí.</p>
+              <Button text="Puedes añadir uno nuevo aquí." onClick={onAddNewPatientClick} />
+            </div>
+          ))}
       <div>
         {...patients.map((p) => (
           <div key={p.id}>