diff --git a/react/actions/show.js b/react/actions/show.js index c756bc24..4012e50a 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -16,10 +16,22 @@ export function updateChannelRequest (channel) { }; }; -export function updateChannelData (channelData) { +export function updateChannelData (name, longId, shortId) { return { type: actions.CHANNEL_DATA_UPDATE, - channelData, + name, + longId, + shortId, + }; +}; + +export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { + return { + type: actions.CHANNEL_CLAIMS_UPDATE, + claims, + currentPage, + totalPages, + totalClaims, }; }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 3457d74c..7f2269d4 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,4 +1,5 @@ export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE'; export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; +export const CHANNEL_CLAIMS_UPDATE = 'CHANNEL_CLAIMS_UPDATE'; export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js new file mode 100644 index 00000000..1e2f6c41 --- /dev/null +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux'; +import View from './view'; +import {updateChannelClaimsData} from 'actions/show'; + +const mapStateToProps = ({ show }) => { + return { + name : show.channel.name, + id : show.channel.id, + claims : show.channel.claimsData.claims, + currentPage: show.channel.claimsData.currentPage, + totalPages : show.channel.claimsData.totalPages, + totalClaims: show.channel.claimsData.totalClaims, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onClaimsDataChange: (claims, currentPage, totalPages, totalClaims) => { + dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/view.jsx similarity index 51% rename from react/components/ChannelClaimsDisplay/index.js rename to react/containers/ChannelClaimsDisplay/view.jsx index 2418a645..fdd537cf 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import AssetPreview from 'components/AssetPreview'; +import AssetPreview from 'components/AssetPreview/index'; import request from 'utils/request'; class ChannelClaimsDisplay extends React.Component { @@ -12,13 +12,11 @@ class ChannelClaimsDisplay extends React.Component { this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this); } componentDidMount () { - const channelName = this.props.channelName; - const channelClaimId = this.props.channelClaimId || 'none'; - const page = this.state.page; - this.getAndStoreChannelClaims(channelName, channelClaimId, page); + this.getAndStoreChannelClaims(this.props.name, this.props.id, this.state.page); } - getAndStoreChannelClaims (channelName, channelClaimId, page) { - const url = `/api/channel-claims/${channelName}/${channelClaimId}/${page}`; + getAndStoreChannelClaims (name, id, page) { + if (!id) id = 'none'; + const url = `/api/channel-claims/${name}/${id}/${page}`; const that = this; return request(url) .then(({ success, message, data }) => { @@ -26,14 +24,7 @@ class ChannelClaimsDisplay extends React.Component { if (!success) { return that.setState({error: message}); } - that.setState({ - claims : data.claims, - currentPage : data.currentPage, - nextPage : data.nextPage, - previousPage: data.previousPage, - totalPages : data.totalPages, - totalResults: data.totalResults, - }); + this.props.onClaimsDataChange(data.claims, data.currentPage, data.totalPages, data.totalResults); }) .catch((error) => { that.setState({error: error.message}); @@ -50,12 +41,19 @@ class ChannelClaimsDisplay extends React.Component { ) : (
current page: {this.props.currentPage}
+total pages: {this.props.totalPages}
+total claims: {this.props.totalClaims}
+full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}
-short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}
+full channel id: {this.props.channel.longId ? this.props.channel.longId : 'loading...'}
+short channel id: {this.props.channel.shortId ? this.props.channel.shortId : 'loading...'}
Loading...
+loading...
); } }; diff --git a/react/reducers/show.js b/react/reducers/show.js index fb9e924f..1a12e393 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -2,71 +2,24 @@ import * as actions from 'constants/show_action_types'; const initialState = { request: { - channel: { - name: null, - id : null, - }, - claim: { - name : null, - modifier: { - id : null, - channel: { - name: null, - id : null, - }, - }, - extension: null, + channel: null, + claim : null, + }, + channel: { + name : null, + shortId : null, + longId : null, + claimsData: { + claims : null, + currentPage: null, + totalPages : null, + totalClaims: null, }, }, - channelData: { - channelName : null, - claims : null, - currentPage : null, - previousPage: null, - totalPages : null, - totalResults: null, - }, - claimData: { - FileId : null, - address : null, - amount : null, - author : null, - certificateId : null, - channelName : null, - claimId : null, - claimSequence : null, - claimType : null, - contentType : null, - createdAt : null, - decodedClaim : null, - depth : null, - description : null, - effectiveAmount: null, - fileExt : null, - hasSignature : null, - height : null, - hex : null, - host : null, - id : null, - language : null, - license : null, - licenseUrl : null, - metadataVersion: null, - name : null, - nout : null, - nsfw : null, - outpoint : null, - preview : null, - source : null, - sourceType : null, - sourceVersion : null, - streamVersion : null, - thumbnail : null, - title : null, - txid : null, - updatedAt : null, - validAtHeight : null, - valueVersion : null, + claim: { + name: null, + id : null, + data: null, }, }; @@ -92,11 +45,26 @@ export default function (state = initialState, action) { }); case actions.CHANNEL_DATA_UPDATE: return Object.assign({}, state, { - channelData: action.channelData, + channel: Object.assign({}, state.channel, { + name : action.name, + shortId: action.shortId, + longId : action.longId, + }), + }); + case actions.CHANNEL_CLAIMS_UPDATE: + return Object.assign({}, state, { + channel: Object.assign({}, state.channel, { + claimsData: { + claims : action.claims, + currentPage: action.currentPage, + totalPages : action.totalPages, + totalClaims: action.totalClaims, + }, + }), }); case actions.CLAIM_DATA_UPDATE: return Object.assign({}, state, { - claimData: action.claimData, + displayClaim: action.claimData, }); default: return state;