Chrome: Persist the "opened/closed" state of the sidebar panels in localStorage #2533
Conversation
youknowriad
added
the
General Interface
Codecov Report
@@ Coverage Diff @@
## master #2533 +/- ##
==========================================
+ Coverage 31.07% 31.09% +0.01%
==========================================
Files 174 174
Lines 5258 5278 +20
Branches 898 905 +7
==========================================
+ Hits 1634 1641 +7
- Misses 3078 3088 +10
- Partials 546 549 +3
Continue to review full report at Codecov.
|
youknowriad
changed the title
youknowriad
force-pushed
the
update/persist-sidebar-panels-state
branch
from
59b22aa
to
92d357e
Compare
| @@ -441,13 +441,21 @@ export function mode( state = 'visual', action ) { | |||
| return state; | |||
| } | |||
|
|
|||
| export function preferences( state = { isSidebarOpened: ! isMobile }, action ) { | |||
| export function preferences( state = { isSidebarOpened: ! isMobile, panels: { 'post-status': true } }, action ) { | |||
There was a problem hiding this comment.
This line is pretty long and we might consider breaking out the default to its own constant variable.
There was a problem hiding this comment.
Will fix the notes in #2568
| ...state, | ||
| panels: { | ||
| ...state.panels, | ||
| [ action.panel ]: ! get( state, [ 'panels', action.panel ], false ), |
There was a problem hiding this comment.
Is there any need for get here? state.panels seems it should always be an object.
There was a problem hiding this comment.
It's needed for users who already have the preferences persisted.
| */ | ||
| export function isEditorSidebarPanelOpened( state, panel ) { | ||
| const panels = getPreference( state, 'panels' ); | ||
| return panels ? !! panels[ panel ] : false; |
There was a problem hiding this comment.
Similarly, not sure we need to test presence of panels.
| @@ -67,17 +74,17 @@ const applyConnect = connect( | |||
| ( state ) => { | |||
| return { | |||
| featuredImageId: getEditedPostAttribute( state, 'featured_media' ), | |||
| isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ), | |||
There was a problem hiding this comment.
Wondering if we should bind props using PANEL_NAME not only in mapStateToProps, but also in mapDispatchToProps, so toggle callback in the visual component doesn't need to know/pass the value.
| const icon = `arrow-${ opened ? 'down' : 'right' }`; | ||
| const className = classnames( 'components-panel__body', { 'is-opened': opened } ); | ||
| const { title, children, opened } = this.props; | ||
| const isOpened = opened === undefined ? this.state.opened : opened; |
There was a problem hiding this comment.
Are there any places this component is used with the state variant now? Wonder if we should just treat it as a controlled component, rather than try to juggle both state and prop values of opened.
There was a problem hiding this comment.
Not right now, no strong preference.
This PR uses the preferences persisted reducer to persist the state of the sidebar panels.
I needed to add the possibility to make the PanelBody opened flag "controlled".
solves #450 partially