feat(01-03): add data hooks, utilities, UI store, and foundational components
- API fetch wrapper with error handling and multipart upload - Weight/price formatters for display - TanStack Query hooks for items, categories, and totals with cache invalidation - Zustand UI store for panel and confirm dialog state - TotalsBar, CategoryHeader, ItemCard, ConfirmDialog, ImageUpload components Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
69
src/client/hooks/useItems.ts
Normal file
69
src/client/hooks/useItems.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
|
||||
import type { CreateItem } from "../../shared/types";
|
||||
|
||||
interface ItemWithCategory {
|
||||
id: number;
|
||||
name: string;
|
||||
weightGrams: number | null;
|
||||
priceCents: number | null;
|
||||
categoryId: number;
|
||||
notes: string | null;
|
||||
productUrl: string | null;
|
||||
imageFilename: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
categoryName: string;
|
||||
categoryEmoji: string;
|
||||
}
|
||||
|
||||
export function useItems() {
|
||||
return useQuery({
|
||||
queryKey: ["items"],
|
||||
queryFn: () => apiGet<ItemWithCategory[]>("/api/items"),
|
||||
});
|
||||
}
|
||||
|
||||
export function useItem(id: number | null) {
|
||||
return useQuery({
|
||||
queryKey: ["items", id],
|
||||
queryFn: () => apiGet<ItemWithCategory>(`/api/items/${id}`),
|
||||
enabled: id != null,
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateItem() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateItem) =>
|
||||
apiPost<ItemWithCategory>("/api/items", data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["items"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["totals"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateItem() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, ...data }: { id: number } & Partial<CreateItem>) =>
|
||||
apiPut<ItemWithCategory>(`/api/items/${id}`, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["items"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["totals"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteItem() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: number) =>
|
||||
apiDelete<{ success: boolean }>(`/api/items/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["items"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["totals"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user