muffin-admin 3.1.1 → 3.2.0

package/package.json

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

package/src/buttons/ActionButton.tsx

@@ -1,55 +1,23 @@
-import {
-  Button,
-  useListContext,
-  useNotify,
-  useRecordContext,
-  useRefresh,
-  useResourceContext,
-  useUnselectAll,
-} from "react-admin"
+import { Button, useListContext, useRecordContext } from "react-admin"
 
 import { useState } from "react"
 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 { mutate, isLoading } = useAction(action, {})
 
   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 +25,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 +33,19 @@ export function BulkActionButton({ label, icon, title, action, id }: AdminAction
   )
 }
 
-export function ActionButton({ icon, label, title, action, id }: AdminAction) {
-  const [payloadActive, setPayloadActive] = useState(false)
-
-  const record = useRecordContext()
+export function BulkActionButton({ label, icon, title, action, id }: AdminAction) {
+  const { selectedIds } = useListContext()
   const { mutate, isLoading } = useAction(action)
+  const [payloadActive, setPayloadActive] = useState(false)
 
   const PayloadBuilder = findBuilder(["action", "payload", id])
 
-  const refresh = useRefresh(),
-    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" })
-        },
-      }
-    )
-
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={() => (PayloadBuilder ? setPayloadActive(true) : process())}
+        onClick={() => (PayloadBuilder ? setPayloadActive(true) : mutate({ ids: selectedIds }))}
         disabled={isLoading}
       >
         {buildIcon(icon)}
@@ -104,7 +53,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,34 @@
-import { useDataProvider, useResourceContext } from "react-admin"
-import { useMutation } from "react-query"
-import { TActionProps } from "../dataprovider"
+import {
+  useDataProvider,
+  useNotify,
+  useRefresh,
+  useResourceContext,
+  useUnselectAll,
+} from "react-admin"
+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 notify = useNotify()
+  const refresh = useRefresh()
   const resource = useResourceContext()
-  return useMutation<{ data: any }, { message: string } | string, any>((params: TActionProps) =>
-    dataProvider.runAction(resource, action, params)
-  )
+  const unselectAll = useUnselectAll(resource)
+  const dataProvider = useDataProvider() as ReturnType<typeof MuffinDataprovider>
+  return useMutation((params: TActionProps) => dataProvider.runAction(resource, action, params), {
+    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" })
+    },
+    ...options,
+  })
 }