feat: add alert center redux store

admin/class-yoast-notification.php

@@ -355,6 +355,15 @@ public function render() {
 		return '<div ' . implode( ' ', $attributes ) . '>' . $message . '</div>' . 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.
 	 *

packages/js/src/dashboard/store/alert-center.js

@@ -0,0 +1,80 @@
+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", [] ),
+	},
+} );
+
+/**
+ * Hide an alert.
+ *
+ * @param {object} state The state.
+ * @param {string} type The type of the alert.
+ * @param {string} id The id of the alert to hide.
+ *
+ * @returns {void}
+ */
+const hideAlert = ( state, type,  id ) => {
+	const alertToHide = state[ type ].active.find( ( alert ) => alert.id === id );
+	if ( alertToHide ) {
+		state[ type ].active = state[ type ].active.filter( ( alert ) => alert.id !== id );
+		state[ type ].dismissed.push( alertToHide );
+	}
+};
+
+/**
+ * Show an alert.
+ *
+ * @param {object} state The state.
+ * @param {string} type The type of the alert.
+ * @param {string} id The id of the alert to hide.
+ *
+ * @returns {void}
+ */
+const showAlert = ( state, type,  id ) => {
+	const alertToShow = state[ type ].dismissed.find( ( alert ) => alert.id === id );
+	if ( alertToShow ) {
+		state[ type ].dismissed = state[ type ].active.filter( ( alert ) => alert.id !== id );
+		state[ type ].active.push( alertToShow );
+	}
+};
+
+const slice = createSlice( {
+	name: "alertCenter",
+	initialState: createInitialAlertCenterState(),
+	reducers: {
+		hideNotification: ( state, action ) => {
+			hideAlert( state, "notifications", action.payload );
+		},
+		hideProblem: ( state, action ) => {
+			hideAlert( state, "problems", action.payload );
+		},
+		showNotification: ( state, action ) => {
+			showAlert( state, "notifications", action.payload );
+		},
+		showProblem: ( state, action ) => {
+			showAlert( state, "problems", 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;

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,
 		} ),
 
 	} );

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
 			),