update price in list on price update

This commit is contained in:
Jurgis Sakalauskas
2025-10-14 13:39:04 +03:00
parent 1039c90918
commit bba0cb86a7
4 changed files with 22 additions and 6 deletions
@@ -5,10 +5,16 @@ import { ItemPricesPanel } from './item-prices-panel';
interface ItemPricesModalProps { interface ItemPricesModalProps {
isOpen: boolean; isOpen: boolean;
item: Item | null; item: Item | null;
projectId: string | undefined;
onClose: () => void; onClose: () => void;
} }
export function ItemPricesModal({ isOpen, item, onClose }: ItemPricesModalProps) { export function ItemPricesModal({
isOpen,
item,
projectId,
onClose
}: ItemPricesModalProps) {
useEffect(() => { useEffect(() => {
if (!isOpen) { if (!isOpen) {
return; return;
@@ -53,7 +59,7 @@ export function ItemPricesModal({ isOpen, item, onClose }: ItemPricesModalProps)
<h2 className="text-xl font-semibold text-slate-900">Edit Item Prices</h2> <h2 className="text-xl font-semibold text-slate-900">Edit Item Prices</h2>
<p className="text-sm text-slate-500">{itemTitle}</p> <p className="text-sm text-slate-500">{itemTitle}</p>
</header> </header>
<ItemPricesPanel itemId={item.id} /> <ItemPricesPanel itemId={item.id} projectId={projectId} />
</div> </div>
</div> </div>
</div> </div>
@@ -6,9 +6,10 @@ const priceConditionOptions: PriceCondition[] = ['new', 'used'];
interface ItemPricesPanelProps { interface ItemPricesPanelProps {
itemId: string; itemId: string;
projectId: string | undefined;
} }
export function ItemPricesPanel({ itemId }: ItemPricesPanelProps) { export function ItemPricesPanel({ itemId, projectId }: ItemPricesPanelProps) {
const [condition, setCondition] = useState<PriceCondition>('new'); const [condition, setCondition] = useState<PriceCondition>('new');
const [amount, setAmount] = useState(''); const [amount, setAmount] = useState('');
const [currency, setCurrency] = useState('USD'); const [currency, setCurrency] = useState('USD');
@@ -17,7 +18,7 @@ export function ItemPricesPanel({ itemId }: ItemPricesPanelProps) {
const [formError, setFormError] = useState<string | null>(null); const [formError, setFormError] = useState<string | null>(null);
const pricesQuery = useItemPricesQuery(itemId, true); const pricesQuery = useItemPricesQuery(itemId, true);
const createPriceMutation = useCreateItemPriceMutation(itemId); const createPriceMutation = useCreateItemPriceMutation(itemId, projectId);
const prices = pricesQuery.data?.data ?? []; const prices = pricesQuery.data?.data ?? [];
const creationError = useMemo( const creationError = useMemo(
@@ -314,6 +314,7 @@ export function ProjectDetailPage() {
<ItemPricesModal <ItemPricesModal
isOpen={Boolean(priceModalItem)} isOpen={Boolean(priceModalItem)}
item={priceModalItem} item={priceModalItem}
projectId={projectId}
onClose={handlePricesModalClose} onClose={handlePricesModalClose}
/> />
</div> </div>
+10 -2
View File
@@ -1,10 +1,11 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { import {
createItemPrice, createItemPrice,
fetchItemPrices, fetchItemPrices,
type CreateItemPricePayload, type CreateItemPricePayload,
type ItemPricesResponse type ItemPricesResponse
} from '../api/item-prices'; } from '../api/item-prices';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { projectsKeys } from './projects';
const DEFAULT_LIMIT = 50; const DEFAULT_LIMIT = 50;
@@ -23,7 +24,10 @@ export const useItemPricesQuery = (
queryFn: ({ signal }) => fetchItemPrices(itemId!, { limit: DEFAULT_LIMIT, offset: 0, signal }) queryFn: ({ signal }) => fetchItemPrices(itemId!, { limit: DEFAULT_LIMIT, offset: 0, signal })
}); });
export const useCreateItemPriceMutation = (itemId: string | undefined) => { export const useCreateItemPriceMutation = (
itemId: string | undefined,
projectId: string | undefined
) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
@@ -39,6 +43,10 @@ export const useCreateItemPriceMutation = (itemId: string | undefined) => {
return; return;
} }
queryClient.invalidateQueries({ queryKey: itemPricesKeys.list(itemId) }); queryClient.invalidateQueries({ queryKey: itemPricesKeys.list(itemId) });
if (projectId) {
queryClient.invalidateQueries({ queryKey: projectsKeys.items(projectId) });
queryClient.invalidateQueries({ queryKey: projectsKeys.detail(projectId) });
}
} }
}); });
}; };