Change activeKeyword-based logic to openSidebarSections-based logic

js/src/edit.js

@@ -11,7 +11,7 @@ import flowRight from "lodash/flowRight";
 import IntlProvider from "./components/IntlProvider";
 import markerStatusReducer from "./redux/reducers/markerButtons";
 import analysis from "yoast-components/composites/Plugin/ContentAnalysis/reducers/contentAnalysisReducer";
-import activeKeyword from "./redux/reducers/activeKeyword";
+import openSidebarSectionsReducer from "./redux/reducers/openSidebarSections";
 import keywordsReducer from "./redux/reducers/keywords";
 import ContentAnalysis from "./components/contentAnalysis/ReadabilityAnalysis";
 import SeoAnalysis from "./components/contentAnalysis/SeoAnalysis";
@@ -52,7 +52,7 @@ function configureStore() {
 	const rootReducer = combineReducers( {
 		marksButtonStatus: markerStatusReducer,
 		analysis: analysis,
-		activeKeyword: activeKeyword,
+		openSidebarSections: openSidebarSectionsReducer,
 		keywords: keywordsReducer,
 	} );
 

js/src/redux/actions/openSidebarSections.js

@@ -0,0 +1,44 @@
+const PREFIX = "WPSEO_";
+
+export const OPEN_SIDEBAR_SECTION = `${ PREFIX }OPEN_SIDEBAR_SECTION`;
+export const CLOSE_SIDEBAR_SECTION = `${ PREFIX }CLOSE_SIDEBAR_SECTION`;
+export const CLOSE_ALL_SIDEBAR_SECTIONS = `${ PREFIX }CLOSE_ALL_SIDEBAR_SECTIONS`;
+
+/**
+ * An action creator for the action that opens a section.
+ *
+ * @param {string} sectionId The id of the to be opened section.
+ *
+ * @returns {Object}         A (WPSEO_)OPEN_SECTION action.
+ */
+export const openSidebarSection = function( sectionId ) {
+	return {
+		type: OPEN_SIDEBAR_SECTION,
+		sectionId,
+	};
+};
+
+/**
+ * An action creator for the action that closes a section.
+ *
+ * @param {string} sectionId The id of the to be closed section.
+ *
+ * @returns {Object}         A (WPSEO_)CLOSE_SECTION action.
+ */
+export const closeSidebarSection = function( sectionId ) {
+	return {
+		type: CLOSE_SIDEBAR_SECTION,
+		sectionId,
+	};
+};
+
+/**
+ * An action creator for the action that closes all sections.
+ *
+ * @returns {Object}         A (WPSEO_)CLOSE_ALL_SECTIONS action.
+ */
+export const closeAllSidebarSections = function() {
+	return {
+		type: CLOSE_ALL_SIDEBAR_SECTIONS,
+	};
+};

js/src/redux/reducers/openSidebarSections.js

@@ -0,0 +1,49 @@
+import { CLOSE_ALL_SIDEBAR_SECTIONS, OPEN_SIDEBAR_SECTION, CLOSE_SIDEBAR_SECTION } from "../actions/openSidebarSections";
+
+const INITIAL_STATE = [];
+
+/**
+ * Helper function: returns an array with the requested item removed.
+ *
+ * @param   {Array}  openSections The array from which the item should be removed.
+ * @param   {string} removeItem   The item to be removed.
+ *
+ * @returns {Array}               The array without the item that should be removed.
+ */
+let sidebarSectionCloser = ( openSidebarSections, removeSection ) => {
+	return openSidebarSections.filter( item => item !== removeSection );
+};
+
+let sidebarSectionOpener = ( openSidebarSections, addSection ) => {
+	if ( typeof addSection !== "string" || openSidebarSections.includes( addSection ) ) {
+		return openSidebarSections;
+	}
+
+	return [
+		...openSidebarSections,
+		addSection,
+	];
+};
+
+/**
+ * A reducer for adding and removing section ids.
+ *
+ * @param {Object} state The current state of the state managed by the reducer, which in this case is openSections.
+ * @param {Object} action The current action received.
+ *
+ * @returns {Object} The new state, which may be altered or not.
+ */
+function openSidebarSectionsReducer( state = INITIAL_STATE, action ) {
+	switch( action.type ) {
+		case OPEN_SIDEBAR_SECTION:
+			return sidebarSectionOpener( state, action.sectionId );
+		case CLOSE_SIDEBAR_SECTION:
+			return sidebarSectionCloser( state, action.sectionId );
+		case CLOSE_ALL_SIDEBAR_SECTIONS:
+			return [];
+		default:
+			return state;
+	}
+}
+
+export default openSidebarSectionsReducer;

js/tests/redux/actions/openSidebarSections.test.js

@@ -0,0 +1,34 @@
+/* global describe, it, expect */
+
+import * as actions from "../../../src/redux/actions/openSidebarSections";
+
+describe( "openSidebarSections actions", () => {
+	it( "should pass along the id when opening a section", () => {
+		const expected = {
+			type: actions.OPEN_SIDEBAR_SECTION,
+			sectionId: "sectionOpened",
+		};
+		const actual = actions.openSidebarSection( "sectionOpened" );
+
+		expect( actual ).toEqual( expected );
+	} );
+
+	it( "should pass along the keyword when closing a section", () => {
+		const expected = {
+			type: actions.CLOSE_SIDEBAR_SECTION,
+			sectionId: "sectionClosed",
+		};
+		const actual = actions.closeSidebarSection( "sectionClosed" );
+
+		expect( actual ).toEqual( expected );
+	} );
+
+	it( "should pass nothing but the type in the action object when closing all sections", () => {
+		const expected = {
+			type: actions.CLOSE_ALL_SIDEBAR_SECTIONS,
+		};
+		const actual = actions.closeAllSidebarSections();
+
+		expect( actual ).toEqual( expected );
+	} );
+} );

js/tests/redux/reducers/openSidebarSections.test.js

@@ -0,0 +1,66 @@
+/* global describe, it, expect */
+
+import { openSidebarSection, closeSidebarSection, closeAllSidebarSections } from "../../../src/redux/actions/openSidebarSections";
+import openSidebarSectionsReducer from "../../../src/redux/reducers/openSidebarSections";
+
+describe( "openSidebarSections reducers", () => {
+	describe( "openSidebarSection", () => {
+		it( "should add the to be opened section to the openSidebarSections array", () => {
+			const state = [];
+			const action = openSidebarSection( "openThisSection" );
+			const expected = [ "openThisSection" ];
+			const actual = openSidebarSectionsReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+
+		it( "should not add a section that is already open to the openSidebarSections array", () => {
+			const state = [ "alreadyOpen", "alsoOpen" ];
+			const action = openSidebarSection( "alreadyOpen" );
+			const expected = [ "alreadyOpen", "alsoOpen" ];
+			const actual = openSidebarSectionsReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+
+		it( "should not add the section to the array if the passed argument is not a string", () => {
+			const state = [ "alreadyOpen", "alsoOpen" ];
+			const action = openSidebarSection( 1234 );
+			const expected = [ "alreadyOpen", "alsoOpen" ];
+			const actual = openSidebarSectionsReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+	} );
+
+	describe( "closeSidebarSection", () => {
+		it( "should remove the to be closed section from the openSidebarSections array", () => {
+			const state = [ "alreadyOpen", "alsoOpen" ];
+			const action = closeSidebarSection( "alsoOpen" );
+			const expected = [ "alreadyOpen" ];
+			const actual = openSidebarSectionsReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+
+		it( "should not change the array when closing a section that was already closed", () => {
+			const state = [ "alreadyOpen", "alsoOpen" ];
+			const action = closeSidebarSection( "fictionalSection" );
+			const expected = [ "alreadyOpen", "alsoOpen" ];
+			const actual = openSidebarSectionsReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+	} );
+
+	describe( "closeAllSidebarSections", () => {
+		it( "should empty the openSidebarSections array", () => {
+			const state = [ "alreadyOpen", "alsoOpen" ];
+			const action = closeAllSidebarSections();
+			const expected = [];
+			const actual = openSidebarSectionsReducer( state, action );
+
+			expect( actual ).toEqual( expected );
+		} );
+	} );
+} );