<EditLive>

<EditLive> is an Enterprise EditionReact Admin Enterprise Edition icon component that renders an Edit view. It displays a warning when the record is updated by another user and offers to refresh the page. Also, it displays a warning when the record is deleted by another user.

EditLive

Usage

Use <EditLive> instead of <Edit>:

import { SimpleForm, TextInput } from 'react-admin';
import { EditLive } from '@react-admin/ra-realtime';
const PostEdit = () => (
 <EditLive>
 <SimpleForm>
 <TextInput source="title" />
 </SimpleForm>
 </EditLive>
);

To trigger <EditLive> features, the API has to publish events containing at least the following:

{
 topic : '/resource/{resource}/{recordIdentifier}',
 type: '{deleted || updated}',
 payload: { id: [{ recordIdentifier }]},
}

<EditLive> accepts the same props as <Edit>. Refer to the <Edit> documentation for more information.

onEventReceived

The <EditLive> allows you to customize the side effects triggered when it receives a new event, by passing a function to the onEventReceived prop:

import { SimpleForm, TextInput, useRefresh } from 'react-admin';
import { EditLive, EventType } from '@react-admin/ra-realtime';
const PostEdit = () => {
 const notify = useNotify();
 const handleEventReceived = (
 event,
 { setDeleted, setUpdated, setUpdatedDisplayed }
 ) => {
 if (event.type === EventType.Updated) {
 notify('Record updated');
 setUpdated(true);
 setUpdatedDisplayed(true);
 } else if (event.type === EventType.Deleted) {
 notify('Record deleted');
 setDeleted(true);
 setUpdated(false);
 setUpdatedDisplayed(true);
 }
 };
 return (
 <EditLive onEventReceived={handleEventReceived}>
 <SimpleForm>
 <TextInput source="title" />
 </SimpleForm>
 </EditLive>
 );
};

The function passed to onEventReceived will be called with the event as its first argument and an object containing functions that will update the UI:

• setDeleted: If set to true, the edit view will show a message to let users know this record has been deleted.
• setUpdated: If set to true, the edit view will show a message to let users know this record has been updated.
• setUpdatedDisplayed: Must be set to true after calling setUpdated. This is used to show the message about the record being updated only for a few seconds.