jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

fix(ui): add router.refresh after storage mutations, pluralize labels

Browse source 
ManageStorageDialog now calls router.refresh() after deposit,
withdraw, and transfer so the grid view reflects changes.
Await fetchData() before refreshing.

Resource labels now use pluralize() for correct unit display
(e.g. "1 liter" vs "3 liters").
This commit is contained in:
Jason Fraley 2026-07-28 14:03:43 -04:00
parent a4844efe22
commit 01ac20f44f
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/frontend/storage/ManageStorageDialog.tsx
View file

@ -1,6 +1,7 @@
"use client";
import { useState, useEffect, useTransition, useCallback } from "react";
import { useRouter } from "next/navigation";
import {
Dialog,
DialogContent,
@ -32,7 +33,7 @@ import {
Loader2Icon,
} from "lucide-react";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";
import { cn, pluralize } from "@/lib/utils";
interface ManageStorageDialogProps {
structureId: number;
@ -54,6 +55,7 @@ export function ManageStorageDialog({
const [allResources, setAllResources] = useState<Resource[]>([]);
const [loading, setLoading] = useState(false);
const [isPending, startTransition] = useTransition();
const router = useRouter();
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
// Form state
@ -258,7 +260,8 @@ export function ManageStorageDialog({
if (result.success) {
setMessage({ type: "success", text: "Resource deposited successfully." });
setDepositAmount("1");
fetchData();
await fetchData();
router.refresh();
} else {
setMessage({ type: "error", text: result.error ?? "Unknown error." });
}
@ -278,7 +281,8 @@ export function ManageStorageDialog({
if (result.success) {
setMessage({ type: "success", text: "Resource withdrawn successfully." });
setWithdrawAmount("1");
fetchData();
await fetchData();
router.refresh();
} else {
setMessage({ type: "error", text: result.error ?? "Unknown error." });
}
@ -299,7 +303,8 @@ export function ManageStorageDialog({
if (result.success) {
setMessage({ type: "success", text: "Transfer completed successfully." });
setTransferAmount("1");
fetchData();
await fetchData();
router.refresh();
} else {
setMessage({ type: "error", text: result.error ?? "Unknown error." });
}
@ -437,7 +442,7 @@ export function ManageStorageDialog({
if (!resource || typeof resource === "number") return null;
return (
<SelectItem key={entry.id ?? resource.id} value={String(resource.id)}>
{resource.name} ({entry.amount.toLocaleString()} {resource.unitOfMeasure})
{resource.name} ({entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)})
</SelectItem>
);
})}
@ -510,7 +515,7 @@ export function ManageStorageDialog({
if (!resource || typeof resource === "number") return null;
return (
<SelectItem key={entry.id ?? resource.id} value={String(resource.id)}>
{resource.name} ({entry.amount.toLocaleString()} {resource.unitOfMeasure})
{resource.name} ({entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)})
</SelectItem>
);
})}

5
src/components/frontend/storage/ResourceList.tsx
View file

@ -1,5 +1,6 @@
import { Resource, GameStructure } from "@/payload-types";
import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
import { pluralize } from "@/lib/utils";
import {
Item,
ItemContent,
@ -92,7 +93,7 @@ export function ResourceList({ storedResources, maxCapacityMass }: ResourceListP
/>
<span>{resource.name}</span>
<span className="text-xs font-normal text-muted-foreground">
{entry.amount.toLocaleString()} {resource.unitOfMeasure}
{entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)}
</span>
</ItemTitle>
{description && (
@ -103,7 +104,7 @@ export function ResourceList({ storedResources, maxCapacityMass }: ResourceListP
</ItemContent>
<div className="text-right shrink-0">
<div className="text-sm font-medium">
{entry.amount.toLocaleString()} {resource.unitOfMeasure}
{entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)}
</div>
<div className="text-xs text-muted-foreground">
{mass > 0 && `${mass.toLocaleString()} kg mass`}