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>
153 lines
4.6 KiB
TypeScript
Executable File
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');
|
|
}
|