mute-gold•9mo ago

Change job id to a link to job show page

I implemented my job ID in datagrid in this way: import { Link } from "@mui/material"; const columns = React.useMemo<GridColDef[]>( () => [ { field: "id", headerName: "Job ID", minWidth: 370, renderCell: function render({ row }) { const jobId = row?.id; const jobshowURL = /jobs/show/${jobId} const handleCopyClick = () => { // copy the text into clipboard copyToClipboard(jobId); window.alert("Job ID copied"); }; return ( <> <Link href={jobshowURL}> <TextField value={jobId}/> </Link> <IconButton onClick={handleCopyClick} aria-label="Copy"> <FileCopyIcon style={{ fontSize: 16 }}/> </IconButton> </> ); }, }, ] ); for now, I can redirect into the jobshow page after I click the jobID, but it's very slow for the redirecting. Can I use useNavigation() hook or react-dom settings to do the redirect to make it work as fast as Show button

2 Replies

kapa.ai•9mo ago

Hi @zion_48046. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the useNavigation hook from refine to handle the redirection. The useNavigation hook provides several methods including show which can be used to navigate to the show page of a specific record. Here's how you can modify your code to use the useNavigation hook:

import { useNavigation } from "@pankod/refine";
import { IconButton, TextField } from "@mui/material";

const { show } = useNavigation();

const columns = React.useMemo<GridColDef[]>(
    () => [
        {
            field: "id",
            headerName: "Job ID",
            minWidth: 370,
            renderCell: function render({ row }) {
                const jobId = row?.id;
                const handleCopyClick = () => {
                    // copy the text into clipboard
                    copyToClipboard(jobId);
                    window.alert("Job ID copied");
                };
                const handleShowClick = () => {
                    show("jobs", jobId);
                };
                return (
                    <>
                        <TextField value={jobId} onClick={handleShowClick} />
                        <IconButton onClick={handleCopyClick} aria-label="Copy">
                            <FileCopyIcon style={{ fontSize: 16 }}/>
                        </IconButton>
                    </>
                );
            },
        },
    ]
);

import { useNavigation } from "@pankod/refine";
import { IconButton, TextField } from "@mui/material";

const { show } = useNavigation();

const columns = React.useMemo<GridColDef[]>(
    () => [
        {
            field: "id",
            headerName: "Job ID",
            minWidth: 370,
            renderCell: function render({ row }) {
                const jobId = row?.id;
                const handleCopyClick = () => {
                    // copy the text into clipboard
                    copyToClipboard(jobId);
                    window.alert("Job ID copied");
                };
                const handleShowClick = () => {
                    show("jobs", jobId);
                };
                return (
                    <>
                        <TextField value={jobId} onClick={handleShowClick} />
                        <IconButton onClick={handleCopyClick} aria-label="Copy">
                            <FileCopyIcon style={{ fontSize: 16 }}/>
                        </IconButton>
                    </>
                );
            },
        },
    ]
);

In this code, we're using the show method from useNavigation to navigate to the show page of the job with the given jobId when the TextField is clicked. You can learn more about the useNavigation hook from the refine documentation (https://refine.dev/docs/api-reference/core/hooks/navigation/useNavigation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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