woocommerce/plugins/woocommerce-admin/client/layout/transient-notices/index.js

109 lines
2.7 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { applyFilters } from '@wordpress/hooks';
import classnames from 'classnames';
import { OPTIONS_STORE_NAME, USER_STORE_NAME } from '@woocommerce/data';
import PropTypes from 'prop-types';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import SnackbarList from './snackbar/list';
import './style.scss';
const QUEUE_OPTION = 'woocommerce_admin_transient_notices_queue';
const QUEUED_NOTICE_FILTER = 'woocommerce_admin_queued_notice_filter';
function TransientNotices( props ) {
const { createNotice, removeNotice: onRemove } = useDispatch(
'core/notices2'
);
const { removeNotice: onRemove2 } = useDispatch( 'core/notices2' );
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
const {
currentUser = {},
notices = [],
notices2 = [],
noticesQueue = {},
} = useSelect( ( select ) => {
// NOTE: This uses core/notices2, if this file is copied back upstream
// to Gutenberg this needs to be changed back to just core/notices.
return {
currentUser: select( USER_STORE_NAME ).getCurrentUser(),
notices: select( 'core/notices' ).getNotices(),
notices2: select( 'core/notices2' ).getNotices(),
noticesQueue: select( OPTIONS_STORE_NAME ).getOption(
QUEUE_OPTION
),
};
} );
const getCurrentUserNotices = () => {
return Object.values( noticesQueue ).filter(
( notice ) => notice.user_id === currentUser.id || ! notice.user_id
);
};
const dequeueNotice = ( id ) => {
const remainingNotices = { ...noticesQueue };
delete remainingNotices[ id ];
updateOptions( {
[ QUEUE_OPTION ]: remainingNotices,
} );
};
useEffect( () => {
getCurrentUserNotices().forEach( ( queuedNotice ) => {
const notice = applyFilters( QUEUED_NOTICE_FILTER, queuedNotice );
createNotice( notice.status, notice.content, {
onDismiss: () => {
dequeueNotice( notice.id );
},
...( notice.options || {} ),
} );
} );
}, [] );
/**
* Combines the two notices in the component vs in the useSelect, as we don't want to
* create new object references on each useSelect call.
*/
const getNotices = () => {
return notices.concat( notices2 );
};
const { className } = props;
const classes = classnames(
'woocommerce-transient-notices',
'components-notices__snackbar',
className
);
const combinedNotices = getNotices();
return (
<SnackbarList
notices={ combinedNotices }
className={ classes }
onRemove={ onRemove }
onRemove2={ onRemove2 }
/>
);
}
TransientNotices.propTypes = {
/**
* Additional class name to style the component.
*/
className: PropTypes.string,
/**
* Array of notices to be displayed.
*/
notices: PropTypes.array,
};
export default TransientNotices;