From 4632ee647221055395dd55bdb1e722b15b461259 Mon Sep 17 00:00:00 2001 From: jessop Date: Sat, 16 Mar 2019 15:20:21 -0400 Subject: [PATCH] persist expand state using redux --- client/src/actions/show.js | 55 ++++++++++++---------- client/src/constants/show_action_types.js | 1 + client/src/pages/ShowAssetDetails/index.js | 22 +++++++-- client/src/pages/ShowAssetDetails/view.jsx | 25 ++++------ client/src/reducers/show.js | 54 ++++++++++++--------- client/src/selectors/show.js | 8 +++- server/render/renderFullPage.js | 8 +++- 7 files changed, 100 insertions(+), 73 deletions(-) diff --git a/client/src/actions/show.js b/client/src/actions/show.js index 39946403..6ede64d1 100644 --- 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, + }; +} diff --git a/client/src/constants/show_action_types.js b/client/src/constants/show_action_types.js index 41c2db23..a6360da1 100644 --- 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'; diff --git a/client/src/pages/ShowAssetDetails/index.js b/client/src/pages/ShowAssetDetails/index.js index cabb5046..ebe37b0a 100644 --- 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); diff --git a/client/src/pages/ShowAssetDetails/view.jsx b/client/src/pages/ShowAssetDetails/view.jsx index d2a532e4..25e01ee7 100644 --- 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} > -
+
-
- {!this.state.closed && } + {detailsExpanded && } ); diff --git a/client/src/reducers/show.js b/client/src/reducers/show.js index a93da58b..e47c9842 100644 --- 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; } diff --git a/client/src/selectors/show.js b/client/src/selectors/show.js index d7358e8e..61a32d05 100644 --- 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; +}; diff --git a/server/render/renderFullPage.js b/server/render/renderFullPage.js index a35a0c1e..7454d043 100644 --- 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) => { + ${helmet.title.toString()} ${helmet.meta.toString()} @@ -27,7 +28,10 @@ module.exports = (helmet, html, preloadedState) => {
${html}