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:
Paperclip
2026-04-14 15:17:01 +00:00
committed by Flea Flicker
parent 2577e33c50
commit c786544369
11 changed files with 131 additions and 65 deletions
+13 -3
View File
@@ -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;