feat(09-01): add classification API route, client hook, badge component, and setup detail wiring
- Add PATCH /:id/items/:itemId/classification endpoint with Zod validation - Add apiPatch helper to client API library - Add useUpdateItemClassification mutation hook - Add classification field to SetupItemWithCategory interface - Create ClassificationBadge click-to-cycle component (base/worn/consumable) - Wire ClassificationBadge into setup detail page item grid - Add integration tests for PATCH classification route (valid + invalid) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import { CategoryHeader } from "../../components/CategoryHeader";
|
||||
import { ClassificationBadge } from "../../components/ClassificationBadge";
|
||||
import { ItemCard } from "../../components/ItemCard";
|
||||
import { ItemPicker } from "../../components/ItemPicker";
|
||||
import {
|
||||
useDeleteSetup,
|
||||
useRemoveSetupItem,
|
||||
useSetup,
|
||||
useUpdateItemClassification,
|
||||
} from "../../hooks/useSetups";
|
||||
import { useWeightUnit } from "../../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../../lib/formatters";
|
||||
@@ -24,6 +26,7 @@ function SetupDetailPage() {
|
||||
const { data: setup, isLoading } = useSetup(numericId);
|
||||
const deleteSetup = useDeleteSetup();
|
||||
const removeItem = useRemoveSetupItem(numericId);
|
||||
const updateClassification = useUpdateItemClassification(numericId);
|
||||
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
@@ -86,6 +89,12 @@ function SetupDetailPage() {
|
||||
}
|
||||
}
|
||||
|
||||
function nextClassification(current: string): string {
|
||||
const order = ["base", "worn", "consumable"];
|
||||
const idx = order.indexOf(current);
|
||||
return order[(idx + 1) % order.length];
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
deleteSetup.mutate(numericId, {
|
||||
onSuccess: () => navigate({ to: "/setups" }),
|
||||
@@ -208,18 +217,32 @@ function SetupDetailPage() {
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{categoryItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={categoryName}
|
||||
categoryIcon={categoryIcon}
|
||||
imageFilename={item.imageFilename}
|
||||
productUrl={item.productUrl}
|
||||
onRemove={() => removeItem.mutate(item.id)}
|
||||
/>
|
||||
<div key={item.id}>
|
||||
<ItemCard
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={categoryName}
|
||||
categoryIcon={categoryIcon}
|
||||
imageFilename={item.imageFilename}
|
||||
productUrl={item.productUrl}
|
||||
onRemove={() => removeItem.mutate(item.id)}
|
||||
/>
|
||||
<div className="px-4 pb-3 -mt-1">
|
||||
<ClassificationBadge
|
||||
classification={item.classification}
|
||||
onCycle={() =>
|
||||
updateClassification.mutate({
|
||||
itemId: item.id,
|
||||
classification: nextClassification(
|
||||
item.classification,
|
||||
),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user