optimistic-gold•15mo 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•15mo 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•15mo ago

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

stormy-gold•15mo ago

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

optimistic-gold•15mo 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

stormy-gold•15mo 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

optimistic-gold•15mo ago

i dont have the route because is a drawer

stormy-gold•15mo ago

yes

optimistic-gold•15mo ago

it dowsent matter?

stormy-gold•15mo ago

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

optimistic-gold•15mo 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

stormy-gold•15mo 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" },
    });

optimistic-gold•15mo 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

stormy-gold•15mo ago

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

optimistic-gold•15mo ago

yes, i understood

stormy-gold•15mo ago

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

optimistic-gold•15mo ago

<Drawer sx={{ zIndex: "1301" }} PaperProps={{ sx: { width: { sm: "100%", md: 500 } } }} open={visible} onClose={close} anchor="right" > <Create title={<Typography variant="h5">Custom Title</Typography>} saveButtonProps={saveButtonProps} headerProps={{ saveButtonProps={saveButtonProps} the create component is changing from POST to PATCH on save

stormy-gold•15mo ago

create component don't mutate action, i suggest you too double check saveButtonProps and your form hook

optimistic-gold•15mo ago

sorry maybe in onSubmit={handleSubmit(onFinish)} i am new to refine, i am reading docs an some sorce code i will continue reading for learning propourses and maybe add a extra prop! thanks i am using as base the example "fine foods"

stormy-gold•15mo ago

good luck. we are here to help 🙏🏻