From 51c50d7f5dd99f2350fca27409349ee458578224 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 09:19:22 -0800 Subject: [PATCH] removed componentWillMount and simplified mapDispatchToProps --- react/actions/show.js | 12 ++++----- .../containers/ChannelClaimsDisplay/index.js | 8 +++--- .../containers/ChannelClaimsDisplay/view.jsx | 2 +- react/containers/ShowAsset/index.js | 12 +++------ react/containers/ShowAsset/view.jsx | 26 +++---------------- react/containers/ShowChannel/index.js | 10 +++---- react/containers/ShowChannel/view.jsx | 20 +++----------- react/containers/ShowPage/index.js | 16 ++++-------- react/containers/ShowPage/view.jsx | 8 +++--- react/sagas/show_asset.js | 10 +++---- react/sagas/show_channel.js | 10 +++---- 11 files changed, 42 insertions(+), 92 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 51233448..a3847c6b 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,14 +1,14 @@ import * as actions from 'constants/show_action_types'; // basic request parsing -export function updateRequestError (error) { +export function onRequestError (error) { return { type: actions.REQUEST_UPDATE_ERROR, data: error, }; } -export function updateRequestWithChannelRequest (name, id) { +export function onParsedChannelRequest (name, id) { const requestId = `cr#${name}#${id}`; return { type: actions.REQUEST_UPDATE_CHANNEL, @@ -16,7 +16,7 @@ export function updateRequestWithChannelRequest (name, id) { }; }; -export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { +export function onParsedAssetRequest (name, id, channelName, channelId, extension) { const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { type: actions.REQUEST_UPDATE_ASSET, @@ -37,7 +37,7 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, // asset actions -export function newAssetRequest (id, name, modifier) { +export function onNewAssetRequest (id, name, modifier) { return { type: actions.ASSET_REQUEST_NEW, data: { id, name, modifier }, @@ -60,7 +60,7 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat // channel actions -export function newChannelRequest (id, name, channelId) { +export function onNewChannelRequest (id, name, channelId) { return { type: actions.CHANNEL_REQUEST_NEW, data: {id, name, channelId}, @@ -83,7 +83,7 @@ export function addNewChannelToChannelList (id, name, shortId, longId, claimsDat // update channel data -export function updateChannelClaimsAsync (channelKey, name, longId, page) { +export function onUpdateChannelClaims (channelKey, name, longId, page) { return { type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC, data: {channelKey, name, longId, page}, diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 80c075dc..4a24968e 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { updateChannelClaimsAsync } from 'actions/show'; +import { onUpdateChannelClaims } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -15,11 +15,9 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - onChannelPageUpdate: (channelKey, name, longId, page) => { - dispatch(updateChannelClaimsAsync(channelKey, name, longId, page)); - }, + onUpdateChannelClaims, }; }; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 285886fe..fd450268 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -19,7 +19,7 @@ class ChannelClaimsDisplay extends React.Component { } showNewPage (page) { const { channelKey, channel: { name, longId } } = this.props; - this.props.onChannelPageUpdate(channelKey, name, longId, page); + this.props.onUpdateChannelClaims(channelKey, name, longId, page); } render () { const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 43b0ca14..c59f6470 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,10 +1,9 @@ import { connect } from 'react-redux'; import View from './view'; -import { newAssetRequest, showNewAsset } from 'actions/show'; +import { onNewAssetRequest } from 'actions/show'; const mapStateToProps = ({ show }) => { // select request info - const requestType = show.request.type; const requestId = show.request.id; const requestName = show.request.data.name; const requestModifier = show.request.data.modifier; @@ -17,10 +16,8 @@ const mapStateToProps = ({ show }) => { const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request asset = assetList[assetKey] || null; }; - // console.log('previousRequest:', previousRequest, 'asset:', asset, 'asset list', assetList); // return props return { - requestType, requestId, requestName, requestModifier, @@ -29,12 +26,9 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - // request - onNewRequest: (id, name, modifier) => { - dispatch(newAssetRequest(id, name, modifier)); - }, + onNewAssetRequest, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index fad53ee1..ddc8a07f 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -3,36 +3,18 @@ import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; -import { ASSET } from 'constants/show_request_types'; - -function requestIsAnAssetRequest ({ requestType }) { - return requestType === ASSET; -} - class ShowAsset extends React.Component { componentDidMount () { const { asset, requestId, requestName, requestModifier } = this.props; - if (!asset) { // case: the asset info does not exist - return this.props.onNewRequest(requestId, requestName, requestModifier); + if (!asset) { + return this.props.onNewAssetRequest(requestId, requestName, requestModifier); }; } - componentWillReceiveProps (nextProps) { - if (requestIsAnAssetRequest(nextProps)) { - const { asset, requestId, requestName, requestModifier } = nextProps; - if (!asset) { // case: the asset info does not exist - return this.props.onNewRequest(requestId, requestName, requestModifier); - }; - } - } render () { const {asset, requestExtension} = this.props; if (asset) { - if (requestExtension) { - return ; - } - return ; - } - ; + return requestExtension ? : ; + }; return ( ); diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index ee06b0fc..0a9c83c7 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,11 +1,10 @@ import { connect } from 'react-redux'; -import { newChannelRequest } from 'actions/show'; +import { onNewChannelRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { // select request info const requestId = show.request.id; - const requestType = show.request.type; const requestChannelName = show.request.data.name; const requestChannelId = show.request.data.id; // select request @@ -18,18 +17,15 @@ const mapStateToProps = ({ show }) => { } return { requestId, - requestType, requestChannelName, requestChannelId, channel, }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - onNewChannelRequest (requestId, requestChannelName, requestChannelId) { - dispatch(newChannelRequest(requestId, requestChannelName, requestChannelId)); - }, + onNewChannelRequest, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 5ffb71ef..4545d1a3 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -3,12 +3,6 @@ import ErrorPage from 'components/ErrorPage'; import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; -import { CHANNEL } from 'constants/show_request_types'; - -function requestIsAChannelRequest ({ requestType }) { - return requestType === CHANNEL; -} - class ShowChannel extends React.Component { componentDidMount () { const { channel, requestId, requestChannelName, requestChannelId } = this.props; @@ -16,14 +10,6 @@ class ShowChannel extends React.Component { return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } - componentWillReceiveProps (nextProps) { - if (requestIsAChannelRequest(nextProps)) { - const { channel, requestId, requestChannelName, requestChannelId } = nextProps; - if (!channel) { - return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); - } - } - } render () { const { channel } = this.props; if (channel) { @@ -33,9 +19,9 @@ class ShowChannel extends React.Component {
-

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

-

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

-

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

+

channel name: {name || 'loading...'}

+

full channel id: {longId || 'loading...'}

+

short channel id: {shortId || 'loading...'}

diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 405b8244..6bdfd64f 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { updateRequestError, updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show'; +import { onRequestError, onParsedChannelRequest, onParsedAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -9,17 +9,11 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - onRequestError: (error) => { - dispatch(updateRequestError(error)); - }, - onChannelRequest: (name, id) => { - dispatch(updateRequestWithChannelRequest(name, id)); - }, - onAssetRequest: (name, id, channelName, channelId, extension) => { - dispatch(updateRequestWithAssetRequest(name, id, channelName, channelId, extension)); - }, + onRequestError, + onParsedChannelRequest, + onParsedAssetRequest, }; }; diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index bbfb7502..e379113a 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -42,9 +42,9 @@ class ShowPage extends React.Component { } // update the store if (isChannel) { - return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension); + return this.props.onParsedAssetRequest(claimName, null, channelName, channelClaimId, extension); } else { - return this.props.onAssetRequest(claimName, claimId, null, null, extension); + return this.props.onParsedAssetRequest(claimName, claimId, null, null, extension); } } parseAndUpdateClaimOnly (claim) { @@ -58,7 +58,7 @@ class ShowPage extends React.Component { } // return early if this request is for a channel if (isChannel) { - return this.props.onChannelRequest(channelName, channelClaimId); + return this.props.onParsedChannelRequest(channelName, channelClaimId); } // if not for a channel, parse the claim request let claimName, extension; // if I am destructuring below, do I still need to declare these here? @@ -67,7 +67,7 @@ class ShowPage extends React.Component { } catch (error) { return this.props.onRequestError(error.message); } - this.props.onAssetRequest(claimName, null, null, null, extension); + this.props.onParsedAssetRequest(claimName, null, null, null, extension); } render () { const { error, requestType } = this.props; diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index c8a34a88..c1174f50 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addRequestToAssetRequests, updateRequestError, addAssetToAssetList } from 'actions/show'; +import { addRequestToAssetRequests, onRequestError, addAssetToAssetList } from 'actions/show'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; function* newAssetRequest (action) { @@ -12,7 +12,7 @@ function* newAssetRequest (action) { ({data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { console.log('error:', error); - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // put action to add request to asset request list yield put(addRequestToAssetRequests(id, null, name, longId)); @@ -22,7 +22,7 @@ function* newAssetRequest (action) { try { ({data: shortId} = yield call(getShortId, name, longId)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // get asset claim data console.log(`getting asset claim data ${name} ${longId}`); @@ -30,13 +30,13 @@ function* newAssetRequest (action) { try { ({data: claimData} = yield call(getClaimData, name, longId)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // put action to add asset to asset list const assetKey = `a#${name}#${longId}`; yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData)); // clear any errors in request error - yield put(updateRequestError(null)); + yield put(onRequestError(null)); }; export function* watchNewAssetRequest () { diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index b6eaa1ac..40aeddeb 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addNewChannelToChannelList, addRequestToChannelRequests, updateRequestError, updateChannelClaims } from 'actions/show'; +import { addNewChannelToChannelList, addRequestToChannelRequests, onRequestError, updateChannelClaims } from 'actions/show'; import { getChannelClaims, getChannelData } from 'api/channelApi'; function* getNewChannelAndUpdateChannelList (action) { @@ -11,7 +11,7 @@ function* getNewChannelAndUpdateChannelList (action) { try { ({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, name, channelId)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // store the request in the channel requests list yield put(addRequestToChannelRequests(id, null, name, longId, shortId)); @@ -21,13 +21,13 @@ function* getNewChannelAndUpdateChannelList (action) { try { ({ data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // store the channel data in the channel list const channelKey = `c#${name}#${longId}`; yield put(addNewChannelToChannelList(channelKey, name, shortId, longId, claimsData)); // clear any request errors - yield put(updateRequestError(null)); + yield put(onRequestError(null)); } export function* watchNewChannelRequest () { @@ -40,7 +40,7 @@ function* getNewClaimsAndUpdateChannel (action) { try { ({ data: claimsData } = yield call(getChannelClaims, name, longId, page)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } yield put(updateChannelClaims(channelKey, claimsData)); }