feat(panes/nav): persist pane state across transitions; rename side panel to lesson

This commit is contained in:
Peter Weinberg
2018-01-09 23:43:38 -05:00
committed by Berkeley Martinez
parent 81f65969ad
commit 62e079c721
4 changed files with 22 additions and 23 deletions

View File

@ -10,7 +10,6 @@ import * as utils from './utils.js';
import windowEpic from './window-epic.js'; import windowEpic from './window-epic.js';
import dividerEpic from './divider-epic.js'; import dividerEpic from './divider-epic.js';
import ns from '../ns.json'; import ns from '../ns.json';
import { types as challengeTypes } from '../../routes/Challenges/redux';
export const epics = [ export const epics = [
windowEpic, windowEpic,
@ -58,11 +57,10 @@ const defaultState = {
height: 600, height: 600,
width: 800, width: 800,
navHeight: 50, navHeight: 50,
isMapPaneHidden: false,
panes: [], panes: [],
panesByName: {}, panesByName: {},
pressedDivider: null, panesMap: {},
panesMap: {} pressedDivider: null
}; };
export const getNS = state => state[ns]; export const getNS = state => state[ns];
export const heightSelector = state => { export const heightSelector = state => {
@ -159,10 +157,6 @@ export default function createPanesAspects({ createPanesMap }) {
[types.updateNavHeight]: (state, { payload: navHeight }) => ({ [types.updateNavHeight]: (state, { payload: navHeight }) => ({
...state, ...state,
navHeight navHeight
}),
[challengeTypes.toggleMap]: state => ({
...state,
isMapPaneHidden: !state.isMapPaneHidden
}) })
}), }),
defaultState defaultState
@ -172,19 +166,24 @@ export default function createPanesAspects({ createPanesMap }) {
const panesMap = action.meta.panesMap; const panesMap = action.meta.panesMap;
const panes = _.map(panesMap, (name, type) => ({ name, type })); const panes = _.map(panesMap, (name, type) => ({ name, type }));
const numOfPanes = Object.keys(panes).length; const numOfPanes = Object.keys(panes).length;
const panesByName = _.isEqual(state.panes, panes) && state.panesByName;
return { return {
...state, ...state,
panesMap, panesMap,
panes, panes,
panesByName: panes.reduce((panes, { name }, index) => { panesByName: panesByName
? panesByName
: panes.reduce((panes, { name }, index) => {
const dividerLeft = utils.getDividerLeft(numOfPanes, index); const dividerLeft = utils.getDividerLeft(numOfPanes, index);
panes[name] = { panes[name] = {
name, name,
dividerLeft, dividerLeft,
isHidden: name === 'Map' ? state.isMapPaneHidden : false isHidden: false
}; };
return panes; return panes;
}, {}) },
{}
)
}; };
} }
if (action.meta && action.meta.isPaneAction) { if (action.meta && action.meta.isPaneAction) {

View File

@ -50,7 +50,7 @@ export const mapStateToPanes = addNS(
return map; return map;
}, { }, {
[types.toggleMap]: 'Map', [types.toggleMap]: 'Map',
[types.toggleSidePanel]: 'Side Panel' [types.toggleSidePanel]: 'Lesson'
}); });
if (showPreview) { if (showPreview) {
@ -63,7 +63,7 @@ export const mapStateToPanes = addNS(
const nameToComponent = { const nameToComponent = {
Map: _Map, Map: _Map,
'Side Panel': SidePanel, Lesson: SidePanel,
Preview: Preview Preview: Preview
}; };

View File

@ -13,13 +13,13 @@ export const mapStateToPanes = addNS(
ns, ns,
() => ({ () => ({
[types.toggleMap]: 'Map', [types.toggleMap]: 'Map',
[types.toggleMain]: 'Main' [types.toggleMain]: 'Lesson'
}) })
); );
const nameToComponent = { const nameToComponent = {
Map: _Map, Map: _Map,
Main: Main Lesson: Main
}; };
const renderPane = name => { const renderPane = name => {

View File

@ -13,13 +13,13 @@ export const mapStateToPanes = addNS(
ns, ns,
() => ({ () => ({
[types.toggleMap]: 'Map', [types.toggleMap]: 'Map',
[types.toggleStep]: 'Step' [types.toggleStep]: 'Lesson'
}) })
); );
const nameToComponent = { const nameToComponent = {
Map: _Map, Map: _Map,
Step: Step Lesson: Step
}; };
const renderPane = name => { const renderPane = name => {