deep-jade•13mo ago

Custom Edit Button Behaviour?

Hi! I have a button that, when clicked, should make an 'edit' call to the displayed resource, which (within the API) sets the timestamp of the ID to the current time. Since there's no Form component here, How can i get a button make an 'edit' resource call? Any insights appreciated

5 Replies

kapa.ai•13mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, you can use the EditButton component provided by Refine to make an 'edit' call to a resource. The EditButton component uses the useNavigation hook under the hood to redirect users to the edit page of resources. Here's an example of how you can use it:

import { EditButton } from "@refinedev/mui";  // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" depending on the UI library you're using
  
const MyEditComponent = () => {  
 return (  
 <EditButton  
 resource="categories"  
 recordItemId="2"  
 />  
 );  
};

import { EditButton } from "@refinedev/mui";  // or "@refinedev/antd", "@refinedev/mantine", "@refinedev/chakra-ui" depending on the UI library you're using
  
const MyEditComponent = () => {  
 return (  
 <EditButton  
 resource="categories"  
 recordItemId="2"  
 />  
 );  
};

In this example, clicking the button will trigger the edit method of useNavigation and then redirect the app to the edit action path of the resource, filling the necessary parameters in the route. You can replace "categories" with the name of your resource and "2" with the ID of the record you want to edit. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/mui/components/buttons/edit-button). Please note that the actual updating of the timestamp would need to be handled on the server-side, in your API's 'edit' endpoint for the resource. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

deep-jade•13mo ago

@kapa.ai Ideally, I'd like the button to behave more like the edit page's submit button rather than EditButton -- when I click it, it should execute the API call.

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In that case, you can use the useUpdate hook provided by Refine to make an 'edit' call to a resource. The useUpdate hook is used to update a single record of a resource. Here's an example of how you can use it:

import { useUpdate } from "@pankod/refine";

const MyUpdateComponent = () => {
    const { mutate: update } = useUpdate();

    const handleClick = () => {
        update({
            resource: "posts",
            id: "1",
            values: { timestamp: new Date().toISOString() },
        });
    };

    return <button onClick={handleClick}>Update Timestamp</button>;
};

import { useUpdate } from "@pankod/refine";

const MyUpdateComponent = () => {
    const { mutate: update } = useUpdate();

    const handleClick = () => {
        update({
            resource: "posts",
            id: "1",
            values: { timestamp: new Date().toISOString() },
        });
    };

    return <button onClick={handleClick}>Update Timestamp</button>;
};

In this example, clicking the button will trigger the useUpdate method and then update the record whose resource is "posts" and whose id is "1". The values object contains the fields you want to update, in this case, the timestamp field. Please note that the actual updating of the timestamp would need to be handled on the server-side, in your API's 'edit' endpoint for the resource. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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