react/actions/show.js

@@ -64,23 +64,6 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC
   };
 };
 
-export function updateShowAssetError (error) {
-  return {
-    type: actions.SHOW_ASSET_ERROR,
-    data: error,
-  };
-};
-
-export function updateAssetClaimData (data, shortId) {
-  return {
-    type: actions.ASSET_CLAIM_DATA_UPDATE,
-    data: {
-      data,
-      shortId,
-    },
-  };
-};
-
 export function fileRequested (name, claimId) {
   return {
     type: actions.FILE_REQUESTED,
@@ -105,7 +88,7 @@ export function updateDisplayAssetError (error) {
   };
 };
 
-// new
+// new: request-related actions
 
 export function newAssetRequest (id, name, modifier) {
   return {
@@ -114,16 +97,32 @@ export function newAssetRequest (id, name, modifier) {
   };
 };
 
-export function addAssetRequest (id, error, claimId) {
+export function addAssetRequest (id, error, name, claimId) {
   return {
     type: actions.ASSET_REQUEST_ADD,
-    data: { id, error, claimId },
+    data: { id, error, name, claimId },
   };
 };
 
-// export function addAsset (error, name, claimId, claimData, shortId, display) {
-//   return {
-//     type: actions.ASSET_ADD,
-//     data: { error, name, claimId, claimData, shortId, display },
-//   };
-// };
+// new: asset-realted actions
+
+export function showNewAsset (id, name, claimId) {
+  console.log('show new asset', id, name, claimId);
+  return {
+    type: actions.SHOW_NEW_ASSET,
+    data: { id, name, claimId },
+  };
+};
+
+export function updateShowAsset (id, error, name, claimId, shortId, claimData) {
+  return {
+    type: actions.SHOW_ASSET_UPDATE,
+    data: { id, error, name, claimId, shortId, claimData },
+  };
+};
+
+export function clearShowAsset () {
+  return {
+    type: actions.SHOW_ASSET_CLEAR,
+  };
+};

react/api/AssetApi.js

@@ -23,4 +23,14 @@ export function getLongClaimId (name, modifier) {
   const url = `/api/claim/long-id`;
   // return the request promise
   return Request(url, params);
-}
+};
+
+export function getShortId (name, claimId) {
+  const url = `/api/claim/short-id/${claimId}/${name}`;
+  return Request(url);
+};
+
+export function getClaimData (name, claimId) {
+  const url = `/api/claim/data/${name}/${claimId}`;
+  return Request(url);
+};

react/components/AssetInfo/view.jsx

@@ -36,7 +36,7 @@ class AssetInfo extends React.Component {
             <span className="text">Channel:</span>
           </div>
           <div className="column column--8 column--med-10">
-            <span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
+            <span className="text"><Link to={`/${channelName}:${certificateId}`}>{channelName}</Link></span>
           </div>
         </div>
         }

react/constants/show_action_types.js

@@ -6,14 +6,15 @@ export const SHOW_CHANNEL_ERROR = 'SHOW_CHANNEL_ERROR';
 export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
 export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
 
-export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR';
+export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE';
 export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE';
 
 export const FILE_REQUESTED = 'FILE_REQUESTED';
 export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
 export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';
 
-/ new
+// new
 export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST';
 export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD';
-export const ASSET_ADD = 'ASSET_ADD';
+export const SHOW_NEW_ASSET = 'SHOW_NEW_ASSET';
+export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR';

react/containers/ShowAsset/index.js

@@ -1,15 +1,18 @@
 import { connect } from 'react-redux';
 import View from './view';
-import { newAssetRequest, updateAssetClaimData, updateShowAssetError } from 'actions/show';
+import { newAssetRequest, updateRequestError, showNewAsset, updateShowAsset, clearShowAsset } from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
     // new
-    request      : show.assetRequest,
+    requestName     : show.assetRequest.name,
+    requestModifier : show.assetRequest.modifier,
+    requestExtension: show.assetRequest.extension,
     assetRequests   : show.assetRequests,
-    extension    : show.assetRequest.extension,
+    assets          : show.assets,
     // old
     error           : show.showAsset.error,
+    name            : show.showAsset.name,
     claimData       : show.showAsset.claimData,
   };
 };
@@ -17,20 +20,20 @@ const mapStateToProps = ({ show }) => {
 const mapDispatchToProps = dispatch => {
   return {
     // new
-    onNewAssetRequest (name, modifier) {
-      dispatch(newAssetRequest(name, modifier));
+    onNewRequest: (id, name, modifier) => {
+      dispatch(newAssetRequest(id, name, modifier));
     },
-    // old
-    onShowAssetError: (error) => {
-      dispatch(updateShowAssetError(error));
+    onRequestError: (error) => {
+      dispatch(updateRequestError(error, null, null));
     },
-    onAssetClaimDataUpdate: (claimData, shortId) => {
-      dispatch(updateAssetClaimData(claimData, shortId));
-      dispatch(updateShowAssetError(null)); // clear any errors
+    onShowNewAsset: (id, name, claimId) => {
+      dispatch(showNewAsset(id, name, claimId));
     },
-    onAssetClaimDataClear: () => {
-      dispatch(updateAssetClaimData(null, null));
-      dispatch(updateShowAssetError(null)); // clear any errors
+    onShowExistingAsset: (id, error, name, claimId, shortId, claimData) => {
+      dispatch(updateShowAsset(id, error, name, claimId, shortId, claimData));
+    },
+    onLeaveShowAsset: () => {
+      dispatch(clearShowAsset()); // clear any errors
     },
   };
 };

react/containers/ShowAsset/view.jsx

@@ -2,53 +2,80 @@ import React from 'react';
 import ErrorPage from 'components/ErrorPage';
 import ShowAssetLite from 'components/ShowAssetLite';
 import ShowAssetDetails from 'components/ShowAssetDetails';
-import request from 'utils/request';
 
-function buildIdFromModifierObject (modifier) {
+function buildIdFromModifierObject (name, modifier) {
   if (modifier) {
     if (modifier.channel.name) {
-      return `${modifier.channel.name}#${modifier.channel.id}`;
+      return `${name}#${modifier.channel.name}#${modifier.channel.id}`;
     }
-    return modifier.id;
+    return `${name}#${modifier.id}`;
   }
-  return '';
+  return `${name}`;
+}
+
+function buildIdFromNameAndClaimId (name, claimId) {
+  return `${name}#${claimId}`;
 }
 
 class ShowAsset extends React.Component {
-  constructor (props) {
-    super(props);
-    this.getLongClaimId = this.getLongClaimId.bind(this);
-    this.getClaimData = this.getClaimData.bind(this);
-  }
   componentDidMount () {
-    const { request: { name, modifier }, assetRequests } = this.props;
-    const id = buildIdFromModifierObject(modifier);
+    const { requestName, requestModifier, assetRequests } = this.props;
+    const id = buildIdFromModifierObject(requestName, requestModifier);
     // check to see if we have this asset
-    if (assetRequests[id]) {
-      // case: the assetRequest exists
-      this.props.onNewAssetRequest(id, name, modifier);  // request the long id and update the store with a new asset request record.
-    } else {
-      // case: the asset request does not exist
-      this.onRepeatAssetRequest(name, modifier); // get the asset request record...?
+    if (assetRequests[id]) { // case: the assetRequest exists
+      const request = assetRequests[id];
+      this.onRepeatRequest(id, request);
+    } else { // case: the asset request does not exist
+      this.onNewRequest(id, requestName, requestModifier);
     }
   }
-  onRepeatAssetRequest (id, modifier, assetRequests) {
-    // get the results of the existing asset request
-    const {error, claimId} = assetRequests[id];
-    console.log(`results form past request ${id}:`, error, claimId);
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.assetRequests !== this.props.assetRequests) {
+      console.log('assetRequests updated:');
+      const { requestName, requestModifier, assetRequests } = nextProps;
+      const id = buildIdFromModifierObject(requestName, requestModifier);
+      // 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);
+      } else { // case: the asset request does not exist
+        this.onNewRequest(id, requestName, requestModifier);
+      }
+    }
+  }
+  onNewRequest (id, requestName, requestModifier) {
+    console.log('new request');
+    this.props.onNewRequest(id, requestName, requestModifier);
+  }
+  onRepeatRequest (requestId, request) {
+    console.log('repeat request');
+    const { assets } = this.props;
+    const { error: requestError, name, claimId } = request;
+    const assetId = buildIdFromNameAndClaimId(name, claimId);
+    // if error, return and update state with error
+    if (requestError) {
+      return this.props.onRequestError(requestError);
+    }
+    // update the show asset data in the store
+    if (assets[assetId]) { // case: the asset data already exists
+      let { error, name, claimId, shortId, claimData } = assets[assetId];
+      this.props.onShowExistingAsset(assetId, error, name, claimId, shortId, claimData);
+    } else { // case: the asset data does not exist yet
+      this.props.onShowNewAsset(assetId, name, claimId);
+    }
   }
   componentWillUnmount () {
-    this.props.onAssetClaimDataClear();
+    this.props.onLeaveShowAsset();
   }
   render () {
-    const { error, claimData, extension } = this.props;
+    const { error, name, requestExtension } = this.props;
     if (error) {
       return (
         <ErrorPage error={error}/>
       );
     }
-    if (claimData) {
-      if (extension) {
+    if (name) {
+      if (requestExtension) {
         return (
           <ShowAssetLite />
         );

react/reducers/show.js

@@ -38,8 +38,10 @@ const initialState = {
   },
   showAsset: {
     error    : null,
-    claimData: null,
+    name     : null,
+    claimId  : null,
     shortId  : null,
+    claimData: null,
   },
   displayAsset: {
     error : null,
@@ -48,26 +50,14 @@ const initialState = {
   channelRequests: {},
   assetRequests  : {},
   channels       : {},
-  assets         : {},
+  assets         : {},  // same schema as showAsset
 };
 
 /* asset request schema:
 name#someidfrommodifier: {
-  error  : null
-  claimId: null,
-} */
-
-/* asset schema:
-name#claimId: {
   error  : null,
   name   : null,
   claimId: null,
-  claimData: null,
-  shortId  : null,
-  display  : {
-    error : null,
-    status: null,
-  }
 } */
 
 /*
@@ -119,19 +109,14 @@ export default function (state = initialState, action) {
         }),
       });
     // show asset cases
-    case actions.SHOW_ASSET_ERROR:
-      return Object.assign({}, state, {
-        showAsset: Object.assign({}, state.showAsset, {
-          error: action.data,
-        }),
-      });
-    case actions.ASSET_CLAIM_DATA_UPDATE:
-      return Object.assign({}, state, {
-        showAsset: Object.assign({}, state.showAsset, {
-          claimData: action.data.data,
-          shortId  : action.data.shortId,
-        }),
-      });
+    // case actions.SHOW_ASSET_UPDATE:
+    //   return Object.assign({}, state, {
+    //     showAsset: Object.assign({}, state.showAsset, {
+    //       error    : action.data.error,
+    //       claimData: action.data.claimData,
+    //       shortId  : action.data.shortId,
+    //     }),
+    //   });
     // display asset cases
     case actions.FILE_AVAILABILITY_UPDATE:
       return Object.assign({}, state, {
@@ -152,17 +137,40 @@ export default function (state = initialState, action) {
         assetRequests: Object.assign({}, state.assets, {
           [action.data.id]: {
             error  : action.data.error,
+            name   : action.data.name,
             claimId: action.data.claimId,
           },
         }),
       });
-
-    // case actions.ASSET_ADD:
-    //   return Object.assign({}, state, {
-    //     assets: Object.assign({}, state.assets, {
-    //       [`${action.data.name}#${action.data.claimId}`]: action.data,
-    //     }),
-    //   });
+    case actions.SHOW_ASSET_UPDATE:
+      return Object.assign({}, state, {
+        assets: Object.assign({}, state.assets, {
+          [action.data.id]: {
+            error    : action.data.error,
+            name     : action.data.name,
+            claimId  : action.data.claimId,
+            shortId  : action.data.shortId,
+            claimData: action.data.claimData,
+          },
+        }),
+        showAsset: Object.assign({}, state.showAsset, {
+          error    : action.data.error,
+          name     : action.data.name,
+          claimId  : action.data.claimId,
+          shortId  : action.data.shortId,
+          claimData: action.data.claimData,
+        }),
+      });
+    case actions.SHOW_ASSET_CLEAR:
+      return Object.assign({}, state, {
+        showAsset: Object.assign({}, state.showAsset, {
+          error    : null,
+          name     : null,
+          claimId  : null,
+          shortId  : null,
+          claimData: null,
+        }),
+      });
     default:
       return state;
   }

react/sagas/index.js

@@ -1,9 +1,10 @@
 import { all } from 'redux-saga/effects';
-import { watchNewAssetRequest, watchFileIsRequested } from './show';
+import { watchNewAssetRequest, watchShowNewAsset, watchFileIsRequested } from './show';
 
 export default function* rootSaga () {
   yield all([
     watchNewAssetRequest(),
+    watchShowNewAsset(),
     watchFileIsRequested(),
   ]);
 }

react/sagas/show.js

@@ -1,62 +1,50 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
 import * as actions from 'constants/show_action_types';
-import { addAssetRequest, updateFileAvailability, updateDisplayAssetError } from 'actions/show';
+import { addAssetRequest, updateShowAsset, updateFileAvailability, updateDisplayAssetError } from 'actions/show';
 import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states';
 import { checkFileAvailability, triggerClaimGet } from 'api/fileApi';
-import { getLongClaimId } from 'api/AssetApi';
-import request from '../utils/request';
+import { getLongClaimId, getShortId, getClaimData } from 'api/AssetApi';
 
 function* newAssetRequest (action) {
   const { id, name, modifier } = action.data;
-  // get the long claim id
   let success, message, longId;
   try {
     ({success, message, data: longId} = yield call(getLongClaimId, name, modifier));
   } catch (error) {
     console.log('error making getLongClaimId call', error);
-    yield put(addAssetRequest(id, error.message, null));
+    yield put(addAssetRequest(id, error.message, name, null));
   }
-  // put a new action to update the store with result
   if (success) {
-    return yield put(addAssetRequest(id, null, longId));
+    return yield put(addAssetRequest(id, null, name, longId));
   }
-  yield put(addAssetRequest(id, message, null));
+  yield put(addAssetRequest(id, message, name, null));
 };
 
-function* getShortId (action) {
-  const { longId, name } = action.data;
-  const url = `/api/claim/short-id/${longId}/${name}`;
-  return new Promise((resolve, reject) => {
-    request(url)
-      .then(({ success, message, data }) => {
-        console.log('get short claim id response:', data);
+function* getAssetDataAndShowAsset (action) {
+  const {id, name, claimId} = action.data;
+  // if no error, get short Id
+  let success, message, shortId;
+  try {
+    ({success, message, data: shortId} = yield call(getShortId, name, claimId));
+  } catch (error) {
+    return yield put(updateShowAsset(id, error.message, null, null, null)); // add with error
+  }
   if (!success) {
-          reject(message);
+    return yield put(updateShowAsset(id, message, null, null, null)); // add with error
   }
-        resolve(data);
-      })
-      .catch((error) => {
-        reject(error.message);
-      });
-  });
+  // if no error, get claim data
+  success = null;
+  let claimData;
+  try {
+    ({success, message, data: claimData} = yield call(getClaimData, name, claimId));
+  } catch (error) {
+    return yield put(updateShowAsset(id, error.message, null, null, null)); // add with error
   }
-
-function* getClaimData (action) {
-  const { claimName, claimId } = action.data;
-  return new Promise((resolve, reject) => {
-    const url = `/api/claim/data/${claimName}/${claimId}`;
-    return request(url)
-      .then(({ success, message }) => {
-        console.log('get claim data response:', message);
   if (!success) {
-          reject(message);
+    return yield put(updateShowAsset(id, message, null, null, null)); // add with error
   }
-        resolve(message);
-      })
-      .catch((error) => {
-        reject(error.message);
-      });
-  });
+  // if both are successfull, add to asset list and select for showing
+  yield put(updateShowAsset(id, null, name, claimId, shortId, claimData));
 }
 
 function* retriveFile (action) {
@@ -95,6 +83,10 @@ export function* watchNewAssetRequest () {
   yield takeLatest(actions.NEW_ASSET_REQUEST, newAssetRequest);
 };
 
+export function* watchShowNewAsset () {
+  yield takeLatest(actions.SHOW_NEW_ASSET, getAssetDataAndShowAsset);
+};
+
 export function* watchFileIsRequested () {
   yield takeLatest(actions.FILE_REQUESTED, retriveFile);
 };

routes/api-routes.js

@@ -207,7 +207,7 @@ module.exports = (app) => {
         res.status(200).json({success: false, message: error.message});
       });
   });
-  app.get('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => {
+  app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => {
     logger.debug('body:', body);
     const channelName = body.channelName;
     const channelClaimId = body.channelClaimId;
@@ -237,7 +237,7 @@ module.exports = (app) => {
         if (!claimInfo) {
           return res.status(200).json({success: false, message: 'No claim could be found'});
         }
-        res.status(200).json({success: true, message: claimInfo});
+        res.status(200).json({success: true, data: claimInfo});
       })
       .catch(error => {
         logger.error('api error getting long claim id', error);