ambitious-aqua•17mo ago

How can i get the action in a component that receives useModalForm props?

I have a component that shows as a drawer an receives useModalFrom props. how can i know the action? Because i want to manage the creation an edition on the same component. Regards!

19 Replies

kapa.ai•17mo ago

Hi @pabloat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To manage both creation and edition actions in the same component using useModalForm, you can pass the action property to the refineCoreProps object when invoking the useModalForm hook. The action property can be either "create" or "edit". Here's an example of how you can use the useModalForm hook with different actions:

const modalForm = useModalForm({
  refineCoreProps: {
    action: "edit", // or "create"
    resource: "posts",
    id: "1",
  },
});

const modalForm = useModalForm({
  refineCoreProps: {
    action: "edit", // or "create"
    resource: "posts",
    id: "1",
  },
});

You can conditionally render different form fields or handle form submission differently based on the action property. To do this, you can check the value of action and render the appropriate fields or handle the form submission accordingly. For more information on the useModalForm hook, refer to the refine useModalForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

<@703699805242916934> kapa.ai is still learning and improving, please let us how it did by reacting below

mute-gold•17mo ago

do you want to get action and id from return value ?

ambitious-aqua•17mo ago

inside my component i want to know the action i have this in the list component const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({ refineCoreProps: { action: "create" }, }); const { modal: { show: showCreateDrawer }, } = createDrawerFormProps; <CreateLead {...createDrawerFormProps} /> export const CreateLead: React.FC< UseModalFormReturnType<ILead, HttpError, ILead>

= ({

watch, setValue, register, formState: { errors }, control, refineCore: { onFinish }, handleSubmit, modal: { visible, close }, saveButtonProps,
}) => { in CreateLead component i need to know the action if to this component i pass: const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({ refineCoreProps: { action: "edit" }, }); prop, the save button makes a PATCH so there must be a way of getting this

mute-gold•17mo ago

you can use this https://refine.dev/docs/api-reference/core/hooks/resource/useResource detect action from current route. for example if you are in /lead/create action will be create

ambitious-aqua•17mo ago

i dont have the route because is a drawer

mute-gold•17mo ago

yes

ambitious-aqua•17mo ago

it dowsent matter?

mute-gold•17mo ago

you need to pass action to your component. you are already giving action to drawer you can pass same action to component manually

ambitious-aqua•17mo ago

ok, a was trying to use the refine props but yes i can make an extra prop ofcourse on save it makes a post or patch so was wondering where it was obtaining that i will look the link you shared, thanks

mute-gold•17mo ago

refineCoreProps: { action: "edit" }, is patch ^^ this is post

const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({
        refineCoreProps: { action: "create" },
    });

const createDrawerFormProps = useModalForm<ILead, HttpError, ILead>({
        refineCoreProps: { action: "create" },
    });

ambitious-aqua•17mo ago

yes i know maybe i dont know how to make my self clear, because of my bad english 🙂 const { resources, resource, action, id } = useResource(); i am getting the "list" action because is a drawer i think but i will add an extra prop manualy

mute-gold•17mo ago

because you are in list page. action detection works from URL

ambitious-aqua•17mo ago

yes, i understood

mute-gold•17mo ago

yes you need to add extra prop because useModal cannot detect action :/