diff --git a/.changeset/wicked-seas-beg.md b/.changeset/wicked-seas-beg.md new file mode 100644 index 0000000000..4f2a797cdf --- /dev/null +++ b/.changeset/wicked-seas-beg.md @@ -0,0 +1,5 @@ +--- +"@medusajs/dashboard": patch +--- + +fix(dashboard): Prevent fulfillment provider modal from rerendering before form submission is complete diff --git a/packages/admin/dashboard/src/hooks/api/stock-locations.tsx b/packages/admin/dashboard/src/hooks/api/stock-locations.tsx index 4f57fcbb9a..5e6cd77162 100644 --- a/packages/admin/dashboard/src/hooks/api/stock-locations.tsx +++ b/packages/admin/dashboard/src/hooks/api/stock-locations.tsx @@ -185,8 +185,8 @@ export const useUpdateStockLocationFulfillmentProviders = ( > ) => { return useMutation({ - mutationFn: (payload) => - sdk.admin.stockLocation.updateFulfillmentProviders(id, payload), + mutationFn: async (payload) => + await sdk.admin.stockLocation.updateFulfillmentProviders(id, payload), onSuccess: async (data, variables, context) => { await queryClient.invalidateQueries({ queryKey: stockLocationsQueryKeys.details(), diff --git a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx index 0ed1b5b315..c4921775c7 100644 --- a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx +++ b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx @@ -1,8 +1,12 @@ import { HttpTypes } from "@medusajs/types" import { Button, Checkbox, toast } from "@medusajs/ui" import { keepPreviousData } from "@tanstack/react-query" -import { RowSelectionState, createColumnHelper } from "@tanstack/react-table" -import { useEffect, useMemo, useState } from "react" +import { + RowSelectionState, + Updater, + createColumnHelper, +} from "@tanstack/react-table" +import { useMemo, useState } from "react" import { useTranslation } from "react-i18next" import * as zod from "zod" @@ -13,6 +17,7 @@ import { useRouteModal, } from "../../../../../components/modals" import { DataTable } from "../../../../../components/table/data-table" +import { KeyboundForm } from "../../../../../components/utilities/keybound-form" import { useFulfillmentProviders } from "../../../../../hooks/api/fulfillment-providers" import { useUpdateStockLocationFulfillmentProviders } from "../../../../../hooks/api/stock-locations" import { useFulfillmentProviderTableColumns } from "../../../../../hooks/table/columns/use-fulfillment-provider-table-columns" @@ -55,13 +60,16 @@ export const LocationEditFulfillmentProvidersForm = ({ const [rowSelection, setRowSelection] = useState(initialState) - useEffect(() => { - const ids = Object.keys(rowSelection) - setValue("fulfillment_providers", ids, { + const handleRowSelectionChange = (updater: Updater) => { + const ids = typeof updater === "function" ? updater(rowSelection) : updater + + setValue("fulfillment_providers", Object.keys(ids), { shouldDirty: true, shouldTouch: true, }) - }, [rowSelection, setValue]) + + setRowSelection(ids) + } const { searchParams, raw } = useFulfillmentProvidersTableQuery({ pageSize: PAGE_SIZE, @@ -84,7 +92,7 @@ export const LocationEditFulfillmentProvidersForm = ({ enableRowSelection: true, rowSelection: { state: rowSelection, - updater: setRowSelection, + updater: handleRowSelectionChange, }, getRowId: (row) => row.id, pageSize: PAGE_SIZE, @@ -104,9 +112,9 @@ export const LocationEditFulfillmentProvidersForm = ({ remove: originalIds?.filter((i) => !arr.includes(i)), }, { - onSuccess: () => { + onSuccess: ({ stock_location }) => { toast.success(t("stockLocations.fulfillmentProviders.successToast")) - handleSuccess(`/settings/locations/${location.id}`) + handleSuccess(`/settings/locations/${stock_location.id}`) }, onError: (e) => { toast.error(e.message) @@ -121,8 +129,9 @@ export const LocationEditFulfillmentProvidersForm = ({ return ( -
- + + +
- -
-
+
) } diff --git a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/location-fulfillment-providers.tsx b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/location-fulfillment-providers.tsx index ce897e85e0..74026901b5 100644 --- a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/location-fulfillment-providers.tsx +++ b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/location-fulfillment-providers.tsx @@ -6,10 +6,12 @@ import { LocationEditFulfillmentProvidersForm } from "./components/edit-fulfillm export const LocationFulfillmentProviders = () => { const { location_id } = useParams() - const { stock_location, isPending, isFetching, isError, error } = - useStockLocation(location_id!, { fields: "id,*fulfillment_providers" }) + const { stock_location, isPending, isError, error } = useStockLocation( + location_id!, + { fields: "id,*fulfillment_providers" } + ) - const ready = !isPending && !isFetching && !!stock_location + const ready = !isPending && !!stock_location if (isError) { throw error