converted channel display to use id

react/actions/show.js

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

react/containers/ChannelClaimsDisplay/index.js

@@ -2,15 +2,9 @@ import { connect } from 'react-redux';
 import { } from 'actions/show';
 import View from './view';
 
-const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsData } } }) => {
+const mapStateToProps = ({ show }) => {
   return {
-    error      : error,
+    channel: show.channelList[show.showChannel.id],
-    name       : channelData.name,
-    longId     : channelData.longId,
-    claims     : claimsData.claims,
-    currentPage: claimsData.currentPage,
-    totalPages : claimsData.totalPages,
-    totalClaims: claimsData.totalClaims,
   };
 };
 

react/containers/ChannelClaimsDisplay/view.jsx

@@ -20,7 +20,7 @@ class ChannelClaimsDisplay extends React.Component {
     this.showNewPage(nextPage);
   }
   render () {
-    const { error, claims, currentPage, totalPages } = this.props;
+    const { channel: { error, claimsData: { claims, currentPage, totalPages } } } = this.props;
     return (
       <div>
         {error ? (

react/containers/ShowChannel/index.js

@@ -13,25 +13,26 @@ const mapStateToProps = ({ show }) => {
     channelList       : show.channelList,
     // show channel
     error             : show.showChannel.error,
-    name              : show.showChannel.channelData.name,
+    id                : show.showChannel.id,
-    shortId           : show.showChannel.channelData.shortId,
+    channel           : show.channelList[show.showChannel.id],
-    longId            : show.showChannel.channelData.longId,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
+    // request
     onNewChannelRequest (id, name, channelId) {
       dispatch(newChannelRequest(id, name, channelId));
     },
     onRequestError: (error) => {
       dispatch(updateRequestError(error, null, null));
     },
+    // show channel
     onShowNewChannel: (channelData) => {
       dispatch(showNewChannel(channelData));
     },
-    onShowExistingChannel: (error, name, shortId, longId, claimsData) => {
+    onShowExistingChannel: (id) => {
-      dispatch(updateShowChannel(error, name, shortId, longId, claimsData));
+      dispatch(updateShowChannel(null, id));
     },
     onShowChannelClear: () => {
       dispatch(clearShowChannel());

react/containers/ShowChannel/view.jsx

@@ -49,7 +49,7 @@ class ShowChannel extends React.Component {
     const channelRecordId = `c#${channelData.name}#${channelData.longId}`;
     const existingChannel = channelList[channelRecordId];
     if (existingChannel) {
-      this.showExistingChannel(existingChannel);
+      this.showExistingChannel(channelRecordId);
     } else {
       this.showNewChannel(channelData);
     }
@@ -57,34 +57,39 @@ class ShowChannel extends React.Component {
   showNewChannel (channelData) {
     this.props.onShowNewChannel(channelData);
   };
-  showExistingChannel (existingChannel) {
+  showExistingChannel (channelRecordId) {
-    const { error, channelData: {name, shortId, longId}, claimsData } = existingChannel;
+    this.props.onShowExistingChannel(channelRecordId);
-    this.props.onShowExistingChannel(error, name, shortId, longId, claimsData);
   };
   componentWillUnmount () {
     this.props.onShowChannelClear();
   }
   render () {
-    const { error, name, longId, shortId } = this.props;
+    const { error, channel } = this.props;
     if (error) {
       return (
         <ErrorPage error={error}/>
       );
     };
-    return (
+    if (channel) {
-      <div>
+      const { channelData: { name, longId, shortId } } = channel;
-        <NavBar/>
+      return (
-        <div className="row row--tall row--padded">
+        <div>
-          <div className="column column--10">
+          <NavBar/>
-            <h2>channel name: {name ? name : 'loading...'}</h2>
+          <div className="row row--tall row--padded">
-            <p className={'fine-print'}>full channel id: {longId ? longId : 'loading...'}</p>
+            <div className="column column--10">
-            <p className={'fine-print'}>short channel id: {shortId ? shortId : 'loading...'}</p>
+              <h2>channel name: {name ? name : 'loading...'}</h2>
-          </div>
+              <p className={'fine-print'}>full channel id: {longId ? longId : 'loading...'}</p>
-          <div className="column column--10">
+              <p className={'fine-print'}>short channel id: {shortId ? shortId : 'loading...'}</p>
-            {(name && longId) && <ChannelClaimsDisplay />}
+            </div>
+            <div className="column column--10">
+              {(name && longId) && <ChannelClaimsDisplay />}
+            </div>
           </div>
         </div>
-      </div>
+      );
+    };
+    return (
+      <ErrorPage error={'loading channel data...'}/>
     );
   }
 };

react/reducers/show.js

@@ -10,18 +10,8 @@ const initialState = {
     requestId: null,
   },
   showChannel: {
-    error      : null,
+    error: null,
-    channelData: {
+    id   : null,
-      name   : null,
-      shortId: null,
-      longId : null,
-    },
-    claimsData: {
-      claims     : null,
-      currentPage: null,
-      totalPages : null,
-      totalClaims: null,
-    },
   },
   showAsset: {
     error: null,
@@ -132,30 +122,15 @@ export default function (state = initialState, action) {
     case actions.SHOW_CHANNEL_UPDATE:
       return Object.assign({}, state, {
         showChannel: {
-          error      : action.data.error,
+          error: action.data.error,
-          channelData: {
+          id   : action.data.id,
-            name   : action.data.name,
-            shortId: action.data.shortId,
-            longId : action.data.longId,
-          },
-          claimsData: action.data.claimsData,
         },
       });
     case actions.SHOW_CHANNEL_CLEAR:
       return Object.assign({}, state, {
         showChannel: {
-          error      : null,
+          error: null,
-          channelData: {
+          id   : null,
-            name   : null,
-            shortId: null,
-            longId : null,
-          },
-          claimsData: {
-            claims     : null,
-            currentPage: null,
-            totalPages : null,
-            totalClaims: null,
-          },
         },
       });
     // add channel to channel list

react/sagas/show_asset.js

@@ -26,8 +26,8 @@ function* getAssetDataAndShowAsset (action) {
   if (!success) {
     return yield put(updateShowAsset(message, null));
   }
-  yield put(updateShowAsset(null, id));
   yield put(upsertAssetToAssetList(id, null, name, claimId, shortId, claimData));
+  yield put(updateShowAsset(null, id));
 }
 
 export function* watchShowNewAsset () {

react/sagas/show_channel.js

@@ -9,14 +9,14 @@ function* getNewChannelDataAndShowChannel (action) {
   try {
     ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1));
   } catch (error) {
-    return yield put(updateShowChannel(error.message, name, shortId, longId));
+    return yield put(updateShowChannel(error.message, null));
   }
   if (!success) {
-    return yield put(updateShowChannel(message, name, shortId, longId));
+    return yield put(updateShowChannel(message, null));
   }
-  yield put(updateShowChannel(null, name, shortId, longId, claimsData));
   const channelData = {name, shortId, longId};
   yield put(addNewChannelToChannelList(id, null, channelData, claimsData));
+  yield put(updateShowChannel(null, id));
 }
 
 export function* watchShowNewChannel () {