asset and channel display working

react/actions/show.js

@@ -107,10 +107,10 @@ export function showNewChannel (id, channelData) {
   };
 };
 
-export function updateShowChannel (error, name, shortId, longId, claimData) {
+export function updateShowChannel (error, name, shortId, longId, claimsData) {
   return {
     type: actions.SHOW_CHANNEL_UPDATE,
-    data: { error, name, shortId, longId, claimData },
+    data: { error, name, shortId, longId, claimsData },
   };
 };
 

react/api/assetApi.js

@@ -1,6 +1,7 @@
 import Request from 'utils/request';
 
 export function getLongClaimId (name, modifier) {
+  console.log('getting long claim id for asset:', name, modifier);
   let body = {};
   // create request params
   if (modifier) {
@@ -26,11 +27,13 @@ export function getLongClaimId (name, modifier) {
 };
 
 export function getShortId (name, claimId) {
+  console.log('getting short id for asset:', name, claimId);
   const url = `/api/claim/short-id/${claimId}/${name}`;
   return Request(url);
 };
 
 export function getClaimData (name, claimId) {
+  console.log('getting claim data for asset:', name, claimId);
   const url = `/api/claim/data/${name}/${claimId}`;
   return Request(url);
 };

react/containers/ChannelClaimsDisplay/index.js

@@ -2,26 +2,27 @@ import { connect } from 'react-redux';
 import { updateChannelClaimsData } from 'actions/show';
 import View from './view';
 
-const mapStateToProps = ({ show : { showChannel: { channelData, channelClaimsData } } }) => {
+const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsData } } }) => {
   return {
+    error      : error,
     name       : channelData.name,
     longId     : channelData.longId,
-    claims     : channelClaimsData.claims,
-    currentPage: channelClaimsData.currentPage,
-    totalPages : channelClaimsData.totalPages,
-    totalClaims: channelClaimsData.totalClaims,
+    claims     : claimsData.claims,
+    currentPage: claimsData.currentPage,
+    totalPages : claimsData.totalPages,
+    totalClaims: claimsData.totalClaims,
   };
 };
 
-const mapDispatchToProps = dispatch => {
-  return {
-    onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => {
-      dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims));
-    },
-    onChannelClaimsDataClear: () => {
-      dispatch(updateChannelClaimsData(null, null, null, null));
-    },
-  };
-};
+// const mapDispatchToProps = dispatch => {
+//   return {
+//     onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => {
+//       dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims));
+//     },
+//     onChannelClaimsDataClear: () => {
+//       dispatch(updateChannelClaimsData(null, null, null, null));
+//     },
+//   };
+// };
 
-export default connect(mapStateToProps, mapDispatchToProps)(View);
+export default connect(mapStateToProps, null)(View);

react/containers/ChannelClaimsDisplay/view.jsx

@@ -1,54 +1,38 @@
 import React from 'react';
 import AssetPreview from 'components/AssetPreview';
-import request from 'utils/request';
 
 class ChannelClaimsDisplay extends React.Component {
   constructor (props) {
     super(props);
-    this.state = {
-      error: null,
-    };
     this.showNextResultsPage = this.showNextResultsPage.bind(this);
     this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
   }
-  componentDidMount () {
-    const name = this.props.name;
-    const longId = this.props.longId;
-    this.updateClaimsData(name, longId, 1);
-  }
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.name !== this.props.name || nextProps.longId !== this.props.longId) {
-      this.updateClaimsData(nextProps.name, nextProps.longId, 1);
-    }
-  }
-  updateClaimsData (name, longId, page) {
-    console.log('this function has been moved into the redux sagas');
-  }
-  componentWillUnmount () {
-    this.props.onChannelClaimsDataClear();
+  showNewPage (page) {
+    console.log(`update claims data with new page ${page}`);
   }
   showPreviousResultsPage () {
     const previousPage = parseInt(this.props.currentPage) - 1;
-    this.updateClaimsData(this.props.name, this.props.longId, previousPage);
+    this.showNewPage(previousPage);
   }
   showNextResultsPage () {
     const nextPage = parseInt(this.props.currentPage) + 1;
-    this.updateClaimsData(this.props.name, this.props.longId, nextPage);
+    this.showNewPage(nextPage);
   }
   render () {
+    const { error, claims, currentPage, totalPages } = this.props;
     return (
       <div>
-        {this.state.error ? (
+        {error ? (
           <div className="row">
             <div className="column column--10">
-              <p>{this.state.error}</p>
+              <p>{error}</p>
             </div>
           </div>
         ) : (
           <div className="row row--tall">
-            {this.props.claims &&
+            {claims &&
             <div>
-              {this.props.claims.map((claim, index) => <AssetPreview
+              {claims.map((claim, index) => <AssetPreview
                 name={claim.name}
                 claimId={claim.claimId}
                 fileExt={claim.fileExt}
@@ -56,10 +40,10 @@ class ChannelClaimsDisplay extends React.Component {
                 key={`${claim.name}-${index}`}
               />)}
               <div>
-                {(this.props.currentPage > 1) &&
+                {(currentPage > 1) &&
                 <button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
                 }
-                {(this.props.currentPage < this.props.totalPages) &&
+                {(currentPage < totalPages) &&
                 <button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
                 }
               </div>

react/containers/ShowAsset/view.jsx

@@ -25,7 +25,7 @@ class ShowAsset extends React.Component {
   }
   componentWillReceiveProps (nextProps) {
     // case where componentDidMount triggered new props
-    if (requestIsNewRequest(nextProps, this.props)) {
+    if (requestIsAnAssetRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) {
       const { requestId, requestName, requestModifier, assetRequests } = nextProps;
       const existingRequest = assetRequests[requestId];
       if (existingRequest) { // case: the assetRequest exists
@@ -34,7 +34,7 @@ class ShowAsset extends React.Component {
         this.onNewRequest(requestId, requestName, requestModifier);
       }
     } else {
-      console.log('show.assetRequestId did not update');
+      console.log('ShowAsset receiving new props -> request.id did not update', nextProps);
     }
   }
   onNewRequest (id, requestName, requestModifier) {

react/containers/ShowChannel/index.js

@@ -30,8 +30,8 @@ const mapDispatchToProps = dispatch => {
     onShowNewChannel: (id, channelData) => {
       dispatch(showNewChannel(id, channelData));
     },
-    onShowExistingChannel: (error, name, shortId, longId, claimData) => {
-      dispatch(updateShowChannel(error, name, shortId, longId, claimData));
+    onShowExistingChannel: (error, name, shortId, longId, claimsData) => {
+      dispatch(updateShowChannel(error, name, shortId, longId, claimsData));
     },
     onShowChannelClear: () => {
       dispatch(clearShowChannel());

react/containers/ShowChannel/view.jsx

@@ -32,6 +32,8 @@ class ShowChannel extends React.Component {
       } else {
         this.onNewChannelRequest(requestId, requestChannelName, requestChannelId);
       }
+    } else {
+      console.log('ShowChannel receiving new props -> request.id did not update', nextProps);
     };
   }
   onNewChannelRequest (requestId, requestName, requestChannelId) {
@@ -47,7 +49,7 @@ class ShowChannel extends React.Component {
     const channelRecordId = `c#${channelData.name}#${channelData.longId}`;
     const existingChannel = channelList[channelRecordId];
     if (existingChannel) {
-      this.showExistingChannel(channelRecordId, existingChannel);
+      this.showExistingChannel(existingChannel);
     } else {
       this.showNewChannel(channelRecordId, channelData);
     }
@@ -56,8 +58,9 @@ class ShowChannel extends React.Component {
     this.props.onShowNewChannel(channelRecordId, channelData);
   };
   showExistingChannel (existingChannel) {
-    const { error, channelData: {name, shortId, longId}, claimData } = existingChannel;
-    this.props.onShowExistingChannel(error, name, shortId, longId, claimData);
+    console.log('showExistingChannel:', existingChannel);
+    const { error, channelData: {name, shortId, longId}, claimsData } = existingChannel;
+    this.props.onShowExistingChannel(error, name, shortId, longId, claimsData);
   };
   componentWillUnmount () {
     console.log('ShowChannel will unmount');

react/reducers/show.js

@@ -16,7 +16,7 @@ const initialState = {
       shortId: null,
       longId : null,
     },
-    channelClaimsData: {
+    claimsData: {
       claims     : null,
       currentPage: null,
       totalPages : null,
@@ -147,7 +147,7 @@ export default function (state = initialState, action) {
             shortId: action.data.shortId,
             longId : action.data.longId,
           },
-          claimData: action.data.claimData,
+          claimsData: action.data.claimsData,
         },
       });
     case actions.SHOW_CHANNEL_CLEAR:
@@ -159,7 +159,7 @@ export default function (state = initialState, action) {
             shortId: null,
             longId : null,
           },
-          channelClaimsData: {
+          claimsData: {
             claims     : null,
             currentPage: null,
             totalPages : null,

react/sagas/show.js

@@ -118,7 +118,8 @@ function* getNewChannelDataAndShowChannel (action) {
     // yield put(addNewChannelToChannelList(id, message, null, null));
   }
   yield put(updateShowChannel(null, name, shortId, longId, claimsData));
-  yield put(addNewChannelToChannelList(id, null, name, shortId, longId, claimsData));
+  const channelData = {name, shortId, longId};
+  yield put(addNewChannelToChannelList(id, null, channelData, claimsData));
 }
 
 export function* watchNewAssetRequest () {