LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

persist expand state using redux

Browse source
This commit is contained in:
jessop 2019-03-16 15:20:21 -04:00
parent 373ee83c13
commit 4632ee6472
7 changed files with 100 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
client/src/actions/show.js
View file

@ -1,13 +1,8 @@
import * as actions from '../constants/show_action_types'; import * as actions from '../constants/show_action_types';
import { import { ASSET_DETAILS, ASSET_LITE, CHANNEL, SPECIAL_ASSET } from '../constants/show_request_types';
ASSET_DETAILS,
ASSET_LITE,
CHANNEL,
SPECIAL_ASSET,
} from '../constants/show_request_types';
// basic request parsing // basic request parsing
export function onHandleShowPageUri (params, url) { export function onHandleShowPageUri(params, url) {
return { return {
type: actions.HANDLE_SHOW_URI, type: actions.HANDLE_SHOW_URI,
data: { data: {
@ -17,7 +12,7 @@ export function onHandleShowPageUri (params, url) {
}; };
} }
export function onHandleShowHomepage (params, url) { export function onHandleShowHomepage(params, url) {
return { return {
type: actions.HANDLE_SHOW_HOMEPAGE, type: actions.HANDLE_SHOW_HOMEPAGE,
data: { data: {
@ -27,14 +22,14 @@ export function onHandleShowHomepage (params, url) {
}; };
} }
export function onRequestError (error) { export function onRequestError(error) {
return { return {
type: actions.REQUEST_ERROR, type: actions.REQUEST_ERROR,
data: error, data: error,
}; };
} }
export function onNewChannelRequest (channelName, channelId) { export function onNewChannelRequest(channelName, channelId) {
const requestType = CHANNEL; const requestType = CHANNEL;
const requestId = `cr#${channelName}#${channelId}`; const requestId = `cr#${channelName}#${channelId}`;
return { return {
@ -43,7 +38,7 @@ export function onNewChannelRequest (channelName, channelId) {
}; };
} }
export function onNewSpecialAssetRequest (name) { export function onNewSpecialAssetRequest(name) {
const requestType = SPECIAL_ASSET; const requestType = SPECIAL_ASSET;
const requestId = `sar#${name}`; const requestId = `sar#${name}`;
return { 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 requestType = extension ? ASSET_LITE : ASSET_DETAILS;
const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; const requestId = `ar#${name}#${id}#${channelName}#${channelId}`;
return { return {
@ -65,14 +60,14 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension)
id, id,
channel: { channel: {
name: channelName, name: channelName,
id : channelId, id: channelId,
}, },
}, },
}, },
}; };
} }
export function onRequestUpdate (requestType, requestId) { export function onRequestUpdate(requestType, requestId) {
return { return {
type: actions.REQUEST_UPDATE, type: actions.REQUEST_UPDATE,
data: { data: {
@ -82,7 +77,7 @@ export function onRequestUpdate (requestType, requestId) {
}; };
} }
export function addRequestToRequestList (id, error, key) { export function addRequestToRequestList(id, error, key) {
return { return {
type: actions.REQUEST_LIST_ADD, type: actions.REQUEST_LIST_ADD,
data: { id, error, key }, data: { id, error, key },
@ -91,21 +86,21 @@ export function addRequestToRequestList (id, error, key) {
// asset actions // asset actions
export function addAssetToAssetList (id, error, name, claimId, shortId, claimData, claimViews) { export function addAssetToAssetList(id, error, name, claimId, shortId, claimData, claimViews) {
return { return {
type: actions.ASSET_ADD, type: actions.ASSET_ADD,
data: { id, error, name, claimId, shortId, claimData, claimViews }, data: { id, error, name, claimId, shortId, claimData, claimViews },
}; };
} }
export function updateAssetViewsInList (id, claimId, claimViews) { export function updateAssetViewsInList(id, claimId, claimViews) {
return { return {
type: actions.ASSET_VIEWS_UPDATE, type: actions.ASSET_VIEWS_UPDATE,
data: { id, claimId, claimViews }, data: { id, claimId, claimViews },
}; };
} }
export function removeAsset (data) { export function removeAsset(data) {
return { return {
type: actions.ASSET_REMOVE, type: actions.ASSET_REMOVE,
data, data,
@ -114,7 +109,7 @@ export function removeAsset (data) {
// channel actions // channel actions
export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { export function addNewChannelToChannelList(id, name, shortId, longId, claimsData) {
return { return {
type: actions.CHANNEL_ADD, type: actions.CHANNEL_ADD,
data: { 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 { return {
type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC, 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 { return {
type: actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED, type: actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED,
data: {channelListId, claimsData}, data: { channelListId, claimsData },
}; };
} }
// display a file // display a file
export function fileRequested (name, claimId) { export function fileRequested(name, claimId) {
return { return {
type: actions.FILE_REQUESTED, type: actions.FILE_REQUESTED,
data: { name, claimId }, data: { name, claimId },
}; };
} }
export function updateFileAvailability (status) { export function updateFileAvailability(status) {
return { return {
type: actions.FILE_AVAILABILITY_UPDATE, type: actions.FILE_AVAILABILITY_UPDATE,
data: status, data: status,
}; };
} }
export function updateDisplayAssetError (error) { export function updateDisplayAssetError(error) {
return { return {
type: actions.DISPLAY_ASSET_ERROR, type: actions.DISPLAY_ASSET_ERROR,
data: error, data: error,
}; };
} }
// viewer settings
export function toggleDetailsExpanded(isExpanded) {
return {
type: actions.TOGGLE_DETAILS_EXPANDED,
data: isExpanded,
};
}

1
client/src/constants/show_action_types.js
View file

@ -24,3 +24,4 @@ export const CHANNEL_CLAIMS_UPDATE_SUCCEEDED = 'CHANNEL_CLAIMS_UPDATE_SUCCEEDED'
export const FILE_REQUESTED = 'FILE_REQUESTED'; export const FILE_REQUESTED = 'FILE_REQUESTED';
export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';
export const TOGGLE_DETAILS_EXPANDED = 'TOGGLE_DETAILS_EXPANDED';

22
client/src/pages/ShowAssetDetails/index.js
View file

@ -1,11 +1,25 @@
import { connect } from 'react-redux'; 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'; import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = state => {
return { 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);

25
client/src/pages/ShowAssetDetails/view.jsx
View file

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

52
client/src/reducers/show.js
View file

@ -4,19 +4,20 @@ import { LOCAL_CHECK, ERROR } from '../constants/asset_display_states';
const initialState = { const initialState = {
request: { request: {
error: null, error: null,
type : null, type: null,
id : null, id: null,
}, },
requestList : {}, requestList: {},
channelList : {}, channelList: {},
assetList : {}, assetList: {},
displayAsset: { displayAsset: {
error : null, error: null,
status: LOCAL_CHECK, status: LOCAL_CHECK,
}, },
detailsExpanded: true,
}; };
export default function (state = initialState, action) { export default function(state = initialState, action) {
switch (action.type) { switch (action.type) {
// handle request // handle request
case actions.REQUEST_ERROR: case actions.REQUEST_ERROR:
@ -29,7 +30,7 @@ export default function (state = initialState, action) {
return Object.assign({}, state, { return Object.assign({}, state, {
request: Object.assign({}, state.request, { request: Object.assign({}, state.request, {
type: action.data.requestType, type: action.data.requestType,
id : action.data.requestId, id: action.data.requestId,
}), }),
}); });
// store requests // store requests
@ -38,7 +39,7 @@ export default function (state = initialState, action) {
requestList: Object.assign({}, state.requestList, { requestList: Object.assign({}, state.requestList, {
[action.data.id]: { [action.data.id]: {
error: action.data.error, 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, { return Object.assign({}, state, {
assetList: Object.assign({}, state.assetList, { assetList: Object.assign({}, state.assetList, {
[action.data.id]: { [action.data.id]: {
error : action.data.error, error: action.data.error,
name : action.data.name, name: action.data.name,
claimId : action.data.claimId, claimId: action.data.claimId,
shortId : action.data.shortId, shortId: action.data.shortId,
claimData : action.data.claimData, claimData: action.data.claimData,
claimViews: action.data.claimViews, claimViews: action.data.claimViews,
}, },
}), }),
@ -76,7 +77,7 @@ export default function (state = initialState, action) {
return { return {
...state, ...state,
assetList : newAssetList, assetList: newAssetList,
channelList: { channelList: {
...state.channelList, ...state.channelList,
[channelId]: { [channelId]: {
@ -107,9 +108,9 @@ export default function (state = initialState, action) {
return Object.assign({}, state, { return Object.assign({}, state, {
channelList: Object.assign({}, state.channelList, { channelList: Object.assign({}, state.channelList, {
[action.data.id]: { [action.data.id]: {
name : action.data.name, name: action.data.name,
longId : action.data.longId, longId: action.data.longId,
shortId : action.data.shortId, shortId: action.data.shortId,
claimsData: action.data.claimsData, claimsData: action.data.claimsData,
}, },
}), }),
@ -117,9 +118,13 @@ export default function (state = initialState, action) {
case actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED: case actions.CHANNEL_CLAIMS_UPDATE_SUCCEEDED:
return Object.assign({}, state, { return Object.assign({}, state, {
channelList: Object.assign({}, state.channelList, { 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, claimsData: action.data.claimsData,
}), }
),
}), }),
}); });
// display an asset // display an asset
@ -132,10 +137,15 @@ export default function (state = initialState, action) {
case actions.DISPLAY_ASSET_ERROR: case actions.DISPLAY_ASSET_ERROR:
return Object.assign({}, state, { return Object.assign({}, state, {
displayAsset: Object.assign({}, state.displayAsset, { displayAsset: Object.assign({}, state.displayAsset, {
error : action.data, error: action.data,
status: ERROR, status: ERROR,
}), }),
}); });
case actions.TOGGLE_DETAILS_EXPANDED:
return {
...state,
detailsExpanded: action.data,
};
default: default:
return state; return state;
} }

6
client/src/selectors/show.js
View file

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

8
server/render/renderFullPage.js
View file

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