Search code examples
javascriptreactjsreact-admin

Is it possible to use startUndoable with custom action in react-admin?


I wondered if passing a custom action with a custom fetch and type (which is not update) to startUndoable is feasible.

Or is it possible that somehow define a pattern with values in meta and based on this pattern the view would be re-rendered?

In this case the IMPORT is updating only one property in the database with a fixed value.

This is the action:

export const importParcel = ({ id }) => ({
    type: IMPORT_PARCEL,
    payload: {
        id
    },
    meta: {
        resource: 'parcels',
        fetch: IMPORT,
        refresh: true,
        onSuccess: {
            notification: {
                body: 'Parcel Imported',
                level: 'info'
            }
        },
        onFailure: {
            notification: {
                body: 'Error: Import failed',
                level: 'warning'
            }
        }
    }
});

This is the handler:

fetchUtils
.fetchJson(`/${resource}/import/${params.id}`, {
    method: 'PUT',
    headers: getAuthenticationHeaders()
})
.then(res => ({ data: res.json }));

Thanks for your help! :)


Solution

  • Sure, as explained in the Optimistic Rendering and Undo documentation you can create whatever action you want with startUndoable:

    import { startUndoable as startUndoableAction } from 'ra-core';
    
    class App extends Component {
        handleImport = () => {
            this.props.startUndoable(importParcel());
        };
    
        render() {
            return <Button onClick={this.handleImport}>Import Parcel</Button>;
        }
    }
    
    export default connect(null, { startUndoable: startUndoableAction })(App);
    

    You action must have a onSuccess notification in order to display the undo button.

    The rest should be implemented in your data provider.