diff --git a/admin/class-yoast-notification.php b/admin/class-yoast-notification.php index 3191827b11e..dd01300cf85 100644 --- a/admin/class-yoast-notification.php +++ b/admin/class-yoast-notification.php @@ -355,6 +355,15 @@ public function render() { return '
' . $message . '
' . PHP_EOL; } + /** + * Get the message for the notification. + * + * @return string The message. + */ + public function get_message() { + return wpautop( $this->message ); + } + /** * Wraps the message with a Yoast SEO icon. * diff --git a/packages/js/src/dashboard/store/alert-center.js b/packages/js/src/dashboard/store/alert-center.js new file mode 100644 index 00000000000..135958e77fd --- /dev/null +++ b/packages/js/src/dashboard/store/alert-center.js @@ -0,0 +1,67 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { get } from "lodash"; + +/** + * @returns {Object} The initial state. + */ +export const createInitialAlertCenterState = () => ( { + notifications: { + active: get( window, "wpseoScriptData.notifications.active", [] ), + dismissed: get( window, "wpseoScriptData.notifications.dismissed", [] ), + }, + problems: { + active: get( window, "wpseoScriptData.problems.active", [] ), + dismissed: get( window, "wpseoScriptData.problems.dismissed", [] ), + }, +} ); + +/** + * Change alert visability. + * + * @param {object} state The state. + * @param {string} type The type of the alert. + * @param {string} target The target visability of the alert. + * @param {string} id The id of the alert to hide. + * + * @returns {void} + */ +const changeAlertVisibility = ( state, type, target, id ) => { + const statuses = [ "active", "dismissed" ]; + const source = statuses.find( ( status ) => status !== target ); + + const alertToShow = state[ type ][ source ].find( ( alert ) => alert.id === id ); + if ( alertToShow ) { + state[ type ][ source ] = state[ type ].active.filter( ( alert ) => alert.id !== id ); + state[ type ][ target ].push( alertToShow ); + } +}; + +const slice = createSlice( { + name: "alertCenter", + initialState: createInitialAlertCenterState(), + reducers: { + hideNotification: ( state, action ) => { + changeAlertVisibility( state, "notifications", "dismissed", action.payload ); + }, + hideProblem: ( state, action ) => { + changeAlertVisibility( state, "problems", "dismissed", action.payload ); + }, + showNotification: ( state, action ) => { + changeAlertVisibility( state, "notifications", "active", action.payload ); + }, + showProblem: ( state, action ) => { + changeAlertVisibility( state, "problems", "active", action.payload ); + }, + }, +} ); + +export const alertCenterSelectors = { + selectActiveProblems: ( state ) => get( state, "alertCenter.problems.active", [] ), + selectDismissedProblems: ( state ) => get( state, "alertCenter.problems.dismissed", [] ), + selectActiveNotifications: ( state ) => get( state, "alertCenter.notifications.active", [] ), + selectDismissedNotifications: ( state ) => get( state, "alertCenter.notifications.dismissed", [] ), +}; + +export const alertCenterActions = slice.actions; + +export default slice.reducer; diff --git a/packages/js/src/dashboard/store/index.js b/packages/js/src/dashboard/store/index.js index f16cf812f3e..c276418d818 100644 --- a/packages/js/src/dashboard/store/index.js +++ b/packages/js/src/dashboard/store/index.js @@ -4,6 +4,7 @@ import { merge } from "lodash"; import { getInitialLinkParamsState, LINK_PARAMS_NAME, linkParamsActions, linkParamsReducer, linkParamsSelectors } from "../../shared-admin/store"; import { STORE_NAME } from "../constants"; import preferences, { createInitialPreferencesState, preferencesActions, preferencesSelectors } from "./preferences"; +import alertCenter, { alertCenterActions, alertCenterSelectors, createInitialAlertCenterState } from "./alert-center"; /** @typedef {import("@wordpress/data/src/types").WPDataStore} WPDataStore */ @@ -16,22 +17,26 @@ const createStore = ( { initialState } ) => { actions: { ...linkParamsActions, ...preferencesActions, + ...alertCenterActions, }, selectors: { ...linkParamsSelectors, ...preferencesSelectors, + ...alertCenterSelectors, }, initialState: merge( {}, { [ LINK_PARAMS_NAME ]: getInitialLinkParamsState(), preferences: createInitialPreferencesState(), + alertCenter: createInitialAlertCenterState(), }, initialState ), reducer: combineReducers( { [ LINK_PARAMS_NAME ]: linkParamsReducer, preferences, + alertCenter, } ), } ); diff --git a/src/helpers/notification-helper.php b/src/helpers/notification-helper.php index c06ca22dd05..100d0a06687 100644 --- a/src/helpers/notification-helper.php +++ b/src/helpers/notification-helper.php @@ -75,13 +75,19 @@ function ( $notification ) { return [ 'dismissed' => \array_map( static function ( $notification ) { - return $notification->to_array(); + return [ + 'id' => $notification->get_id(), + 'message' => $notification->get_message(), + ]; }, $dismissed_notifications ), 'active' => \array_map( static function ( $notification ) { - return $notification->to_array(); + return [ + 'id' => $notification->get_id(), + 'message' => $notification->get_message(), + ]; }, $active_notifications ), @@ -113,13 +119,19 @@ function ( $notification ) { return [ 'dismissed' => \array_map( static function ( $notification ) { - return $notification->to_array(); + return [ + 'id' => $notification->get_id(), + 'message' => $notification->get_message(), + ]; }, $dismissed_problems ), 'active' => \array_map( static function ( $notification ) { - return $notification->to_array(); + return [ + 'id' => $notification->get_id(), + 'message' => $notification->get_message(), + ]; }, $active_problems ),