Panes/redux

index.js

/*
...
a bunch of other code
...
*/

const defaultState = {
  height: 600,
  isMapPaneHidden: false,
  
  // added appropriate key to default state
  isPreviewPaneHidden: false,
  
  navHeight: 50,
  panes: [],
  panesByName: {},
  panesMap: {},
  pressedDivider: null,
  width: 800
};

/*
...
a bunch of other code
...
*/

// added function to handle this since the linter did not allow me to nest ternaries 
function isPaneHidden(state, name) {
  switch (name) {
    case 'Map':
      return state.isMapPaneHidden;
    case 'Preview':
      return state.isPreviewPaneHidden;
    default:
      return false;
  }
}

/*
...
more code
...
*/

  const reducer = composeReducers(
    ns,
    handleActions(
      () => ({
        /*
        ...
        other logic
        ...
        */
        [challengeTypes.toggleMap]: state => ({
          ...state,
          isMapPaneHidden: !state.isMapPaneHidden
        }),
        // added logic to reducer
        [challengeTypes.togglePreview]: state => ({
          ...state,
          isPreviewPaneHidden: !state.isPreviewPaneHidden
        })
      }),
      defaultState,
    ),
    function metaReducer(state = defaultState, action) {
      if (action.meta && action.meta.panesMap) {
        const panesMap = action.meta.panesMap;
        const panes = _.map(panesMap, (name, type) => ({ name, type }));
        const numOfPanes = Object.keys(panes).length;
        return {
          ...state,
          panesMap,
          panes,
          panesByName: panes.reduce((panes, { name }, index) => {
            const dividerLeft = getDividerLeft(numOfPanes, index);
            panes[name] = {
              name,
              dividerLeft,
              // and to meta reducer
              isHidden: isPaneHidden(state, name)
            };
            return panes;
          }, {})
        };
      }
      /*
      ...
      other logic
      ...
      */
      return state;
    }
  );

  return {
    reducer,
    middleware
  };
}