Get the next record in react-admin

user_1225986 0
Viewed 311

Desired flow: I have a <list> of "images" that are to be approved. I click on a record and it brings up the <edit> component. After I click save it should take me to the next record in the dataset to edit.

I am struggling with how to achieve this, is it possible?

react-admin
1 Answers

That's a great use case, and unfortunately react-admin offers no direct way to do it. That's because there is some complexity that depends on how your API handles prev/next queries. Let me explain.

If you arrive to an Edit view via a List view, react-admin knows the previous and next record related to the current record - with filters and sorting applied. Yet, it doesn't work if the current record is the first or the last in the page, or if the user arrives directly to the Edit view.

So you have no way but to query your API for the prev/next id related to the current one. Your API should expose a custom route for that(like GET /posts?before_and_after_id=123&sort=...&filter=...), and there is currently no standard for that.

I'd advise you to put this logic into a new dataProvider verb, something like dataProvider.getNext(id, sort, order, filter). That way, the <NextButton> would look like the following:

const NextButton = () => {
  const [next, setNext] = useState();
  const record = useRecordContext();
  const dataProvider = useDataProvider();
  const params = useSelector(state => state.admin.resources.posts.list.params);
  const redirect = useRedirect();

  useEffect(() => {
    if (!record) return;
    dataProvider
       .getNext(record.id, params.sort, params.order, params.filter)
       .then(({ data }) => setNext(data));
  }, [record]);

  const handleClick = () => {
    redirect(`/posts/${next.id}`);
  }

  if (!next) return null;

  return (
    <Button onClick={handleClick}>Next</Button>
  );
}

You can choose to query the dataProvider on click rather than on mount, but in that case you should disable the button while fetching to indicate to the user that their action was taken into account.

user_13334790
Related