refactor: add useFormatters hook to reduce boilerplate across 14 components

Created useFormatters() combining useWeightUnit + useCurrency + formatWeight/formatPrice
into a single hook returning weight(grams) and price(cents) bound functions plus
raw unit and currency values. Updated all 14 consumer files to use the new hook,
removing the repeated 4-import + 2-hook-call pattern from each.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-03 15:49:16 +02:00
parent 5308991123
commit e9d33e59e9
14 changed files with 78 additions and 100 deletions

View File

@@ -4,15 +4,13 @@ import { CategoryHeader } from "../../components/CategoryHeader";
import { ItemCard } from "../../components/ItemCard";
import { ItemPicker } from "../../components/ItemPicker";
import { WeightSummaryCard } from "../../components/WeightSummaryCard";
import { useCurrency } from "../../hooks/useCurrency";
import { useFormatters } from "../../hooks/useFormatters";
import {
useDeleteSetup,
useRemoveSetupItem,
useSetup,
useUpdateItemClassification,
} from "../../hooks/useSetups";
import { useWeightUnit } from "../../hooks/useWeightUnit";
import { formatPrice, formatWeight } from "../../lib/formatters";
import { LucideIcon } from "../../lib/iconData";
export const Route = createFileRoute("/setups/$setupId")({
@@ -21,8 +19,7 @@ export const Route = createFileRoute("/setups/$setupId")({
function SetupDetailPage() {
const { setupId } = Route.useParams();
const unit = useWeightUnit();
const currency = useCurrency();
const { weight, price } = useFormatters();
const navigate = useNavigate();
const numericId = Number(setupId);
const { data: setup, isLoading } = useSetup(numericId);
@@ -127,13 +124,13 @@ function SetupDetailPage() {
</span>
<span>
<span className="font-medium text-gray-700">
{formatWeight(totalWeight, unit)}
{weight(totalWeight)}
</span>{" "}
total
</span>
<span>
<span className="font-medium text-gray-700">
{formatPrice(totalCost, currency)}
{price(totalCost)}
</span>{" "}
cost
</span>