mirror of
https://github.com/sakaljurgis/best-choice.git
synced 2026-07-08 21:47:40 +00:00
update price in list on price update
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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) });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user