Fix frontend error handling and code quality (GRO-642)
HIGH Priority: 1. SetupWizard.jsx -> SetupWizard.tsx: renamed to .tsx with proper TypeScript types 2. deleteAppt missing error handling: added try/catch, response.ok check, alert on failure 3. GlobalSearch missing error state: added error state with user-visible error message MEDIUM Priority: 4. CustomerPortal unsafe type cast: fixed 'as any' to proper PortalAppointment type 5. Logo upload XSS risk: sanitized MIME types to png/jpeg/gif/webp only, removed SVG 6. Reports error handling: added ok checks before json() parsing to guard against invalid JSON on error responses LOW Priority: 8. Modal accessibility: added role='dialog', aria-modal='true', focus trap, Escape key handler, restore focus on close 9. PetPhotoUpload file size: added 50MB max file size check before resize 10. Types package: added photoKey and photoUploadedAt to Pet interface Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -26,6 +26,7 @@ export function GlobalSearch() {
|
||||
const [query, setQuery] = useState("");
|
||||
const [results, setResults] = useState<SearchResults | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
@@ -45,15 +46,18 @@ export function GlobalSearch() {
|
||||
|
||||
debounceRef.current = setTimeout(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}`);
|
||||
if (res.ok) {
|
||||
const data: SearchResults = await res.json();
|
||||
setResults(data);
|
||||
setOpen(true);
|
||||
} else {
|
||||
setError("Search failed. Please try again.");
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("GlobalSearch: fetch error", err);
|
||||
} catch {
|
||||
setError("Search failed. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -160,7 +164,13 @@ export function GlobalSearch() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !hasResults && (
|
||||
{!loading && error && (
|
||||
<div style={{ padding: "12px 16px", fontSize: 13, color: "#dc2626" }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && !hasResults && (
|
||||
<div style={{ padding: "12px 16px", fontSize: 13, color: "#6b7280" }}>
|
||||
No results found
|
||||
</div>
|
||||
|
||||
@@ -71,6 +71,12 @@ export function PetPhotoUpload({ petId, onUploaded }: Props) {
|
||||
}
|
||||
|
||||
async function handleFile(file: File) {
|
||||
const MAX_FILE_SIZE = 50 * 1024 * 1024;
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
setState({ status: "error", message: "File exceeds 50MB limit. Please choose a smaller image." });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!ACCEPTED_TYPES.includes(file.type)) {
|
||||
setState({ status: "error", message: "Please select a JPEG, PNG, WebP, or GIF image." });
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user