Making a toggle button in react-admin in Show - reactjs

Question

In react-admin, I want to create a toggle button which on the basis of default value from database will allow user to change the state and make corresponding changes both in the Show as well as in backend database.
Currently My code looks like this:
default class Deploy extends React.Component<{ data: any }> {
handleClick = () => {
const status = this.props.data.status;
alert(status);
};
render() {
const status = this.props.data.status;
return (
<Fragment>
<Button color="primary" onClick={this.handleClick}>
<ActionEject />
{status === "DEPLOYED" ? "UNDEPLOY" : "DEPLOY"}
</Button>
</Fragment>
);
}
}
class Actions extends React.Component<{ basePath: any; data: any; resource: any }, any> {
render() {
const basePath = this.props.basePath;
const data = this.props.data;
const resource = this.props.resource;
if (this.props.data) {
const defaultValue = this.props.data.default;
return (
<Deploy data={data} />
);
}
return null;
}
}
export default class ModelShow extends React.Component {
render() {
return (
<Show title={<ModelName />} actions={<Action />} {...this.props}>
<TabbedShowLayout>
<Tab label="Summary">
<TextField source="id" />
<TextField source="status" />
</Tab>
</TabbedShowLayout>
</Show>
);
}
}
P.S: I'm using Typescript.

Answer 1

You'll find multiple examples in the documentation for Actions
In order to correctly update the react-admin state, you should follow either the Using a Data Provider Instead of Fetch example or the Using a Custom Action Creator example.
Here's an example using the dataProvider directly:
// Import the UPDATE verb
import { UPDATE } from 'react-admin';
// Import your dataProvider
import dataProvider from '../dataProvider';
default class Deploy extends React.Component<{ data: any }> {
handleClick = () => {
const status = this.props.data.status;
const { push, record, showNotification } = this.props;
const updatedRecord = { ...record, status };
dataProvider(UPDATE, 'you_resource_name', { id: record.id, data: updatedRecord })
.then(() => {
// Optional notification
showNotification('Resource deployed');
// Optional redirection to the list page
push('/you_resource_name');
})
.catch((e) => {
console.error(e);
showNotification('Error: resource not deployed', 'warning')
});
};
render() {
const status = this.props.data.status;
return (
<Fragment>
<Button color="primary" onClick={this.handleClick}>
<ActionEject />
{status === "DEPLOYED" ? "UNDEPLOY" : "DEPLOY"}
</Button>
</Fragment>
);
}
}