Headless WordPress: Notices System | https://ibenic.com/headless-wordpress-notices-system

App.js

// ...
import Dashboard from './components/Dashboard';
import AppNotices from './components/AppNotices';
import '@wordpress/notices';

function App() {
  // ...
 
  return (
    <div className="App container">
      // ...
      <AppNotices />
      // ...

    </div>
  );
}

export default App;

App.scss

@import '~bootstrap/scss/bootstrap.scss';
@import '~@wordpress/components/build-style/style.css';
 
.components-editor-notices__snackbar {
    position: fixed;
	right: 0;
	bottom: 20px;
	padding-left: 16px;
    padding-right: 16px;
}

AppNotices.js

import React from 'react';
/**
 * External dependencies
 */
import { filter } from 'lodash';

/**
 * WordPress dependencies
 */
import { SnackbarList, NoticeList } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';

AppNotices2.js

// ...
export function AppNotices( { notices, onRemove } ) {
  const defaultNotices = filter( notices, {
    type: 'default',
  } );

  const snackbarNotices = filter( notices, {
    type: 'snackbar',
  } );

  return (
    <>
      <NoticeList
        notices={ defaultNotices }
        className="components-editor-notices__pinned"
      />
      <SnackbarList
        notices={ snackbarNotices }
        className="components-editor-notices__snackbar"
        onRemove={ onRemove }
      />
    </>
  );
}

AppNotices3.js

export default compose( [
	withSelect( ( select ) => ( {
		notices: select( 'core/notices' ).getNotices(),
	} ) ),
	withDispatch( ( dispatch ) => ( {
		onRemove: dispatch( 'core/notices' ).removeNotice,
	} ) ),
] )( AppNotices );

notices.js

import { dispatch } from '@wordpress/data';

export function addSnackbar( message, id ) {
    addNotice( message, id, 'success', 'snackbar');
}
export function addNotice( message, id, type = 'success', noticeType = 'default' ) {
    switch( type ) {
        case 'success':
         dispatch( 'core/notices' ).createSuccessNotice( message, {
            id: id,
            type: noticeType,
          } ); 
          break;
        case 'error':
            dispatch( 'core/notices' ).createErrorNotice( message, {
                id: id,
                type: noticeType,
                } ); 
            break;
        case 'warning':
            dispatch( 'core/notices' ).createWarningNotice( message, {
                id: id,
                type: noticeType,
                } ); 
            break;
        case 'info':
            dispatch( 'core/notices' ).createInfoNotice( message, {
                id: id,
                type: noticeType,
                } ); 
            break;
        default:
            dispatch( 'core/notices' ).createNotice( message, {
                id: id,
                type: noticeType,
                } ); 
    }
    
}

export function removeNotice( id ) {
    dispatch( 'core/notices' ).removeNotice( id ); 
}

Settings.js

import React from 'react';
import { TextControl, Button } from '@wordpress/components';
import { addSnackbar } from '../../functions/notices';
const axios = require('axios');

class Settings extends React.Component {
    // ...
  
    updateUser() {
        // ...
        axios({
            method: 'POST',
            url: userURI,
            headers: { 'Authorization': 'Bearer ' + token },
            data: this.state.update
        }).then(function (response) {
            if ( response.status === 200 ) {
                const data = response.data;
                _this.props.setCurrentUser( data );
                // Adding snackbar.
                addSnackbar( 'Settings Updated', 'updated_user' );    
            }
        })
        .catch(function (error) {
            console.error( error );
        });

    }
    
    // ...
}

export default Settings;