diff --git a/react/actions/show.js b/react/actions/show.js index ed30d7c2..bc1237c5 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -19,3 +19,29 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension, }; }; + +export function updateChannelData (name, longId, shortId) { + return { + type: actions.CHANNEL_DATA_UPDATE, + name, + longId, + shortId, + }; +}; + +export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { + return { + type: actions.CHANNEL_CLAIMS_DATA_UPDATE, + claims, + currentPage, + totalPages, + totalClaims, + }; +}; + +export function updateAssetClaimData (data) { + return { + type: actions.ASSET_CLAIM_DATA_UPDATE, + data, + }; +}; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 4f656c56..973f47c3 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -128,6 +128,7 @@ AssetDisplay.propTypes = { contentType: PropTypes.string.isRequired, fileExt : PropTypes.string.isRequired, thumbnail : PropTypes.string, + // shortId : PropTypes.string.isRequired, }; export default AssetDisplay; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 7e11a190..b8ded3d3 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,2 +1,5 @@ export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; +export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; +export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; +export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js new file mode 100644 index 00000000..64761d44 --- /dev/null +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -0,0 +1,25 @@ +import { connect } from 'react-redux'; +import { updateChannelClaimsData } from 'actions/show'; +import View from './view'; + +const mapStateToProps = ({ show }) => { + return { + claims : show.showChannel.channelClaimsData.claims, + currentPage: show.showChannel.channelClaimsData.currentPage, + totalPages : show.showChannel.channelClaimsData.totalPages, + totalClaims: show.showChannel.channelClaimsData.totalClaims, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => { + dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); + }, + onChannelClaimsDataClear: () => { + dispatch(updateChannelClaimsData(null, null, null, null)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/view.jsx similarity index 74% rename from react/components/ChannelClaimsDisplay/index.js rename to react/containers/ChannelClaimsDisplay/view.jsx index 3a698835..bd6d4439 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -1,16 +1,12 @@ -import React from 'react'; -import AssetPreview from 'components/AssetPreview'; +import React from 'react/index'; +import AssetPreview from 'components/AssetPreview/index'; import request from 'utils/request'; class ChannelClaimsDisplay extends React.Component { constructor (props) { super(props); this.state = { - error : null, - claims : null, - currentPage: null, - totalPages : null, - totalClaims: null, + error: null, }; this.updateClaimsData = this.updateClaimsData.bind(this); this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this); @@ -35,23 +31,22 @@ class ChannelClaimsDisplay extends React.Component { if (!success) { return that.setState({error: message}); } - this.setState({ - claims : data.claims, - currentPage: data.currentPage, - totalPages : data.totalPages, - totalClaims: data.totalResults, - }); + that.setState({error: null}); // move this error to redux state + that.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults); }) .catch((error) => { that.setState({error: error.message}); }); } + componentWillUnmount () { + this.props.onChannelClaimsDataClear(); + } showPreviousResultsPage () { - const previousPage = parseInt(this.state.currentPage) - 1; + const previousPage = parseInt(this.props.currentPage) - 1; this.updateClaimsData(this.props.name, this.props.longId, previousPage); } showNextResultsPage () { - const nextPage = parseInt(this.state.currentPage) + 1; + const nextPage = parseInt(this.props.currentPage) + 1; this.updateClaimsData(this.props.name, this.props.longId, nextPage); } render () { @@ -65,9 +60,9 @@ class ChannelClaimsDisplay extends React.Component { ) : (
full channel id: {this.state.longId ? this.state.longId : 'loading...'}
-short channel id: {this.state.shortId ? this.state.shortId : 'loading...'}
+full channel id: {this.props.longId ? this.props.longId : 'loading...'}
+short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}
loading...
; } diff --git a/react/reducers/show.js b/react/reducers/show.js index c29dfb15..3d024584 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -18,6 +18,22 @@ const initialState = { }, extension: null, }, + showChannel: { + channelData: { + name : null, + shortId: null, + longId : null, + }, + channelClaimsData: { + claims : null, + currentPage: null, + totalPages : null, + totalClaims: null, + }, + }, + showAsset: { + claimData: null, + }, }; /* @@ -49,6 +65,33 @@ export default function (state = initialState, action) { extension: action.extension, }, }); + case actions.CHANNEL_DATA_UPDATE: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + channelData: Object.assign({}, state.channel, { + name : action.name, + shortId: action.shortId, + longId : action.longId, + }), + }), + }); + case actions.CHANNEL_CLAIMS_DATA_UPDATE: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + channelClaimsData: { + claims : action.claims, + currentPage: action.currentPage, + totalPages : action.totalPages, + totalClaims: action.totalClaims, + }, + }), + }); + case actions.ASSET_CLAIM_DATA_UPDATE: + return Object.assign({}, state, { + showAsset: { + claimData: action.data, + }, + }); default: return state; }