helpful-purple
helpful-purple13mo 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!
No description
19 Replies
kapa.ai
kapa.ai13mo 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
kapa.ai13mo ago
<@703699805242916934> kapa.ai is still learning and improving, please let us how it did by reacting below
metropolitan-bronze
metropolitan-bronze13mo ago
do you want to get action and id from return value ?
helpful-purple
helpful-purple13mo 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
metropolitan-bronze
metropolitan-bronze13mo 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
helpful-purple
helpful-purple13mo ago
i dont have the route because is a drawer
metropolitan-bronze
metropolitan-bronze13mo ago
yes
helpful-purple
helpful-purple13mo ago
it dowsent matter?
metropolitan-bronze
metropolitan-bronze13mo ago
you need to pass action to your component. you are already giving action to drawer you can pass same action to component manually
helpful-purple
helpful-purple13mo 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
metropolitan-bronze
metropolitan-bronze13mo 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" },
});
`
helpful-purple
helpful-purple13mo 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
metropolitan-bronze
metropolitan-bronze13mo ago
because you are in list page. action detection works from URL
helpful-purple
helpful-purple13mo ago
yes, i understood
metropolitan-bronze
metropolitan-bronze13mo ago
yes you need to add extra prop because useModal cannot detect action :/
helpful-purple
helpful-purple13mo 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
metropolitan-bronze
metropolitan-bronze13mo ago
create component don't mutate action, i suggest you too double check saveButtonProps and your form hook
helpful-purple
helpful-purple13mo 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"
metropolitan-bronze
metropolitan-bronze13mo ago
good luck. we are here to help 🙏🏻