persist expand state using redux

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,
+  };
+}

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';

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);

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>
         );

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], {
+          [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;
   }

client/src/selectors/show.js

@@ -10,6 +10,10 @@ export const selectAsset = show => {
   return asset;
 };
 
-export const selectShowState = (state) => {
+export const selectShowState = state => {
   return state.show;
 };
+
+export const selectDetailsExpanded = state => {
+  return state.show.detailsExpanded;
+};

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>