rare-sapphire
rare-sapphire12mo 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
kapa.ai12mo 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
kapa.ai12mo ago
<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire11mo ago
^bump anyone? is there a headless implementation of EditButton @Omer ? sorry for the ping 🥺
Omer
Omer11mo 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