persist expand state using redux

2019-03-16 15:20:21 -04:00 · 2019-03-16 15:20:21 -04:00 · 4632ee6472
commit 4632ee6472
parent 373ee83c13
7 changed files with 100 additions and 73 deletions
--- a/client/src/actions/show.js
+++ b/client/src/actions/show.js
@ -1,13 +1,8 @@
 import * as actions from '../constants/show_action_types';
-import {
-  ASSET_DETAILS,
-  ASSET_LITE,
-  CHANNEL,
-  SPECIAL_ASSET,
-} from '../constants/show_request_types';
+import { ASSET_DETAILS, ASSET_LITE, CHANNEL, SPECIAL_ASSET } from '../constants/show_request_types';

 // basic request parsing
-export function onHandleShowPageUri (params, url) {
+export function onHandleShowPageUri(params, url) {
  return {
    type: actions.HANDLE_SHOW_URI,
    data: {
@ -17,7 +12,7 @@ export function onHandleShowPageUri (params, url) {
  };
 }

-export function onHandleShowHomepage (params, url) {
+export function onHandleShowHomepage(params, url) {
  return {
    type: actions.HANDLE_SHOW_HOMEPAGE,
    data: {
@ -27,14 +22,14 @@ export function onHandleShowHomepage (params, url) {
  };
 }

-export function onRequestError (error) {
+export function onRequestError(error) {
  return {
    type: actions.REQUEST_ERROR,
    data: error,
  };
 }

-export function onNewChannelRequest (channelName, channelId) {
+export function onNewChannelRequest(channelName, channelId) {
  const requestType = CHANNEL;
  const requestId = `cr#${channelName}#${channelId}`;
  return {
@ -43,7 +38,7 @@ export function onNewChannelRequest (channelName, channelId) {
  };
 }

-export function onNewSpecialAssetRequest (name) {
+export function onNewSpecialAssetRequest(name) {
  const requestType = SPECIAL_ASSET;
  const requestId = `sar#${name}`;
  return {
@ -52,7 +47,7 @@ export function onNewSpecialAssetRequest (name) {
  };
 }

-export function onNewAssetRequest (name, id, channelName, channelId, extension) {
+export function onNewAssetRequest(name, id, channelName, channelId, extension) {
  const requestType = extension ? ASSET_LITE : ASSET_DETAILS;
  const requestId = `ar#${name}#${id}#${channelName}#${channelId}`;
  return {
@ -65,14 +60,14 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension)
        id,
        channel: {
          name: channelName,
-          id  : channelId,
+          id: channelId,
        },
      },
    },
  };
 }

-export function onRequestUpdate (requestType, requestId) {
+export function onRequestUpdate(requestType, requestId) {
  return {
    type: actions.REQUEST_UPDATE,
    data: {
@ -82,7 +77,7 @@ export function onRequestUpdate (requestType, requestId) {
  };
 }

-export function addRequestToRequestList (id, error, key) {
+export function addRequestToRequestList(id, error, key) {
  return {
    type: actions.REQUEST_LIST_ADD,
    data: { id, error, key },
@ -91,21 +86,21 @@ export function addRequestToRequestList (id, error, key) {

 // asset actions

-export function addAssetToAssetList (id, error, name, claimId, shortId, claimData, claimViews) {
+export function addAssetToAssetList(id, error, name, claimId, shortId, claimData, claimViews) {
  return {
    type: actions.ASSET_ADD,
    data: { id, error, name, claimId, shortId, claimData, claimViews },
  };
 }

-export function updateAssetViewsInList (id, claimId, claimViews) {
+export function updateAssetViewsInList(id, claimId, claimViews) {
  return {
    type: actions.ASSET_VIEWS_UPDATE,
    data: { id, claimId, claimViews },
  };
 }

-export function removeAsset (data) {
+export function removeAsset(data) {
  return {
    type: actions.ASSET_REMOVE,
    data,
@ -114,7 +109,7 @@ export function removeAsset (data) {

 // channel actions

-export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) {
+export function addNewChannelToChannelList(id, name, shortId, longId, claimsData) {
  return {
    type: actions.CHANNEL_ADD,
    data: {
@ -127,39 +122,47 @@ export function addNewChannelToChannelList (id, name, shortId, longId, claimsDat
  };
 }

-export function onUpdateChannelClaims (channelKey, name, longId, page) {
+export function onUpdateChannelClaims(channelKey, name, longId, page) {
  return {
    type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC,
-    data: {channelKey, name, longId, page},
+    data: { channelKey, name, longId, page },
  };
 }

-export function updateChannelClaims (channelListId, claimsData) {
+export function updateChannelClaims(channelListId, claimsData) {
  return {
    type: actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED,
-    data: {channelListId, claimsData},
+    data: { channelListId, claimsData },
  };
 }

 // display a file

-export function fileRequested (name, claimId) {
+export function fileRequested(name, claimId) {
  return {
    type: actions.FILE_REQUESTED,
    data: { name, claimId },
  };
 }

-export function updateFileAvailability (status) {
+export function updateFileAvailability(status) {
  return {
    type: actions.FILE_AVAILABILITY_UPDATE,
    data: status,
  };
 }

-export function updateDisplayAssetError (error) {
+export function updateDisplayAssetError(error) {
  return {
    type: actions.DISPLAY_ASSET_ERROR,
    data: error,
  };
 }
+
+// viewer settings
+export function toggleDetailsExpanded(isExpanded) {
+  return {
+    type: actions.TOGGLE_DETAILS_EXPANDED,
+    data: isExpanded,
+  };
+}
--- a/client/src/constants/show_action_types.js
+++ b/client/src/constants/show_action_types.js
@ -24,3 +24,4 @@ export const CHANNEL_CLAIMS_UPDATE_SUCCEEDED = 'CHANNEL_CLAIMS_UPDATE_SUCCEEDED'
 export const FILE_REQUESTED = 'FILE_REQUESTED';
 export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
 export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';
+export const TOGGLE_DETAILS_EXPANDED = 'TOGGLE_DETAILS_EXPANDED';
--- a/client/src/pages/ShowAssetDetails/index.js
+++ b/client/src/pages/ShowAssetDetails/index.js
@ -1,11 +1,25 @@
 import { connect } from 'react-redux';
-import { selectAsset } from '../../selectors/show';
+import { selectAsset, selectDetailsExpanded } from '../../selectors/show';
+import { toggleDetailsExpanded } from '../../actions/show';
+
 import View from './view';

-const mapStateToProps = ({ show }) => {
+const mapStateToProps = state => {
  return {
-    asset: selectAsset(show),
+    asset: selectAsset(state.show),
+    detailsExpanded: selectDetailsExpanded(state),
  };
 };

-export default connect(mapStateToProps, null)(View);
+const mapDispatchToProps = dispatch => {
+  return {
+    onToggleDetailsExpanded: value => {
+      dispatch(toggleDetailsExpanded(value));
+    },
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(View);
--- a/client/src/pages/ShowAssetDetails/view.jsx
+++ b/client/src/pages/ShowAssetDetails/view.jsx
@ -11,24 +11,15 @@ class ShowAssetDetails extends React.Component {

  constructor (props) {
    super(props);
-    this.collapse = this.collapse.bind(this);
-    // this.storageKey = 'vert-split-state-' + this.props.name;
-    // const closed = window && window.localStorage
-    //   ? !!window.localStorage.getItem(this.storageKey) : false;
-    const closed = true;
-    this.state = { closed: closed };
+    this.toggleExpandDetails = this.toggleExpandDetails.bind(this);
  }

-  collapse () {
-    this.setState({ closed: !this.state.closed });
-    // if (window && window.localStorage) {
-    //   window.localStorage.setItem(this.storageKey, !this.state.closed);
-    // }
-    // document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
+  toggleExpandDetails () {
+    this.props.onToggleDetailsExpanded(!this.props.detailsExpanded);
  }

  render () {
-    const { asset } = this.props;
+    const { asset, detailsExpanded } = this.props;
    if (asset) {
      const { claimData: { name, blocked } } = asset;
      if (!blocked) {
@ -37,16 +28,16 @@ class ShowAssetDetails extends React.Component {
            pageTitle={`${name} - details`}
            asset={asset}
          >
-            <div className="asset-main">
+            <div className='asset-main'>
              <AssetTitle />
              <AssetDisplay />
              <div>
-                <button className='collapse-button' onClick={this.collapse}>
-                  {this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
+                <button className='collapse-button' onClick={this.toggleExpandDetails}>
+                  {detailsExpanded ? <Icon.MinusCircle /> : <Icon.PlusCircle className='plus-icon' /> }
                </button>
              </div>
            </div>
-            {!this.state.closed && <AssetInfo />}
+            {detailsExpanded && <AssetInfo />}

          </PageLayout>
        );
--- a/client/src/reducers/show.js
+++ b/client/src/reducers/show.js
@ -4,19 +4,20 @@ import { LOCAL_CHECK, ERROR } from '../constants/asset_display_states';
 const initialState = {
  request: {
    error: null,
-    type : null,
-    id   : null,
+    type: null,
+    id: null,
  },
-  requestList : {},
-  channelList : {},
-  assetList   : {},
+  requestList: {},
+  channelList: {},
+  assetList: {},
  displayAsset: {
-    error : null,
+    error: null,
    status: LOCAL_CHECK,
  },
+  detailsExpanded: true,
 };

-export default function (state = initialState, action) {
+export default function(state = initialState, action) {
  switch (action.type) {
    // handle request
    case actions.REQUEST_ERROR:
@ -29,7 +30,7 @@ export default function (state = initialState, action) {
      return Object.assign({}, state, {
        request: Object.assign({}, state.request, {
          type: action.data.requestType,
-          id  : action.data.requestId,
+          id: action.data.requestId,
        }),
      });
    // store requests
@ -38,7 +39,7 @@ export default function (state = initialState, action) {
        requestList: Object.assign({}, state.requestList, {
          [action.data.id]: {
            error: action.data.error,
-            key  : action.data.key,
+            key: action.data.key,
          },
        }),
      });
@ -47,11 +48,11 @@ export default function (state = initialState, action) {
      return Object.assign({}, state, {
        assetList: Object.assign({}, state.assetList, {
          [action.data.id]: {
-            error     : action.data.error,
-            name      : action.data.name,
-            claimId   : action.data.claimId,
-            shortId   : action.data.shortId,
-            claimData : action.data.claimData,
+            error: action.data.error,
+            name: action.data.name,
+            claimId: action.data.claimId,
+            shortId: action.data.shortId,
+            claimData: action.data.claimData,
            claimViews: action.data.claimViews,
          },
        }),
@ -76,7 +77,7 @@ export default function (state = initialState, action) {

      return {
        ...state,
-        assetList  : newAssetList,
+        assetList: newAssetList,
        channelList: {
          ...state.channelList,
          [channelId]: {
@ -107,9 +108,9 @@ export default function (state = initialState, action) {
      return Object.assign({}, state, {
        channelList: Object.assign({}, state.channelList, {
          [action.data.id]: {
-            name      : action.data.name,
-            longId    : action.data.longId,
-            shortId   : action.data.shortId,
+            name: action.data.name,
+            longId: action.data.longId,
+            shortId: action.data.shortId,
            claimsData: action.data.claimsData,
          },
        }),
@ -117,9 +118,13 @@ export default function (state = initialState, action) {
    case actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED:
      return Object.assign({}, state, {
        channelList: Object.assign({}, state.channelList, {
-          [action.data.channelListId]: Object.assign({}, state.channelList[action.data.channelListId], {
-            claimsData: action.data.claimsData,
-          }),
+          [action.data.channelListId]: Object.assign(
+            {},
+            state.channelList[action.data.channelListId],
+            {
+              claimsData: action.data.claimsData,
+            }
+          ),
        }),
      });
    // display an asset
@ -132,10 +137,15 @@ export default function (state = initialState, action) {
    case actions.DISPLAY_ASSET_ERROR:
      return Object.assign({}, state, {
        displayAsset: Object.assign({}, state.displayAsset, {
-          error : action.data,
+          error: action.data,
          status: ERROR,
        }),
      });
+    case actions.TOGGLE_DETAILS_EXPANDED:
+      return {
+        ...state,
+        detailsExpanded: action.data,
+      };
    default:
      return state;
  }
--- a/client/src/selectors/show.js
+++ b/client/src/selectors/show.js
@ -4,12 +4,16 @@ export const selectAsset = show => {
  const request = show.requestList[requestId] || null;
  const assetList = show.assetList;
  if (request && assetList) {
-    const assetKey = request.key;  // note: just store this in the request
+    const assetKey = request.key; // note: just store this in the request
    asset = assetList[assetKey] || null;
  }
  return asset;
 };

-export const selectShowState = (state) => {
+export const selectShowState = state => {
  return state.show;
 };
+
+export const selectDetailsExpanded = state => {
+  return state.show.detailsExpanded;
+};
--- a/server/render/renderFullPage.js
+++ b/server/render/renderFullPage.js
@ -3,7 +3,7 @@ const path = require('path');

 const bundlePath = path.resolve('./public/bundle/bundle.js');
 const bundleHash = md5File.sync(bundlePath);
-const shortBundleHash = bundleHash.substring(0,4);
+const shortBundleHash = bundleHash.substring(0, 4);

 module.exports = (helmet, html, preloadedState) => {
  // take the html and preloadedState and return the full page
@ -14,6 +14,7 @@ module.exports = (helmet, html, preloadedState) => {
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
+            <meta name="google-site-verification" content="U3240KfVplLZSRCcOHxGuDFQO6eVUXKeFsSD2WJvdLo" />
            <!--helmet-->
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
@ -27,7 +28,10 @@ module.exports = (helmet, html, preloadedState) => {
        <body>
            <div id="react-app">${html}</div>
            <script>
-                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\\u003c')}
+                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
+                  /</g,
+                  '\\\u003c'
+                )}
            </script>
            <script src="/bundle/bundle.js?${shortBundleHash}"></script>
        </body>