debugged state mismatch

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,

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

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 {
         <ErrorPage error={error}/>
       );
     }
-    if (name) {
+    if (name) { // direct requests are passing because name is present so it just goes
       if (requestExtension) {
         return (
           <ShowAssetLite />

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

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)

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,