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:
Do really have to call 3 hooks to navigate to edit a certain resource or is there a better way?
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?
