muffin-admin 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/MuffinResourceList.tsx

@@ -51,7 +51,7 @@ function MuffinListDatagrid() {
   return (
     <DatagridConfigurable rowClick={show ? "show" : edit ? "edit" : false}>
       {buildAdmin(["list-fields", name], fields)}
-      {buildAdmin(["list-grid-buttons"], name)}
+      {buildAdmin(["list-grid-buttons", name])}
     </DatagridConfigurable>
   )
 }

package/src/buttons/ActionButton.tsx

@@ -13,43 +13,30 @@ import { useAction } from "../hooks/useAction"
 import { AdminAction } from "../types"
 import { buildIcon, findBuilder } from "../utils"
 
-export function BulkActionButton({ label, icon, title, action, id }: AdminAction) {
-  const resource = useResourceContext()
-  const { selectedIds } = useListContext()
+export function ActionButton({ icon, label, title, action, id }: AdminAction) {
   const [payloadActive, setPayloadActive] = useState(false)
+  const record = useRecordContext()
+  const notify = useNotify()
+  const refresh = useRefresh()
+  const { mutate, isLoading } = useAction(action, {
+    onSuccess: ({ data }) => {
+      if (data && data.message) notify(data.message, { type: "success" })
+      if (data && data.redirectTo) window.location = data.redirectTo
+      else refresh()
+    },
+    onError: (err) => {
+      notify(typeof err === "string" ? err : err.message, { type: "error" })
+    },
+  })
 
   const PayloadBuilder = findBuilder(["action", "payload", id])
 
-  const refresh = useRefresh(),
-    unselectAll = useUnselectAll(resource),
-    notify = useNotify()
-
-  const { mutate, isLoading } = useAction(action)
-
-  const process = (payload?) =>
-    mutate(
-      { ids: selectedIds, payload },
-      {
-        onSuccess: ({ data }) => {
-          if (data && data.message) notify(data.message, { type: "success" })
-          if (data && data.redirectTo) window.location = data.redirectTo
-          else {
-            unselectAll()
-            refresh()
-          }
-        },
-        onError: (err) => {
-          notify(typeof err === "string" ? err : err.message, { type: "error" })
-        },
-      }
-    )
-
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={() => (PayloadBuilder ? setPayloadActive(true) : process())}
+        onClick={() => (PayloadBuilder ? setPayloadActive(true) : mutate({ record }))}
         disabled={isLoading}
       >
         {buildIcon(icon)}
@@ -57,7 +44,7 @@ export function BulkActionButton({ label, icon, title, action, id }: AdminAction
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onHandle={(payload) => process(payload)}
+          onHandle={(payload) => mutate({ record, payload })}
           onClose={() => setPayloadActive(false)}
         />
       )}
@@ -65,38 +52,37 @@ export function BulkActionButton({ label, icon, title, action, id }: AdminAction
   )
 }
 
-export function ActionButton({ icon, label, title, action, id }: AdminAction) {
+export function BulkActionButton({ label, icon, title, action, id }: AdminAction) {
+  const resource = useResourceContext()
+  const { selectedIds } = useListContext()
   const [payloadActive, setPayloadActive] = useState(false)
 
-  const record = useRecordContext()
-  const { mutate, isLoading } = useAction(action)
-
-  const PayloadBuilder = findBuilder(["action", "payload", id])
-
   const refresh = useRefresh(),
+    unselectAll = useUnselectAll(resource),
     notify = useNotify()
 
-  const process = (payload?) =>
-    mutate(
-      { record, payload },
-      {
-        onSuccess: ({ data }) => {
-          if (data && data.message) notify(data.message, { type: "success" })
-          if (data && data.redirectTo) window.location = data.redirectTo
-          else refresh()
-        },
-        onError: (err) => {
-          notify(typeof err === "string" ? err : err.message, { type: "error" })
-        },
+  const { mutate, isLoading } = useAction(action, {
+    onSuccess: ({ data }) => {
+      if (data && data.message) notify(data.message, { type: "success" })
+      if (data && data.redirectTo) window.location = data.redirectTo
+      else {
+        unselectAll()
+        refresh()
       }
-    )
+    },
+    onError: (err) => {
+      notify(typeof err === "string" ? err : err.message, { type: "error" })
+    },
+  })
+
+  const PayloadBuilder = findBuilder(["action", "payload", id])
 
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={() => (PayloadBuilder ? setPayloadActive(true) : process())}
+        onClick={() => (PayloadBuilder ? setPayloadActive(true) : mutate({ ids: selectedIds }))}
         disabled={isLoading}
       >
         {buildIcon(icon)}
@@ -104,7 +90,7 @@ export function ActionButton({ icon, label, title, action, id }: AdminAction) {
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onHandle={(payload) => process(payload)}
+          onHandle={(payload) => mutate({ ids: selectedIds, payload })}
           onClose={() => setPayloadActive(false)}
         />
       )}

package/src/dataprovider.ts

@@ -91,9 +91,9 @@ export function MuffinDataprovider(apiUrl: string) {
   return methods
 }
 
-export type TActionProps = {
+export type TActionProps<T = any> = {
   payload?: any
   ids?: string[]
-  record: any
+  record?: T
 }
 setupAdmin(["dataprovider"], MuffinDataprovider)

package/src/hooks/useAction.ts

@@ -1,11 +1,15 @@
 import { useDataProvider, useResourceContext } from "react-admin"
-import { useMutation } from "react-query"
-import { TActionProps } from "../dataprovider"
+import { UseMutationOptions, useMutation } from "react-query"
+import { MuffinDataprovider, TActionProps } from "../dataprovider"
 
-export function useAction(action) {
-  const dataProvider = useDataProvider()
+export function useAction(
+  action: string,
+  options?: UseMutationOptions<{ data: any }, any, TActionProps>
+) {
   const resource = useResourceContext()
-  return useMutation<{ data: any }, { message: string } | string, any>((params: TActionProps) =>
-    dataProvider.runAction(resource, action, params)
+  const dataProvider = useDataProvider() as ReturnType<typeof MuffinDataprovider>
+  return useMutation(
+    (params: TActionProps) => dataProvider.runAction(resource, action, params),
+    options
   )
 }