react/actions/show.js

@@ -104,3 +104,26 @@ export function updateDisplayAssetError (error) {
     data: error,
   };
 };
+
+// new
+
+export function newAssetRequest (id, name, modifier) {
+  return {
+    type: actions.NEW_ASSET_REQUEST,
+    data: { id, name, modifier },
+  };
+};
+
+export function addAssetRequest (id, error, claimId) {
+  return {
+    type: actions.ASSET_REQUEST_ADD,
+    data: { id, error, claimId },
+  };
+};
+
+// export function addAsset (error, name, claimId, claimData, shortId, display) {
+//   return {
+//     type: actions.ASSET_ADD,
+//     data: { error, name, claimId, claimData, shortId, display },
+//   };
+// };

react/api/AssetApi.js

@@ -0,0 +1,26 @@
+import Request from 'utils/request';
+
+export function getLongClaimId (name, modifier) {
+  let body = {};
+  // create request params
+  if (modifier) {
+    if (modifier.id) {
+      body['claimId'] = modifier.id;
+    } else {
+      body['channelName'] = modifier.channel.name;
+      body['channelClaimId'] = modifier.channel.id;
+    }
+  }
+  body['claimName'] = name;
+  const params = {
+    method : 'POST',
+    headers: new Headers({
+      'Content-Type': 'application/json',
+    }),
+    body: JSON.stringify(body),
+  }
+  // crate url
+  const url = `/api/claim/long-id`;
+  // return the request promise
+  return Request(url, params);
+}

react/constants/show_action_types.js

@@ -12,3 +12,8 @@ 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
+export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST';
+export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD';
+export const ASSET_ADD = 'ASSET_ADD';

react/containers/ShowAsset/index.js

@@ -1,12 +1,14 @@
 import { connect } from 'react-redux';
 import View from './view';
-import { updateAssetClaimData, updateShowAssetError } from 'actions/show';
+import { newAssetRequest, updateAssetClaimData, updateShowAssetError } from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
-    modifier : show.assetRequest.modifier,
-    name     : show.assetRequest.name,
-    extension: show.assetRequest.extension,
+    // new
+    request      : show.assetRequest,
+    assetRequests: show.assetRequests,
+    extension    : show.assetRequest.extension,
+    // old
     error    : show.showAsset.error,
     claimData: show.showAsset.claimData,
   };
@@ -14,6 +16,11 @@ const mapStateToProps = ({ show }) => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    // new
+    onNewAssetRequest (name, modifier) {
+      dispatch(newAssetRequest(name, modifier));
+    },
+    // old
     onShowAssetError: (error) => {
       dispatch(updateShowAssetError(error));
     },

react/containers/ShowAsset/view.jsx

@@ -4,6 +4,16 @@ import ShowAssetLite from 'components/ShowAssetLite';
 import ShowAssetDetails from 'components/ShowAssetDetails';
 import request from 'utils/request';
 
+function buildIdFromModifierObject (modifier) {
+  if (modifier) {
+    if (modifier.channel.name) {
+      return `${modifier.channel.name}#${modifier.channel.id}`;
+    }
+    return modifier.id;
+  }
+  return '';
+}
+
 class ShowAsset extends React.Component {
   constructor (props) {
     super(props);
@@ -11,84 +21,21 @@ class ShowAsset extends React.Component {
     this.getClaimData = this.getClaimData.bind(this);
   }
   componentDidMount () {
-    const { name, modifier } = this.props;
-    // create request params
-    let body = {};
-    if (modifier) {
-      if (modifier.id) {
-        body['claimId'] = modifier.id;
-      } else {
-        body['channelName'] = modifier.channel.name;
-        body['channelClaimId'] = modifier.channel.id;
-      }
+    const { request: { name, modifier }, assetRequests } = this.props;
+    const id = buildIdFromModifierObject(modifier);
+    // 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...?
     }
-    body['claimName'] = name;
-    const params = {
-      method : 'POST',
-      headers: new Headers({
-        'Content-Type': 'application/json',
-      }),
-      body: JSON.stringify(body),
-    }
-    // make request
-    this.getLongClaimId(params)
-      .then(claimLongId => {
-        return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]);
-      })
-      .then(([shortId, claimData]) => {
-        this.props.onAssetClaimDataUpdate(claimData, shortId);
-      })
-      .catch(error => {
-        this.props.onShowAssetError(error);
-      });
   }
-  getLongClaimId (params) {
-    const url = `/api/claim/long-id`;
-    return new Promise((resolve, reject) => {
-      request(url, params)
-        .then(({ success, message, data }) => {
-          console.log('get long claim id response:', message);
-          if (!success) {
-            reject(message);
-          }
-          resolve(data);
-        })
-        .catch((error) => {
-          reject(error.message);
-        });
-    });
-  }
-  getShortClaimId (longId, name) {
-    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);
-          if (!success) {
-            reject(message);
-          }
-          resolve(data);
-        })
-        .catch((error) => {
-          reject(error.message);
-        });
-    });
-  }
-  getClaimData (claimId, claimName) {
-    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);
-          }
-          resolve(message);
-        })
-        .catch((error) => {
-          reject(error.message);
-        });
-    });
+  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);
   }
   componentWillUnmount () {
     this.props.onAssetClaimDataClear();

react/reducers/show.js

@@ -45,10 +45,31 @@ const initialState = {
     error : null,
     status: LOCAL_CHECK,
   },
-  viewedChannels: [],
-  viewedClaims  : [],
+  channelRequests: {},
+  assetRequests  : {},
+  channels       : {},
+  assets         : {},
 };
 
+/* 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,
+  }
+} */
+
 /*
 Reducers describe how the application's state changes in response to actions
 */
@@ -125,6 +146,23 @@ export default function (state = initialState, action) {
           status: ERROR,
         }),
       });
+    // new actions
+    case actions.ASSET_REQUEST_ADD:
+      return Object.assign({}, state, {
+        assetRequests: Object.assign({}, state.assets, {
+          [action.data.id]: {
+            error  : action.data.error,
+            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,
+    //     }),
+    //   });
     default:
       return state;
   }

react/sagas/index.js

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

react/sagas/show.js

@@ -1,8 +1,63 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
 import * as actions from 'constants/show_action_types';
-import { updateFileAvailability, updateDisplayAssetError } from 'actions/show';
+import { addAssetRequest, 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';
+
+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));
+  }
+  // put a new action to update the store with result
+  if (success) {
+    return yield put(addAssetRequest(id, null, longId));
+  }
+  yield put(addAssetRequest(id, message, 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);
+        if (!success) {
+          reject(message);
+        }
+        resolve(data);
+      })
+      .catch((error) => {
+        reject(error.message);
+      });
+  });
+}
+
+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);
+        }
+        resolve(message);
+      })
+      .catch((error) => {
+        reject(error.message);
+      });
+  });
+}
 
 function* retriveFile (action) {
   const name = action.data.name;
@@ -34,8 +89,12 @@ function* retriveFile (action) {
   } else {
     yield put(updateDisplayAssetError(message));
   }
-}
+};
+
+export function* watchNewAssetRequest () {
+  yield takeLatest(actions.NEW_ASSET_REQUEST, newAssetRequest);
+};
 
 export function* watchFileIsRequested () {
   yield takeLatest(actions.FILE_REQUESTED, retriveFile);
-}
+};