fix: resolve appointment form validation and socket connection issues
- Fix status enum in browser.ts (uppercase → lowercase values) - Fix date validation (z.string → z.coerce.date) so form accepts Date objects - Add missing type/userId/title fields to browser.ts appointment schema - Replace nested PatientSearch Select with simple inline Input to fix patient selection - Fix mutationFn to throw on non-ok responses so backend errors surface correctly - Connect socket.io directly to backend (port 5000) instead of Vite proxy to fix AggregateError on startup Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gitead
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { format } from "date-fns";
|
||||
@@ -35,10 +35,6 @@ import {
|
||||
} from "@repo/db/types";
|
||||
import { DateInputField } from "@/components/ui/dateInputField";
|
||||
import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
|
||||
import {
|
||||
PatientSearch,
|
||||
SearchCriteria,
|
||||
} from "@/components/patients/patient-search";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
interface AppointmentFormProps {
|
||||
@@ -152,75 +148,26 @@ export function AppointmentForm({
|
||||
});
|
||||
|
||||
// -----------------------------
|
||||
// PATIENT SEARCH (reuse PatientSearch)
|
||||
// PATIENT SEARCH (simple inline search)
|
||||
// -----------------------------
|
||||
const [selectOpen, setSelectOpen] = useState(false);
|
||||
const [patientSearchTerm, setPatientSearchTerm] = useState("");
|
||||
const [debouncedPatientSearch] = useDebounce(patientSearchTerm, 300);
|
||||
|
||||
// search criteria state (reused from patient page)
|
||||
const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | null>(
|
||||
null
|
||||
);
|
||||
const [isSearchActive, setIsSearchActive] = useState(false);
|
||||
const searchKeyPart = debouncedPatientSearch.trim() || "recent";
|
||||
|
||||
// debounce search criteria so we don't hammer the backend
|
||||
const [debouncedSearchCriteria] = useDebounce(searchCriteria, 300);
|
||||
|
||||
const limit = 50; // dropdown size
|
||||
const offset = 0; // always first page for dropdown
|
||||
|
||||
// compute key used in patient page: recent or trimmed term
|
||||
const searchKeyPart = useMemo(
|
||||
() => debouncedSearchCriteria?.searchTerm?.trim() || "recent",
|
||||
[debouncedSearchCriteria]
|
||||
);
|
||||
|
||||
// Query function mirrors PatientTable logic (so backend contract is identical)
|
||||
const queryFn = async (): Promise<Patient[]> => {
|
||||
const trimmedTerm = debouncedSearchCriteria?.searchTerm?.trim();
|
||||
const isSearch = !!trimmedTerm && trimmedTerm.length > 0;
|
||||
const rawSearchBy = debouncedSearchCriteria?.searchBy || "name";
|
||||
const validSearchKeys = [
|
||||
"name",
|
||||
"phone",
|
||||
"insuranceId",
|
||||
"gender",
|
||||
"dob",
|
||||
"all",
|
||||
];
|
||||
const searchKey = validSearchKeys.includes(rawSearchBy)
|
||||
? rawSearchBy
|
||||
: "name";
|
||||
|
||||
let url: string;
|
||||
if (isSearch) {
|
||||
const searchParams = new URLSearchParams({
|
||||
limit: String(limit),
|
||||
offset: String(offset),
|
||||
});
|
||||
|
||||
if (searchKey === "all") {
|
||||
searchParams.set("term", trimmedTerm!);
|
||||
} else {
|
||||
searchParams.set(searchKey, trimmedTerm!);
|
||||
}
|
||||
|
||||
url = `/api/patients/search?${searchParams.toString()}`;
|
||||
} else {
|
||||
url = `/api/patients/recent?limit=${limit}&offset=${offset}`;
|
||||
}
|
||||
const trimmed = debouncedPatientSearch.trim();
|
||||
const url = trimmed
|
||||
? `/api/patients/search?name=${encodeURIComponent(trimmed)}&limit=50&offset=0`
|
||||
: `/api/patients/recent?limit=50&offset=0`;
|
||||
|
||||
const res = await apiRequest("GET", url);
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res
|
||||
.json()
|
||||
.catch(() => ({ message: "Failed to fetch patients" }));
|
||||
const err = await res.json().catch(() => ({ message: "Failed to fetch patients" }));
|
||||
throw new Error(err.message || "Failed to fetch patients");
|
||||
}
|
||||
|
||||
const payload = await res.json();
|
||||
// Expect payload to be { patients: Patient[], totalCount: number } or just an array.
|
||||
// Normalize: if payload.patients exists, return it; otherwise assume array of patients.
|
||||
return Array.isArray(payload) ? payload : (payload.patients ?? []);
|
||||
};
|
||||
|
||||
@@ -231,12 +178,11 @@ export function AppointmentForm({
|
||||
} = useQuery<Patient[], Error>({
|
||||
queryKey: ["patients-dropdown", searchKeyPart],
|
||||
queryFn,
|
||||
enabled: selectOpen || !!debouncedSearchCriteria?.searchTerm,
|
||||
enabled: selectOpen || debouncedPatientSearch.trim().length > 0,
|
||||
});
|
||||
|
||||
// If select opened and no patients loaded, fetch
|
||||
useEffect(() => {
|
||||
if (selectOpen && (!patients || patients.length === 0)) {
|
||||
if (selectOpen && patients.length === 0) {
|
||||
refetchPatients();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -418,11 +364,7 @@ export function AppointmentForm({
|
||||
onOpenChange={(open: boolean) => {
|
||||
setSelectOpen(open);
|
||||
if (!open) {
|
||||
// reset transient search state when the dropdown closes
|
||||
setSearchCriteria(null);
|
||||
setIsSearchActive(false);
|
||||
|
||||
// Remove transient prefill if the main cached list contains it now
|
||||
setPatientSearchTerm("");
|
||||
if (
|
||||
prefillPatient &&
|
||||
patients &&
|
||||
@@ -433,7 +375,6 @@ export function AppointmentForm({
|
||||
setPrefillPatient(null);
|
||||
}
|
||||
} else {
|
||||
// when opened, ensure initial results
|
||||
if (!patients || patients.length === 0) refetchPatients();
|
||||
}
|
||||
}}
|
||||
@@ -458,21 +399,12 @@ export function AppointmentForm({
|
||||
</FormControl>
|
||||
|
||||
<SelectContent>
|
||||
{/* Reuse full PatientSearch UI inside dropdown — callbacks update the query */}
|
||||
<div className="p-2" onKeyDown={(e) => e.stopPropagation()}>
|
||||
<PatientSearch
|
||||
onSearch={(criteria) => {
|
||||
setSearchCriteria(criteria);
|
||||
setIsSearchActive(true);
|
||||
}}
|
||||
onClearSearch={() => {
|
||||
setSearchCriteria({
|
||||
searchTerm: "",
|
||||
searchBy: "name",
|
||||
});
|
||||
setIsSearchActive(false);
|
||||
}}
|
||||
isSearchActive={isSearchActive}
|
||||
<Input
|
||||
placeholder="Search by name..."
|
||||
value={patientSearchTerm}
|
||||
onChange={(e) => setPatientSearchTerm(e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,13 +6,16 @@
|
||||
*/
|
||||
import { io, Socket } from "socket.io-client";
|
||||
|
||||
// Connect directly to backend to avoid Vite's WS proxy failing on upgrade,
|
||||
// which causes an unhandled AggregateError from engine.io's Promise.any() probe.
|
||||
const SOCKET_URL =
|
||||
import.meta.env.VITE_API_BASE_URL_BACKEND ||
|
||||
(typeof window !== "undefined" ? window.location.origin : "");
|
||||
import.meta.env.VITE_API_BASE_URL_BACKEND || "http://localhost:5000";
|
||||
|
||||
export const socket: Socket = io(SOCKET_URL, {
|
||||
withCredentials: true,
|
||||
autoConnect: true,
|
||||
reconnectionAttempts: 5,
|
||||
reconnectionDelay: 2000,
|
||||
});
|
||||
|
||||
socket.on("connect", () => {
|
||||
@@ -22,3 +25,7 @@ socket.on("connect", () => {
|
||||
socket.on("disconnect", () => {
|
||||
console.log("[socket] disconnected");
|
||||
});
|
||||
|
||||
socket.on("connect_error", (err) => {
|
||||
console.warn("[socket] connection error:", err.message);
|
||||
});
|
||||
|
||||
@@ -274,7 +274,9 @@ export default function AppointmentsPage() {
|
||||
"/api/appointments/upsert",
|
||||
appointment
|
||||
);
|
||||
return await res.json();
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body?.message || "Failed to create appointment");
|
||||
return body;
|
||||
},
|
||||
onSuccess: (appointment) => {
|
||||
toast({
|
||||
|
||||
Reference in New Issue
Block a user