conscious-sapphire•2y 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•2y 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•2y ago

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

fair-rose•2y ago

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

conscious-sapphireOP•2y 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

fair-rose•2y 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

conscious-sapphireOP•2y ago

i dont have the route because is a drawer

fair-rose•2y ago

yes

conscious-sapphireOP•2y ago

it dowsent matter?

fair-rose•2y ago

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

conscious-sapphireOP•2y 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

fair-rose•2y 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" },
    });

conscious-sapphireOP•2y 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

fair-rose•2y ago

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

conscious-sapphireOP•2y ago

yes, i understood

fair-rose•2y ago

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

conscious-sapphireOP•2y 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

fair-rose•2y ago

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

conscious-sapphireOP•2y 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"

fair-rose•2y ago

good luck. we are here to help 🙏🏻

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

Did you find this page helpful?