Files
redefined-designs/frontend/src/api.ts
T
bermudalambandClaude Opus 5 c77fdad2b9 fix: run migrations on boot and stop failures rendering as empty (#23)
The storefront showed no inventory after deploying the categories/tags
release. No data was lost: the code queried categories/item_tags/
items.category_id against a database where the migration had not been
run, and that failure was invisible at every layer.

Three changes, each addressing one layer:

Migrations now run at container start, so deployed code cannot be ahead
of the schema and the easily-forgotten manual `docker exec migrate.js
up` step disappears. migrate.js waits for Postgres to accept
connections first, since the NAS brings the DB container up slower than
the app, and still exits non-zero so a bad migration stops the
container rather than serving a half-migrated schema.

Express 4 does not forward a rejected async handler, and no error
middleware was mounted, so a failing query never responded at all. Async
routes are now wrapped and an error middleware guarantees a 500. A hung
request is indistinguishable from an empty result in the UI, which is
how a schema mismatch came to read as "the store has no items".

The storefront now separates "request failed" from "no items" and offers
a retry. fetchItems/fetchFilterOptions throw on a non-OK response rather
than returning the parsed error body, which would have been set as the
item list and crashed the grid on .map.

Also restores the project-context update from 7fb5764, which was left
out of PR #24 and ended up dangling.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-17 10:41:24 -05:00

153 lines
4.6 KiB
TypeScript
Executable File

import type { ItemFilters } from './filters';
import { filtersToSearchParams } from './filters';
export interface ItemTag {
id: number;
name: string;
color: string;
}
export interface Item {
id: number;
name: string;
description: string | null;
price_cents: number;
images: { id: number; image_path: string; sort_order: number }[];
status: 'available' | 'reserved' | 'sold';
category_id: number | null;
category_name: string | null;
tags: ItemTag[];
}
export interface Category {
id: number;
name: string;
parent_id: number | null;
sort_order: number;
item_count: number;
}
export interface Tag {
id: number;
name: string;
color: string;
item_count: number;
}
export interface FilterOptions {
categories: Category[];
tags: Tag[];
priceRange: { min_cents: number; max_cents: number };
}
export interface SiteConfig {
paypalClientId: string | null;
demoMode: boolean;
currency: string;
}
export async function fetchConfig(): Promise<SiteConfig> {
const res = await fetch('/api/config');
return res.json();
}
export async function fetchItems(filters?: ItemFilters): Promise<Item[]> {
const query = filters ? filtersToSearchParams(filters).toString() : '';
const res = await fetch(query ? `/api/items?${query}` : '/api/items');
// An error response still parses as JSON — as `{ error: ... }`, not an array.
// Returning that unchecked would set it as the item list and crash the grid
// on `.map`, so a failure has to surface as a rejection the caller can show.
if (!res.ok) throw new Error('failed to load items');
return res.json();
}
export async function fetchFilterOptions(): Promise<FilterOptions> {
const res = await fetch('/api/filters');
if (!res.ok) throw new Error('failed to load filters');
return res.json();
}
export async function fetchAdminItems(): Promise<Item[]> {
const res = await fetch('/api/admin/items');
return res.json();
}
export async function saveItem(id: number | null, formData: FormData): Promise<Item> {
const url = id ? `/api/admin/items/${id}` : '/api/admin/items';
const res = await fetch(url, { method: id ? 'PUT' : 'POST', body: formData });
return res.json();
}
export async function deleteItem(id: number): Promise<void> {
await fetch(`/api/admin/items/${id}`, { method: 'DELETE' });
}
export async function deleteItemImage(itemId: number, imageId: number): Promise<void> {
await fetch(`/api/admin/items/${itemId}/images/${imageId}`, { method: 'DELETE' });
}
export async function markSold(id: number): Promise<Item> {
const res = await fetch(`/api/admin/items/${id}/mark-sold`, { method: 'POST' });
return res.json();
}
export async function markAvailable(id: number): Promise<Item> {
const res = await fetch(`/api/admin/items/${id}/mark-available`, { method: 'POST' });
return res.json();
}
// The admin endpoints return a JSON error body on 4xx; surfacing its message
// lets the UI say "that name is already used here" instead of a generic
// failure.
async function sendJson<T>(url: string, method: string, body?: unknown): Promise<T> {
const res = await fetch(url, {
method,
headers: { 'Content-Type': 'application/json' },
body: body === undefined ? undefined : JSON.stringify(body)
});
if (!res.ok) {
const detail = await res.json().catch(() => ({ error: 'request failed' }));
throw new Error(detail.error || 'request failed');
}
return res.status === 204 ? (undefined as T) : res.json();
}
export async function fetchAdminCategories(): Promise<Category[]> {
const res = await fetch('/api/admin/categories');
return res.json();
}
export function createCategory(name: string, parentId: number | null): Promise<Category> {
return sendJson('/api/admin/categories', 'POST', { name, parent_id: parentId });
}
export function updateCategory(
id: number,
changes: { name?: string; parent_id?: number | null }
): Promise<Category> {
return sendJson(`/api/admin/categories/${id}`, 'PUT', changes);
}
export function deleteCategory(
id: number
): Promise<{ deleted_categories: number; uncategorized_items: number }> {
return sendJson(`/api/admin/categories/${id}`, 'DELETE');
}
export async function fetchAdminTags(): Promise<Tag[]> {
const res = await fetch('/api/admin/tags');
return res.json();
}
export function createTag(name: string): Promise<Tag> {
return sendJson('/api/admin/tags', 'POST', { name });
}
export function updateTag(id: number, changes: { name?: string; color?: string }): Promise<Tag> {
return sendJson(`/api/admin/tags/${id}`, 'PUT', changes);
}
export function deleteTag(id: number): Promise<void> {
return sendJson(`/api/admin/tags/${id}`, 'DELETE');
}