fix(dashboard): Prevent fulfillment provider modal from rerendering b…

…efore form submission is complete
medusajs · Dec 11, 2024 · d21c06c · d21c06c
1 parent 16d27ea
commit d21c06c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 35 deletions.
diff --git a/.changeset/wicked-seas-beg.md 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
@@ -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/...-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx b/...-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<RowSelectionState>(initialState)
 
-  useEffect(() => {
-    const ids = Object.keys(rowSelection)
-    setValue("fulfillment_providers", ids, {
+  const handleRowSelectionChange = (updater: Updater<RowSelectionState>) => {
+    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,
@@ -93,36 +101,42 @@ export const LocationEditFulfillmentProvidersForm = ({
   const { mutateAsync, isPending: isMutating } =
     useUpdateStockLocationFulfillmentProviders(location.id)
 
-  const handleSubmit = form.handleSubmit(async (data) => {
-    const originalIds = location.fulfillment_providers?.map((sc) => sc.id)
+  const handleSubmit = form.handleSubmit(
+    async (data) => {
+      const originalIds = location.fulfillment_providers?.map((sc) => sc.id)
 
-    const arr = data.fulfillment_providers ?? []
+      const arr = data.fulfillment_providers ?? []
 
-    await mutateAsync(
-      {
-        add: arr.filter((i) => !originalIds?.includes(i)),
-        remove: originalIds?.filter((i) => !arr.includes(i)),
-      },
-      {
-        onSuccess: () => {
-          toast.success(t("stockLocations.fulfillmentProviders.successToast"))
-          handleSuccess(`/settings/locations/${location.id}`)
-        },
-        onError: (e) => {
-          toast.error(e.message)
+      await mutateAsync(
+        {
+          add: arr.filter((i) => !originalIds?.includes(i)),
+          remove: originalIds?.filter((i) => !arr.includes(i)),
         },
-      }
-    )
-  })
+        {
+          onSuccess: ({ stock_location }) => {
+            toast.success(t("stockLocations.fulfillmentProviders.successToast"))
+            handleSuccess(`/settings/locations/${stock_location.id}`)
+          },
+          onError: (e) => {
+            toast.error(e.message)
+          },
+        }
+      )
+    },
+    (e) => {
+      console.log("error", e)
+    }
+  )
 
   if (isError) {
     throw error
   }
 
   return (
     <RouteFocusModal.Form form={form}>
-      <div className="flex h-full flex-col overflow-hidden">
-        <RouteFocusModal.Body>
+      <KeyboundForm onSubmit={handleSubmit} className="flex size-full flex-col">
+        <RouteFocusModal.Header />
+        <RouteFocusModal.Body className="flex flex-1 flex-col overflow-auto">
           <DataTable
             table={table}
             columns={columns}
@@ -141,17 +155,17 @@ export const LocationEditFulfillmentProvidersForm = ({
         <RouteFocusModal.Footer>
           <div className="flex items-center justify-end gap-x-2">
             <RouteFocusModal.Close asChild>
-              <Button size="small" variant="secondary">
+              <Button size="small" variant="secondary" type="button">
                 {t("actions.cancel")}
               </Button>
             </RouteFocusModal.Close>
 
-            <Button size="small" isLoading={isMutating} onClick={handleSubmit}>
+            <Button size="small" isLoading={isMutating} type="submit">
               {t("actions.save")}
             </Button>
           </div>
         </RouteFocusModal.Footer>
-      </div>
+      </KeyboundForm>
     </RouteFocusModal.Form>
   )
 }

diff --git a/...rd/src/routes/locations/location-fulfillment-providers/location-fulfillment-providers.tsx b/...rd/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