From a00ff9203cb6003871dcd763f38f14b9008ac321 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Feb 2018 18:42:03 -0800 Subject: [PATCH] updated channel display to use redux store --- react/actions/show.js | 16 ++- react/constants/show_action_types.js | 1 + .../containers/ChannelClaimsDisplay/index.js | 24 +++++ .../ChannelClaimsDisplay/view.jsx} | 44 ++++----- react/containers/ShowChannel/index.js | 27 +++++ .../ShowChannel/view.jsx} | 35 ++----- react/containers/ShowPage/index.js | 3 +- react/containers/ShowPage/view.jsx | 28 +++--- react/reducers/show.js | 98 +++++++------------ 9 files changed, 141 insertions(+), 135 deletions(-) create mode 100644 react/containers/ChannelClaimsDisplay/index.js rename react/{components/ChannelClaimsDisplay/index.js => containers/ChannelClaimsDisplay/view.jsx} (51%) create mode 100644 react/containers/ShowChannel/index.js rename react/{components/ShowChannel/index.js => containers/ShowChannel/view.jsx} (50%) 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 { ) : (
- {this.state.claims && this.state.claims.map((claim, index) => )} + {this.props.claims && +
+ {this.props.claims.map((claim, index) => )} +

current page: {this.props.currentPage}

+

total pages: {this.props.totalPages}

+

total claims: {this.props.totalClaims}

+
+ }
)} @@ -63,8 +61,4 @@ class ChannelClaimsDisplay extends React.Component { } }; -// required props -// channelName -// channelClaimId - export default ChannelClaimsDisplay; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js new file mode 100644 index 00000000..6606172d --- /dev/null +++ b/react/containers/ShowChannel/index.js @@ -0,0 +1,27 @@ +import { connect } from 'react-redux'; +import View from './view'; +import {updateChannelData} from 'actions/show'; + +const mapStateToProps = ({ show }) => { + return { + request: { + name: show.request.channel.name, + id : show.request.channel.id, + }, + channel: { + name : show.channel.name, + shortId: show.channel.shortId, + longId : show.channel.longId, + }, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onChannelDataChange: (name, longId, shortId) => { + dispatch(updateChannelData(name, longId, shortId)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ShowChannel/index.js b/react/containers/ShowChannel/view.jsx similarity index 50% rename from react/components/ShowChannel/index.js rename to react/containers/ShowChannel/view.jsx index d28acaf6..2f381247 100644 --- a/react/components/ShowChannel/index.js +++ b/react/containers/ShowChannel/view.jsx @@ -1,6 +1,6 @@ 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 { @@ -12,12 +12,11 @@ class ShowChannel extends React.Component { this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this); } componentDidMount () { - const channelName = this.props.channelName; - const channelClaimId = this.props.channelClaimId || 'none'; - this.getAndStoreChannelData(channelName, channelClaimId); + this.getAndStoreChannelData(this.props.request.name, this.props.request.id); } - getAndStoreChannelData (channelName, channelClaimId) { - const url = `/api/channel-data/${channelName}/${channelClaimId}`; + getAndStoreChannelData (name, id) { + if (!id) id = 'none'; + const url = `/api/channel-data/${name}/${id}`; const that = this; return request(url) .then(({ success, message, data }) => { @@ -25,11 +24,7 @@ class ShowChannel extends React.Component { if (!success) { return that.setState({error: message}); } - that.setState({ - channelName : data.channelName, - longChannelClaimId : data.longChannelClaimId, - shortChannelClaimId: data.shortChannelClaimId, - }); + this.props.onChannelDataChange(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); }) .catch((error) => { that.setState({error: error.message}); @@ -48,17 +43,12 @@ class ShowChannel extends React.Component { ) : (
-

channel name: {this.props.channelName}

-

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

-

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

+

channel name: {this.props.channel.name}

+

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

+

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

- { (this.state.channelName && this.state.longChannelClaimId) && - - } + {this.props.channel.name && }
)} @@ -67,9 +57,4 @@ class ShowChannel extends React.Component { } }; -// required props -// channelName -// channelClaimId - - export default ShowChannel; diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index b3c946ad..c00adf22 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -4,8 +4,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - channel: show.request.channel, - claim : show.request.claim, + request: show.request, }; }; diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index 5a3524c9..f8e331cb 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ErrorPage from 'components/ErrorPage'; import ShowAsset from 'components/ShowAsset'; -import ShowChannel from 'components/ShowChannel'; +import ShowChannel from 'containers/ShowChannel'; import lbryUri from 'utils/lbryUri'; class ShowPage extends React.Component { @@ -35,7 +35,6 @@ class ShowPage extends React.Component { this.parseAndUpdateClaimOnly(claim); } parseAndUpdateIdentifierAndClaim (modifier, claim) { - // handle case of identifier and claim // this is a request for an asset // claim will be an asset claim // the identifier could be a channel or a claim id @@ -66,7 +65,6 @@ class ShowPage extends React.Component { return this.props.onClaimRequest(requestedClaim); } parseAndUpdateClaimOnly (claim) { - // handle case of just claim // this could be a request for an asset or a channel page // claim could be an asset claim or a channel claim let isChannel, channelName, channelClaimId; @@ -104,25 +102,23 @@ class ShowPage extends React.Component { ); } - if (this.state.claim) { - if (this.state.claim.isChannel) { + if (this.props.request) { + if (this.props.request.channel) { return ( - + ); + } else if (this.props.request.claim) { + return ( + ); } - return ( - - ); } return ( -

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;