React-admin: showNotification function not working, no errors reported

[jonathanpopp]

Expecting a success or warning message appear at the bottom of the screen when I call
showNotification('My Message');

But instead, nothing is occurring, not even an error message. The "done approving" or "done rejecting" console logs appear in the console right before showNotification is called.

import React, {Fragment, Component} from 'react';
import { Responsive, List, SimpleList, Datagrid, TextField, DateField, EditButton, ImageField, Pagination} from 'react-admin';
import { CardActions, ExportButton, RefreshButton, Button } from 'react-admin';
import MainTitle from './MainTitle';
import { withStyles } from '@material-ui/core/styles';
import { Edit, SimpleForm, Toolbar, UPDATE } from 'react-admin';
import Breadcrumbs from "./Breadcrumbs";
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { showNotification } from 'react-admin';
import { push as pushAction } from 'react-router-redux';
import dataProvider from './GoTribeDataProvider';
//import { put } from 'redux-saga/effects';
import { showNotification } from 'react-admin';

class ApproveButton extends Component {
    handleClick = () => {
      const { push, record, showNotification } = this.props;
      dataProvider(UPDATE, 'nutrition', { id: record.id, data: {is_approved: 'true'} })
          .then((test) => {
              console.log("done approving ", test.data.message);
              showNotification(test.data.message);
              window.location = "/#/nutrition";
          })
          .catch((e) => {
            console.log("e ", e);
            //alert("Internal Exception rejecting nutrition item");
            showNotification(test.data.message);
            window.location = "/#/nutrition";
          });
    }
    render() {
        return <Button variant="raised" label='Approve' onClick={this.handleClick} />;
    }
}
class RejectButton extends Component {
    handleClick = () => {
      const { push, record, showNotification } = this.props;
      dataProvider(UPDATE, 'nutrition', { id: record.id, data: {is_approved: 'false'} })
          .then((test) => {
              console.log("done rejecting ", test);
              showNotification('Nutrition rejected');
              window.location = "/#/nutrition";
          })
          .catch((e) => {
            showNotification("Internal Exception rejecting nutrition item")
            window.location = "/#/nutrition";
          });
    }
    render() {
        return <Button variant="flat" label='Reject' onClick={this.handleClick} />;
    }
}
const NutritionEditToolbar = props => (
    <Toolbar {...props} >
        <ApproveButton/>
        <RejectButton/>
    </Toolbar>
);
export const NutritionEdit = props => (
    <Edit actions={<NutritionEditActions />} title={<EditTitle />}  {...props} >
        <SimpleForm style={{width: "95%"}}  toolbar={<NutritionEditToolbar />} >
            <Breadcrumbs />
            <TextField source="name" />
            <TextField source="tags" />
            <ImageTextFieldInput style={{width: "95%"}} source="imageUrl" />
        </SimpleForm>
    </Edit>
);
ApproveButton.propTypes = {
    push: PropTypes.func,
    record: PropTypes.object,
    showNotification: PropTypes.func,
};
RejectButton.propTypes = {
    push: PropTypes.func,
    record: PropTypes.object,
    showNotification: PropTypes.func,
};
export default connect(null, {
    showNotification: showNotification,
    push: pushAction,
})(ApproveButton, RejectButton);

Other information:
I omitted the NutritionEditActions, EditTitle, imageEditStyles, and ImageTextFieldInput.

Environment

• React-admin version: ^2.9.4
• React version: ^16.7.0
• Browser: chrome

[fzaninotto]

Unable to reproduce the error, please fork the react-admin codesandbox to provide a use case that triggers the bug. That being said, I suspect it's a problem on your side - connect only allows to wrap one component.

[vasiliy0s]

The same issue for me. It works good on custom LoginPage, but don't work on any another page created with react-admin.

[vasiliy0s]

I found that I missed to render <Notification/> component inside my custom <AppLayout/>.

[imhazige]

I still have the same issue.
https://codesandbox.io/s/simple-6nzp0
please see /src/posts/postEdit.js line 73.
no notification show.

Could you add a working code on the sandbox?
@djhi @fzaninotto

[djhi]

Please ask questions on StackOverflow

[imhazige]

ok, can you help me now
https://stackoverflow.com/questions/58112072/shownotification-in-react-admin-doesnt-work-still

@djhi @fzaninotto