flat-fuchsia•14mo ago

Headless Navigation / Headless EditButton

I am in the process of migrating to a headless UI in my refine project. I was just implementing a Edit Button and was wondering if my implementation was really the way to go. Here is my implementation:

 {
      id: "actions",
      header: "Edit",
      accessorKey: "revenuestream.id",
      maxSize: 100,
      cell: function render({ table, row, getValue }) {
         const umsatzpostenId = getValue()
         const getToPath = useGetToPath()
         const { resource } = useResource(table.options.data[0].revenuestream.slug);
      
         const go = useGo()
         const editPath = getToPath({
            action: "edit",
            resource: resource,
            meta: {
               id: umsatzpostenId,
               
            },
         })
  

         return (
            <div>
               {/* OLD WAY with MUI <EditButton
                  className="text-black bg-primary hover:bg-primary/75"
                  resourceNameOrRouteName="revenue-subscriptionmodels"
                  hideText
                  recordItemId={umsatzpostenId}
                  resource={table.options.data[0].revenuestream.slug}
               /> */}
               <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                     go({
                        to: editPath,
                     })
                  }}
               >
                  <Edit className="h-4 w-4 text-primary" />
               </Button>
            </div>
         )
      },
   },

 {
      id: "actions",
      header: "Edit",
      accessorKey: "revenuestream.id",
      maxSize: 100,
      cell: function render({ table, row, getValue }) {
         const umsatzpostenId = getValue()
         const getToPath = useGetToPath()
         const { resource } = useResource(table.options.data[0].revenuestream.slug);
      
         const go = useGo()
         const editPath = getToPath({
            action: "edit",
            resource: resource,
            meta: {
               id: umsatzpostenId,
               
            },
         })
  

         return (
            <div>
               {/* OLD WAY with MUI <EditButton
                  className="text-black bg-primary hover:bg-primary/75"
                  resourceNameOrRouteName="revenue-subscriptionmodels"
                  hideText
                  recordItemId={umsatzpostenId}
                  resource={table.options.data[0].revenuestream.slug}
               /> */}
               <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                     go({
                        to: editPath,
                     })
                  }}
               >
                  <Edit className="h-4 w-4 text-primary" />
               </Button>
            </div>
         )
      },
   },

Do really have to call 3 hooks to navigate to edit a certain resource or is there a better way?

4 Replies

kapa.ai•14mo ago

Hi @zomh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, the EditButton component from Refine provides a simpler way to navigate to the edit page of a certain resource. This component uses the edit method from useNavigation under the hood to redirect the app to the edit page route of the resource. You can use the EditButton component like this:

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

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

In your case, you can replace the Button component with the EditButton component and pass the resource and recordItemId props. The resource prop is used to define the redirection endpoint and the recordItemId prop is used to append the record id to the end of the route path for the edit route. Please note that the resourceNameOrRouteName prop is deprecated and you should use the resource prop instead. For more information, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/mui/components/buttons/edit-button). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

flat-fuchsia•13mo ago

^bump anyone? is there a headless implementation of EditButton @Omer ? sorry for the ping 🥺

Omer•13mo ago

Hey @zomh , You can check out the EditButton source code from here https://github.com/refinedev/refine/blob/next/packages/mui/src/components/buttons/edit/index.tsx

GitHub

refine/packages/mui/src/components/buttons/edit/index.tsx at next ·...

Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refine/packages/mui/src/components/buttons/edit/index.tsx at next · refinedev/refine