From d1a71cf74fb5b6d0144d45f5998acb2e37288254 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 20:15:44 -0800 Subject: [PATCH] debugged state mismatch --- react/actions/show.js | 5 ++- react/containers/ShowAsset/index.js | 8 +++-- react/containers/ShowAsset/view.jsx | 47 +++++++++--------------- react/containers/ShowChannel/index.js | 13 +++---- react/containers/ShowChannel/view.jsx | 10 ++++-- react/reducers/show.js | 51 ++++++++++++++++----------- 6 files changed, 71 insertions(+), 63 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index a945d7c6..f0693c2b 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -9,16 +9,19 @@ export function updateRequestError (error) { } export function updateRequestWithChannelRequest (name, id) { + const requestId = `cr#${name}#${id}`; return { type: actions.REQUEST_CHANNEL_UPDATE, - data: { name, id }, + data: { requestId, name, id }, }; }; export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { + const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { type: actions.REQUEST_CLAIM_UPDATE, data: { + requestId, name, modifier: { id, diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 7c1ce93c..4dc6c5ab 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -5,15 +5,17 @@ import { newAssetRequest, updateRequestError, showNewAsset, updateShowAsset, cle const mapStateToProps = ({ show }) => { return { // new - requestName : show.assetRequest.name, - requestModifier : show.assetRequest.modifier, - requestExtension: show.assetRequest.extension, + requestId : show.request.id, + requestName : show.request.data.name, + requestModifier : show.request.data.modifier, + requestExtension: show.request.data.extension, assetRequests : show.assetRequests, assets : show.assets, // old error : show.showAsset.error, name : show.showAsset.name, claimData : show.showAsset.claimData, + showAsset : show.assets[show.request.id], }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 079609ca..e9a336fa 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -3,44 +3,31 @@ import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; -function buildIdFromModifierObject (name, modifier) { - if (modifier) { - if (modifier.channel.name) { - return `${name}#${modifier.channel.name}#${modifier.channel.id}`; - } - return `${name}#${modifier.id}`; - } - return `${name}`; -} - -function buildIdFromNameAndClaimId (name, claimId) { - return `${name}#${claimId}`; -} - class ShowAsset extends React.Component { componentDidMount () { - const { requestName, requestModifier, assetRequests } = this.props; - const id = buildIdFromModifierObject(requestName, requestModifier); + const { requestId, requestName, requestModifier, assetRequests } = this.props; // check to see if we have this asset - if (assetRequests[id]) { // case: the assetRequest exists - const request = assetRequests[id]; - this.onRepeatRequest(id, request); + if (assetRequests[requestId]) { // case: the assetRequest exists + const request = assetRequests[requestId]; + this.onRepeatRequest(requestId, request); } else { // case: the asset request does not exist - this.onNewRequest(id, requestName, requestModifier); + this.onNewRequest(requestId, requestName, requestModifier); } } componentWillReceiveProps (nextProps) { - if (nextProps.assetRequests !== this.props.assetRequests) { - console.log('assetRequests updated:'); - const { requestName, requestModifier, assetRequests } = nextProps; - const id = buildIdFromModifierObject(requestName, requestModifier); + // case where componentDidMount triggered new props + if (nextProps.assetRequests !== this.props.assetRequests) { // note: reason for not showing small url requests? + console.log('show.assetRequests updated'); + const { requestId, requestName, requestModifier, assetRequests } = nextProps; // if the component received new assetRequests, check again to see if the current request matches one - if (assetRequests[id]) { // case: the assetRequest exists - const request = assetRequests[id]; - this.onRepeatRequest(id, request); + if (assetRequests[requestId]) { // case: the assetRequest exists + const request = assetRequests[requestId]; + this.onRepeatRequest(requestId, request); } else { // case: the asset request does not exist - this.onNewRequest(id, requestName, requestModifier); + this.onNewRequest(requestId, requestName, requestModifier); } + } else { + console.log('show.assetRequests did not update'); } } onNewRequest (id, requestName, requestModifier) { @@ -51,7 +38,7 @@ class ShowAsset extends React.Component { console.log('repeat request'); const { assets } = this.props; const { error: requestError, name, claimId } = request; - const assetId = buildIdFromNameAndClaimId(name, claimId); + const assetId = `a#${name}#${claimId}`; // if error, return and update state with error if (requestError) { return this.props.onRequestError(requestError); @@ -74,7 +61,7 @@ class ShowAsset extends React.Component { ); } - if (name) { + if (name) { // direct requests are passing because name is present so it just goes if (requestExtension) { return ( diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 17713cb9..4d0c1058 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -4,12 +4,13 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - requestName: show.channelRequest.name, - requestId : show.channelRequest.id, - error : show.showChannel.error, - name : show.showChannel.channelData.name, - shortId : show.showChannel.channelData.shortId, - longId : show.showChannel.channelData.longId, + requestId : show.request.id, + requestChannelName: show.request.data.name, + requestChannelId : show.request.data.id, + error : show.showChannel.error, + name : show.showChannel.channelData.name, + shortId : show.showChannel.channelData.shortId, + longId : show.showChannel.channelData.longId, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index d1d31f0f..16bc7df7 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -6,14 +6,18 @@ import request from 'utils/request'; class ShowChannel extends React.Component { componentDidMount () { - this.getAndStoreChannelData(this.props.requestName, this.props.requestId); + console.log('showchannel did mount'); + const {requestChannelName, requestChannelId} = this.props; + this.getAndStoreChannelData(requestChannelName, requestChannelId); } componentWillReceiveProps (nextProps) { - if (nextProps.requestName !== this.props.requestName || nextProps.requestId !== this.props.requestId) { - this.getAndStoreChannelData(nextProps.requestName, nextProps.requestId); + if (nextProps.channelRequests !== this.props.channelRequests) { + const {requestChannelName, requestChannelId} = nextProps; + this.getAndStoreChannelData(requestChannelName, requestChannelId); } } getAndStoreChannelData (name, id) { + console.log('getting and storing channel data for channel:', name, id); if (!id) id = 'none'; const url = `/api/channel/data/${name}/${id}`; return request(url) diff --git a/react/reducers/show.js b/react/reducers/show.js index 129cefba..6694eb4e 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -4,24 +4,26 @@ import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states'; const initialState = { request: { - error: null, - type : null, - }, - channelRequest: { - name: null, - id : null, - }, - assetRequest: { - name : null, - modifier: { - id : null, - channel: { - name: null, - id : null, - }, - }, - extension: null, + error : null, + type : null, + data : null, + requestId: null, }, + // channelRequest: { + // name: null, + // id : null, + // }, + // assetRequest: { + // name : null, + // modifier: { + // id : null, + // channel: { + // name: null, + // id : null, + // }, + // }, + // extension: null, + // }, showChannel: { error : null, channelData: { @@ -71,21 +73,30 @@ export default function (state = initialState, action) { request: { type : CHANNEL, error: null, + id : action.data.requestId, + data : { + name: action.data.name, + id : action.data.id, + }, }, - channelRequest: action.data, }); case actions.REQUEST_CLAIM_UPDATE: return Object.assign({}, state, { request: { type : ASSET, error: null, + id : action.data.requestId, + data : { + name : action.data.name, + modifier : action.data.modifier, + extension: action.data.extension, + }, }, - assetRequest: action.data, }); // request for an asset case actions.ASSET_REQUEST_ADD: return Object.assign({}, state, { - assetRequests: Object.assign({}, state.assets, { + assetRequests: Object.assign({}, state.assetRequests, { [action.data.id]: { error : action.data.error, name : action.data.name,