Preserve expandable menu open/closed state using Redux

client/reader/controller.js

@@ -1,16 +1,17 @@
 /**
  * External Dependencies
  */
-var ReactDom = require( 'react-dom' ),
+const ReactDom = require( 'react-dom' ),
 	React = require( 'react' ),
 	page = require( 'page' ),
 	debug = require( 'debug' )( 'calypso:reader:controller' ),
-	trim = require( 'lodash/string/trim' );
+	trim = require( 'lodash/string/trim' ),
+	ReduxProvider = require( 'react-redux' ).Provider;
 
 /**
  * Internal Dependencies
  */
-var i18n = require( 'lib/mixins/i18n' ),
+const i18n = require( 'lib/mixins/i18n' ),
 	route = require( 'lib/route' ),
 	analytics = require( 'analytics' ),
 	config = require( 'config' ),
@@ -103,7 +104,9 @@ module.exports = {
 		context.store.dispatch( setSection( 'reader' ) );
 
 		ReactDom.render(
-			React.createElement( ReaderSidebarComponent, { path: context.path } ),
+			React.createElement( ReduxProvider, { store: context.store },
+				React.createElement( ReaderSidebarComponent, { path: context.path } )
+			),
 			document.getElementById( 'secondary' )
 		);
 

client/reader/sidebar/expandable.jsx

@@ -24,7 +24,6 @@ const ExpandableSidebarMenu = React.createClass( {
 
 	getInitialState() {
 		return {
-			expanded: this.props.expanded,
 			isAdding: false
 		};
 	},
@@ -36,16 +35,13 @@ const ExpandableSidebarMenu = React.createClass( {
 	},
 
 	onClick() {
-		if ( this.props.children ) {
-			this.setState( { expanded: ! this.state.expanded } );
-		}
-	},
-
-	getClickAction() {
 		if ( this.props.disabled ) {
 			return;
 		}
-		return this.onClick;
+
+		if ( this.props.onClick ) {
+			this.props.onClick();
+		}
 	},
 
 	renderContent() {
@@ -110,7 +106,7 @@ const ExpandableSidebarMenu = React.createClass( {
 			this.props.className,
 			{
 				'is-add-open': this.state.isAdding,
-				'is-toggle-open': !! this.state.expanded,
+				'is-toggle-open': !! this.props.expanded,
 				'is-togglable': true,
 				'is-dynamic': true
 			}

client/reader/sidebar/index.jsx

@@ -5,6 +5,8 @@ import React from 'react';
 import closest from 'component-closest';
 import page from 'page';
 import url from 'url';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 
 /**
  * Internal Dependencies
@@ -24,6 +26,7 @@ import ReaderSidebarTags from './tags';
 import ReaderSidebarLists from './lists';
 import ReaderSidebarTeams from './teams';
 import ReaderSidebarHelper from './helper';
+import { toggleReaderSidebarLists, toggleReaderSidebarTags } from 'state/ui/reader/sidebar/actions';
 
 const ReaderSidebar = React.createClass( {
 
@@ -132,11 +135,24 @@ const ReaderSidebar = React.createClass( {
 					</ul>
 				</SidebarMenu>
 
-				<ReaderSidebarLists lists={ this.state.lists } path={ this.props.path } />
-				<ReaderSidebarTags tags={ this.state.tags } path={ this.props.path } />
+				<ReaderSidebarLists lists={ this.state.lists } path={ this.props.path } isOpen={ this.props.isListsOpen } onClick={ this.props.toggleListsVisibility } />
+				<ReaderSidebarTags tags={ this.state.tags } path={ this.props.path } isOpen={ this.props.isTagsOpen } onClick={ this.props.toggleTagsVisibility } />
 			</Sidebar>
 		);
 	}
 } );
 
-export default ReaderSidebar;
+export default connect(
+	( state ) => {
+		return {
+			isListsOpen: state.ui.reader.sidebar.isListsOpen,
+			isTagsOpen: state.ui.reader.sidebar.isTagsOpen
+		};
+	},
+	( dispatch ) => {
+		return bindActionCreators( {
+			toggleListsVisibility: toggleReaderSidebarLists,
+			toggleTagsVisibility: toggleReaderSidebarTags
+		}, dispatch );
+	}
+)( ReaderSidebar );

client/reader/sidebar/lists/index.jsx

@@ -16,24 +16,27 @@ const ReaderSidebarLists = React.createClass( {
 
 	propTypes: {
 		lists: React.PropTypes.array,
-		path: React.PropTypes.string.isRequired
+		path: React.PropTypes.string.isRequired,
+		isOpen: React.PropTypes.bool,
+		onClick: React.PropTypes.func
 	},
 
-	createList: function( list ) {
+	createList( list ) {
 		stats.recordAction( 'add_list' );
 		stats.recordGaEvent( 'Clicked Create List' );
 		ReaderListsActions.create( list );
 	},
 
-	render: function() {
+	render() {
 		const listCount = this.props.lists ? this.props.lists.length : 0;
 		return (
 			<ExpandableSidebarMenu
-				expanded={ false }
+				expanded={ this.props.isOpen }
 				title={ this.translate( 'Lists' ) }
 				count={ listCount }
 				addPlaceholder={ this.translate( 'Give your list a name' ) }
-				onAddSubmit={ this.createList }>
+				onAddSubmit={ this.createList }
+				onClick={ this.props.onClick }>
 					<ReaderSidebarListsList { ...this.props } />
 			</ExpandableSidebarMenu>
 		);

client/reader/sidebar/tags/index.jsx

@@ -18,7 +18,9 @@ const ReaderSidebarTags = React.createClass( {
 
 	propTypes: {
 		tags: React.PropTypes.array,
-		path: React.PropTypes.string.isRequired
+		path: React.PropTypes.string.isRequired,
+		isOpen: React.PropTypes.bool,
+		onClick: React.PropTypes.func
 	},
 
 	followTag: function( tag ) {
@@ -52,11 +54,12 @@ const ReaderSidebarTags = React.createClass( {
 		const tagCount = this.props.tags ? this.props.tags.length : 0;
 		return (
 			<ExpandableSidebarMenu
-				expanded={ false }
+				expanded={ this.props.isOpen }
 				title={ this.translate( 'Tags' ) }
 				count={ tagCount }
 				addPlaceholder={ this.translate( 'Add any tag' ) }
-				onAddSubmit={ this.followTag }>
+				onAddSubmit={ this.followTag }
+				onClick={ this.props.onClick }>
 					<ReaderSidebarTagsList { ...this.props } onUnfollow={ this.unfollowTag } />
 			</ExpandableSidebarMenu>
 		);

client/state/action-types.js

@@ -19,6 +19,8 @@ export const POSTS_REQUEST_SUCCESS = 'POSTS_REQUEST_SUCCESS';
 export const PUBLICIZE_CONNECTIONS_RECEIVE = 'PUBLICIZE_CONNECTIONS_RECEIVE';
 export const PUBLICIZE_CONNECTIONS_REQUEST = 'PUBLICIZE_CONNECTIONS_REQUEST';
 export const PUBLICIZE_CONNECTIONS_REQUEST_FAILURE = 'PUBLICIZE_CONNECTIONS_REQUEST_FAILURE';
+export const READER_SIDEBAR_LISTS_TOGGLE = 'READER_SIDEBAR_LISTS_TOGGLE';
+export const READER_SIDEBAR_TAGS_TOGGLE = 'READER_SIDEBAR_TAGS_TOGGLE';
 export const REMOVE_NOTICE = 'REMOVE_NOTICE';
 export const REMOVE_SITE_PLANS = 'REMOVE_SITE_PLANS';
 export const REPLY_START_EXPORT = 'REPLY_START_EXPORT';

client/state/ui/reader/reducer.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { combineReducers } from 'redux';
+
+/**
+ * Internal dependencies
+ */
+import sidebar from './sidebar/reducer';
+
+export default combineReducers( {
+	sidebar
+} );

client/state/ui/reader/sidebar/actions.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { READER_SIDEBAR_LISTS_TOGGLE, READER_SIDEBAR_TAGS_TOGGLE } from 'state/action-types';
+
+export function toggleReaderSidebarLists() {
+	return {
+		type: READER_SIDEBAR_LISTS_TOGGLE
+	};
+}
+
+export function toggleReaderSidebarTags() {
+	return {
+		type: READER_SIDEBAR_TAGS_TOGGLE
+	};
+}

client/state/ui/reader/sidebar/reducer.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { combineReducers } from 'redux';
+
+/**
+ * Internal dependencies
+ */
+import { READER_SIDEBAR_LISTS_TOGGLE, READER_SIDEBAR_TAGS_TOGGLE } from 'state/action-types';
+
+function isListsOpen( state = false, action ) {
+	switch ( action.type ) {
+		case READER_SIDEBAR_LISTS_TOGGLE:
+			state = ! state;
+			break;
+	}
+
+	return state;
+}
+
+function isTagsOpen( state = false, action ) {
+	switch ( action.type ) {
+		case READER_SIDEBAR_TAGS_TOGGLE:
+			state = ! state;
+			break;
+	}
+
+	return state;
+}
+
+export default combineReducers( {
+	isListsOpen,
+	isTagsOpen
+} );

client/state/ui/reducer.js

@@ -12,6 +12,7 @@ import {
 	CURRENT_USER_ID_SET
 } from 'state/action-types';
 import editor from './editor/reducer';
+import reader from './reader/reducer';
 
 /**
  * Tracks the currently selected site ID.
@@ -74,5 +75,6 @@ export default combineReducers( {
 	hasSidebar,
 	selectedSiteId,
 	currentUserId,
-	editor
+	editor,
+	reader
 } );