updated channel display to use redux store

react/actions/show.js

@@ -16,10 +16,22 @@ export function updateChannelRequest (channel) {
   };
 };
 
-export function updateChannelData (channelData) {
+export function updateChannelData (name, longId, shortId) {
   return {
     type: actions.CHANNEL_DATA_UPDATE,
-    channelData,
+    name,
+    longId,
+    shortId,
+  };
+};
+
+export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) {
+  return {
+    type: actions.CHANNEL_CLAIMS_UPDATE,
+    claims,
+    currentPage,
+    totalPages,
+    totalClaims,
   };
 };
 

react/constants/show_action_types.js

@@ -1,4 +1,5 @@
 export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE';
 export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE';
 export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
+export const CHANNEL_CLAIMS_UPDATE = 'CHANNEL_CLAIMS_UPDATE';
 export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE';

react/containers/ChannelClaimsDisplay/index.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import View from './view';
+import {updateChannelClaimsData} from 'actions/show';
+
+const mapStateToProps = ({ show }) => {
+  return {
+    name       : show.channel.name,
+    id         : show.channel.id,
+    claims     : show.channel.claimsData.claims,
+    currentPage: show.channel.claimsData.currentPage,
+    totalPages : show.channel.claimsData.totalPages,
+    totalClaims: show.channel.claimsData.totalClaims,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onClaimsDataChange: (claims, currentPage, totalPages, totalClaims) => {
+      dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ChannelClaimsDisplay/view.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import AssetPreview from 'components/AssetPreview';
+import AssetPreview from 'components/AssetPreview/index';
 import request from 'utils/request';
 
 class ChannelClaimsDisplay extends React.Component {
@@ -12,13 +12,11 @@ class ChannelClaimsDisplay extends React.Component {
     this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this);
   }
   componentDidMount () {
-    const channelName = this.props.channelName;
-    const channelClaimId = this.props.channelClaimId || 'none';
-    const page = this.state.page;
-    this.getAndStoreChannelClaims(channelName, channelClaimId, page);
+    this.getAndStoreChannelClaims(this.props.name, this.props.id, this.state.page);
   }
-  getAndStoreChannelClaims (channelName, channelClaimId, page) {
-    const url = `/api/channel-claims/${channelName}/${channelClaimId}/${page}`;
+  getAndStoreChannelClaims (name, id, page) {
+    if (!id) id = 'none';
+    const url = `/api/channel-claims/${name}/${id}/${page}`;
     const that = this;
     return request(url)
       .then(({ success, message, data }) => {
@@ -26,14 +24,7 @@ class ChannelClaimsDisplay extends React.Component {
         if (!success) {
           return that.setState({error: message});
         }
-        that.setState({
-          claims      : data.claims,
-          currentPage : data.currentPage,
-          nextPage    : data.nextPage,
-          previousPage: data.previousPage,
-          totalPages  : data.totalPages,
-          totalResults: data.totalResults,
-        });
+        this.props.onClaimsDataChange(data.claims, data.currentPage, data.totalPages, data.totalResults);
       })
       .catch((error) => {
         that.setState({error: error.message});
@@ -50,12 +41,19 @@ class ChannelClaimsDisplay extends React.Component {
           </div>
         ) : (
           <div className="row row--tall">
-            {this.state.claims && this.state.claims.map((claim, index) => <AssetPreview
-              name={claim.name}
-              claimId={claim.claimId}
-              contentType={claim.contentType}
-              key={index}
-            />)}
+            {this.props.claims &&
+            <div>
+              {this.props.claims.map((claim, index) => <AssetPreview
+                name={claim.name}
+                claimId={claim.claimId}
+                contentType={claim.contentType}
+                key={index}
+              />)}
+              <p>current page: {this.props.currentPage}</p>
+              <p>total pages: {this.props.totalPages}</p>
+              <p>total claims: {this.props.totalClaims}</p>
+            </div>
+            }
           </div>
         )}
       </div>
@@ -63,8 +61,4 @@ class ChannelClaimsDisplay extends React.Component {
   }
 };
 
-// required props
-// channelName
-// channelClaimId
-
 export default ChannelClaimsDisplay;

react/containers/ShowChannel/index.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import View from './view';
+import {updateChannelData} from 'actions/show';
+
+const mapStateToProps = ({ show }) => {
+  return {
+    request: {
+      name: show.request.channel.name,
+      id  : show.request.channel.id,
+    },
+    channel: {
+      name   : show.channel.name,
+      shortId: show.channel.shortId,
+      longId : show.channel.longId,
+    },
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChannelDataChange: (name, longId, shortId) => {
+      dispatch(updateChannelData(name, longId, shortId));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ShowChannel/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import NavBar from 'containers/NavBar';
-import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay';
+import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
 import request from 'utils/request';
 
 class ShowChannel extends React.Component {
@@ -12,12 +12,11 @@ class ShowChannel extends React.Component {
     this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this);
   }
   componentDidMount () {
-    const channelName = this.props.channelName;
-    const channelClaimId = this.props.channelClaimId || 'none';
-    this.getAndStoreChannelData(channelName, channelClaimId);
+    this.getAndStoreChannelData(this.props.request.name, this.props.request.id);
   }
-  getAndStoreChannelData (channelName, channelClaimId) {
-    const url = `/api/channel-data/${channelName}/${channelClaimId}`;
+  getAndStoreChannelData (name, id) {
+    if (!id) id = 'none';
+    const url = `/api/channel-data/${name}/${id}`;
     const that = this;
     return request(url)
       .then(({ success, message, data }) => {
@@ -25,11 +24,7 @@ class ShowChannel extends React.Component {
         if (!success) {
           return that.setState({error: message});
         }
-        that.setState({
-          channelName        : data.channelName,
-          longChannelClaimId : data.longChannelClaimId,
-          shortChannelClaimId: data.shortChannelClaimId,
-        });
+        this.props.onChannelDataChange(data.channelName, data.longChannelClaimId, data.shortChannelClaimId);
       })
       .catch((error) => {
         that.setState({error: error.message});
@@ -48,17 +43,12 @@ class ShowChannel extends React.Component {
         ) : (
           <div className="row row--tall row--padded">
             <div className="column column--10">
-              <h2>channel name: {this.props.channelName}</h2>
-              <p>full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}</p>
-              <p>short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}</p>
+              <h2>channel name: {this.props.channel.name}</h2>
+              <p>full channel id: {this.props.channel.longId ? this.props.channel.longId : 'loading...'}</p>
+              <p>short channel id: {this.props.channel.shortId ? this.props.channel.shortId : 'loading...'}</p>
             </div>
             <div className="column column--10">
-              { (this.state.channelName && this.state.longChannelClaimId) &&
-                <ChannelClaimsDisplay
-                  channelName={this.state.channelName}
-                  channelClaimId={this.state.longChannelClaimId}
-                />
-              }
+              {this.props.channel.name && <ChannelClaimsDisplay/>}
             </div>
           </div>
         )}
@@ -67,9 +57,4 @@ class ShowChannel extends React.Component {
   }
 };
 
-// required props
-// channelName
-// channelClaimId
-
-
 export default ShowChannel;

react/containers/ShowPage/index.js

@@ -4,8 +4,7 @@ import View from './view';
 
 const mapStateToProps = ({ show }) => {
   return {
-    channel: show.request.channel,
-    claim  : show.request.claim,
+    request: show.request,
   };
 };
 

react/containers/ShowPage/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ErrorPage from 'components/ErrorPage';
 import ShowAsset from 'components/ShowAsset';
-import ShowChannel from 'components/ShowChannel';
+import ShowChannel from 'containers/ShowChannel';
 import lbryUri from 'utils/lbryUri';
 
 class ShowPage extends React.Component {
@@ -35,7 +35,6 @@ class ShowPage extends React.Component {
     this.parseAndUpdateClaimOnly(claim);
   }
   parseAndUpdateIdentifierAndClaim (modifier, claim) {
-    // handle case of identifier and claim
     // this is a request for an asset
     // claim will be an asset claim
     // the identifier could be a channel or a claim id
@@ -66,7 +65,6 @@ class ShowPage extends React.Component {
     return this.props.onClaimRequest(requestedClaim);
   }
   parseAndUpdateClaimOnly (claim) {
-    // handle case of just claim
     // this could be a request for an asset or a channel page
     // claim could be an asset claim or a channel claim
     let isChannel, channelName, channelClaimId;
@@ -104,25 +102,23 @@ class ShowPage extends React.Component {
         <ErrorPage error={this.state.error}/>
       );
     }
-    if (this.state.claim) {
-      if (this.state.claim.isChannel) {
+    if (this.props.request) {
+      if (this.props.request.channel) {
         return (
-          <ShowChannel
-            channelName={this.state.claim.channelName}
-            channelClaimId={this.state.claim.channelClaimId}
+          <ShowChannel />
+        );
+      } else if (this.props.request.claim) {
+        return (
+          <ShowAsset
+            modifier={this.props.request.claim.identifier}
+            claim={this.props.request.claim.name}
+            extension={this.props.request.claim.extension}
           />
         );
       }
-      return (
-        <ShowAsset
-          identifier={this.state.identifier} // this.state.url.identifier
-          claim={this.state.claim} // this.state.url.claim
-          isServeRequest={this.state.isServeRequest} // this.state.url.ending
-        />
-      );
     }
     return (
-      <p>Loading...</p>
+      <p>loading...</p>
     );
   }
 };

react/reducers/show.js

@@ -2,71 +2,24 @@ import * as actions from 'constants/show_action_types';
 
 const initialState = {
   request: {
-    channel: {
-      name: null,
-      id  : null,
-    },
-    claim: {
-      name    : null,
-      modifier: {
-        id     : null,
-        channel: {
-          name: null,
-          id  : null,
-        },
-      },
-      extension: null,
+    channel: null,
+    claim  : null,
+  },
+  channel: {
+    name      : null,
+    shortId   : null,
+    longId    : null,
+    claimsData: {
+      claims     : null,
+      currentPage: null,
+      totalPages : null,
+      totalClaims: null,
     },
   },
-  channelData: {
-    channelName : null,
-    claims      : null,
-    currentPage : null,
-    previousPage: null,
-    totalPages  : null,
-    totalResults: null,
-  },
-  claimData: {
-    FileId         : null,
-    address        : null,
-    amount         : null,
-    author         : null,
-    certificateId  : null,
-    channelName    : null,
-    claimId        : null,
-    claimSequence  : null,
-    claimType      : null,
-    contentType    : null,
-    createdAt      : null,
-    decodedClaim   : null,
-    depth          : null,
-    description    : null,
-    effectiveAmount: null,
-    fileExt        : null,
-    hasSignature   : null,
-    height         : null,
-    hex            : null,
-    host           : null,
-    id             : null,
-    language       : null,
-    license        : null,
-    licenseUrl     : null,
-    metadataVersion: null,
-    name           : null,
-    nout           : null,
-    nsfw           : null,
-    outpoint       : null,
-    preview        : null,
-    source         : null,
-    sourceType     : null,
-    sourceVersion  : null,
-    streamVersion  : null,
-    thumbnail      : null,
-    title          : null,
-    txid           : null,
-    updatedAt      : null,
-    validAtHeight  : null,
-    valueVersion   : null,
+  claim: {
+    name: null,
+    id  : null,
+    data: null,
   },
 };
 
@@ -92,11 +45,26 @@ export default function (state = initialState, action) {
       });
     case actions.CHANNEL_DATA_UPDATE:
       return Object.assign({}, state, {
-        channelData: action.channelData,
+        channel: Object.assign({}, state.channel, {
+          name   : action.name,
+          shortId: action.shortId,
+          longId : action.longId,
+        }),
+      });
+    case actions.CHANNEL_CLAIMS_UPDATE:
+      return Object.assign({}, state, {
+        channel: Object.assign({}, state.channel, {
+          claimsData: {
+            claims     : action.claims,
+            currentPage: action.currentPage,
+            totalPages : action.totalPages,
+            totalClaims: action.totalClaims,
+          },
+        }),
       });
     case actions.CLAIM_DATA_UPDATE:
       return Object.assign({}, state, {
-        claimData: action.claimData,
+        displayClaim: action.claimData,
       });
     default:
       return state;