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 { ) : (
- {this.state.claims && + {this.props.claims &&
- {this.state.claims.map((claim, index) => )}
- {(this.state.currentPage > 1) && } - {(this.state.currentPage < this.state.totalPages) && } + {(this.props.currentPage > 1) && } + {(this.props.currentPage < this.props.totalPages) && }
} diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 66c43970..6b60a41a 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,12 +1,25 @@ import { connect } from 'react-redux'; import View from './view'; +import { updateAssetClaimData } from 'actions/show'; const mapStateToProps = ({ show }) => { return { modifier : show.assetRequest.modifier, claim : show.assetRequest.name, extension: show.assetRequest.extension, + claimData: show.showAsset.claimData, }; }; -export default connect(mapStateToProps, null)(View); +const mapDispatchToProps = dispatch => { + return { + onAssetClaimDataUpdate: (claimData) => { + dispatch(updateAssetClaimData(claimData)); + }, + onAssetClaimDataClear: () => { + dispatch(updateAssetClaimData(null)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 67fcc97f..9f87cf1a 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -7,8 +7,7 @@ class ShowAsset extends React.Component { constructor (props) { super(props); this.state = { - error : null, - claimData: null, + error: null, }; this.getLongClaimId = this.getLongClaimId.bind(this); this.getClaimData = this.getClaimData.bind(this); @@ -43,7 +42,8 @@ class ShowAsset extends React.Component { return that.getClaimData(name, claimLongId); }) .then(claimData => { - this.setState({claimData}); + this.setState({error: null}); // note: move this to redux level + this.props.onAssetClaimDataUpdate(claimData); }) .catch(error => { this.setState({error}); @@ -87,14 +87,15 @@ class ShowAsset extends React.Component { return ( ); } return ( ); } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 377d47e2..52ae3ab9 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,11 +1,26 @@ import { connect } from 'react-redux'; +import {updateChannelData} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { requestName: show.channelRequest.name, requestId : show.channelRequest.id, + name : show.showChannel.channelData.name, + shortId : show.showChannel.channelData.shortId, + longId : show.showChannel.channelData.longId, }; }; -export default connect(mapStateToProps, null)(View); +const mapDispatchToProps = dispatch => { + return { + onChannelDataUpdate: (name, longId, shortId) => { + dispatch(updateChannelData(name, longId, shortId)); + }, + onChannelDataClear: () => { + dispatch(updateChannelData(null, null, null)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index de9d6675..e6329597 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -1,16 +1,13 @@ import React from 'react'; import NavBar from 'containers/NavBar'; -import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay'; +import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; import request from 'utils/request'; class ShowChannel extends React.Component { constructor (props) { super(props); this.state = { - error : null, - name : null, - shortId: null, - longId : null, + error: null, }; this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this); } @@ -32,17 +29,16 @@ class ShowChannel extends React.Component { if (!success) { return that.setState({error: message}); } - this.setState({ - error : null, - name : data.channelName, - longId : data.longChannelClaimId, - shortId: data.shortChannelClaimId, - }); + that.setState({error: null}); // note: store this error at app level also + that.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); }) .catch((error) => { that.setState({error: error.message}); }); } + componentWillUnmount () { + this.props.onChannelDataClear(); + } render () { return (
@@ -56,17 +52,12 @@ class ShowChannel extends React.Component { ) : (
-

channel name: {this.state.name ? this.state.name : 'loading...'}

-

full channel id: {this.state.longId ? this.state.longId : 'loading...'}

-

short channel id: {this.state.shortId ? this.state.shortId : 'loading...'}

+

channel name: {this.props.name ? this.props.name : 'loading...'}

+

full channel id: {this.props.longId ? this.props.longId : 'loading...'}

+

short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}

- {(this.state.name && this.state.longId) && - - } + {(this.props.name && this.props.longId) && }
)} diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index c093ddd4..ce41aab3 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -86,9 +86,9 @@ class ShowPage extends React.Component { } switch (this.props.requestType) { case CHANNEL: - return ; + return ; case ASSET: - return ; + return ; default: return

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