makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

refactor: add useFormatters hook to reduce boilerplate across 14 components

Browse Source 
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:
Jean-Luc Makiola
2026-04-03 15:49:16 +02:00
parent 5308991123
commit e9d33e59e9
14 changed files with 78 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/components/CollectionView.tsx
View File

@@ -1,10 +1,8 @@
import { useMemo, useState } from "react";
import { useCategories } from "../hooks/useCategories";
import { useCurrency } from "../hooks/useCurrency";
import { useFormatters } from "../hooks/useFormatters";
import { useItems } from "../hooks/useItems";
import { useTotals } from "../hooks/useTotals";
import { useWeightUnit } from "../hooks/useWeightUnit";
import { formatPrice, formatWeight } from "../lib/formatters";
import { LucideIcon } from "../lib/iconData";
import { useUIStore } from "../stores/uiStore";
import { CategoryFilterDropdown } from "./CategoryFilterDropdown";
@@ -15,8 +13,7 @@ export function CollectionView() {
const { data: items, isLoading: itemsLoading } = useItems();
const { data: totals } = useTotals();
const { data: categories } = useCategories();
const unit = useWeightUnit();
const currency = useCurrency();
const { weight, price } = useFormatters();
const openAddPanel = useUIStore((s) => s.openAddPanel);
const [searchText, setSearchText] = useState("");
@@ -148,7 +145,7 @@ export function CollectionView() {
<LucideIcon name="weight" size={14} className="text-gray-400" />
<span className="text-xs text-gray-500">Total Weight</span>
<span className="text-sm font-semibold text-gray-900">
{formatWeight(totals.global.totalWeight, unit)}
{weight(totals.global.totalWeight)}
</span>
</div>
<div className="flex flex-col items-center gap-1">
@@ -159,7 +156,7 @@ export function CollectionView() {
/>
<span className="text-xs text-gray-500">Total Spent</span>
<span className="text-sm font-semibold text-gray-900">
{formatPrice(totals.global.totalCost, currency)}
{price(totals.global.totalCost)}
</span>
</div>
</div>