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

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

@ -1,10 +1,5 @@
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) {
@ -163,3 +158,11 @@ export function updateDisplayAssetError (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_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
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 { 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);

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

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

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

@ -14,6 +14,7 @@ const initialState = {
error: null,
status: LOCAL_CHECK,
},
detailsExpanded: true,
};
export default function(state = initialState, action) {
@ -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
@ -136,6 +141,11 @@ export default function (state = initialState, action) {
status: ERROR,
}),
});
case actions.TOGGLE_DETAILS_EXPANDED:
return {
...state,
detailsExpanded: action.data,
};
default:
return state;
}

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

@ -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;
};

6
server/render/renderFullPage.js
View file

@ -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>