updated show asset components to use redux state

react/actions/show.js

@@ -35,8 +35,9 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC
   };
 };
 
-export function updateClaimData (claimData) {
+export function updateClaimData (data) {
   return {
-    type: actions.CHANNEL_DATA_UPDATE,
+    type: actions.CLAIM_DATA_UPDATE,
+    data,
   };
 };

react/components/ShowAssetDetails/index.js

@@ -27,7 +27,7 @@ class ShowDetails extends React.Component {
                 <AssetDisplay
                 name={this.props.claimData.name}
                 claimId={this.props.claimData.claimId}
-                src={`/${this.props.claimId}/${this.props.name}.${this.props.fileExt}`}
+                src={`/${this.props.claimData.claimId}/${this.props.claimData.name}.${this.props.claimData.fileExt}`}
                 contentType={this.props.claimData.contentType}
                 fileExt={this.props.claimData.fileExt}
                 thumbnail={this.props.claimData.thumbnail}

react/components/ShowAssetLite/index.js

@@ -14,7 +14,7 @@ class ShowLite extends React.Component {
           <AssetDisplay
             name={this.props.claimData.name}
             claimId={this.props.claimData.claimId}
-            src={`/${this.props.claimId}/${this.props.name}.${this.props.fileExt}`}
+            src={`/${this.props.claimData.claimId}/${this.props.claimData.name}.${this.props.claimData.fileExt}`}
             contentType={this.props.claimData.contentType}
             fileExt={this.props.claimData.fileExt}
             thumbnail={this.props.claimData.thumbnail}

react/containers/ShowAsset/index.js

@@ -0,0 +1,24 @@
+import { updateClaimData } from 'actions/show';
+import { connect } from 'react-redux';
+import View from './view';
+
+const mapStateToProps = ({ show }) => {
+  return {
+    request: {
+      modifier : show.request.claim.modifier,
+      claim    : show.request.claim.name,
+      extension: show.request.claim.extension,
+    },
+    claim: show.claim,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onClaimDataChange: (data) => {
+      dispatch(updateClaimData(data));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ShowAsset/view.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import ShowAssetLite from 'components/ShowAssetLite';
-import ShowAssetDetails from 'components/ShowAssetDetails';
+import ShowAssetLite from 'components/ShowAssetLite/index';
+import ShowAssetDetails from 'components/ShowAssetDetails/index';
 import request from 'utils/request';
 
 class ShowAsset extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      claimData: null,
-      error    : null,
+      error: null,
     };
     this.getLongClaimId = this.getLongClaimId.bind(this);
     this.getClaimData = this.getClaimData.bind(this);
@@ -16,18 +15,19 @@ class ShowAsset extends React.Component {
   componentDidMount () {
     console.log('ShowAsset did mount');
     console.log('ShowAsset props', this.props);
+    const modifier = this.props.request.modifier;
+    const name = this.props.request.claim;
+    // create request params
     let body = {};
-    if (this.props.identifier) {
-      if (this.props.identifier.isChannel) {
-        body['channelName'] = this.props.identifier.channelName;
-        body['channelClaimId'] = this.props.identifier.channelClaimId;
+    if (modifier) {
+      if (modifier.channel) {
+        body['channelName'] = modifier.channel.name;
+        body['channelClaimId'] = modifier.channel.id;
       } else {
-        body['claimId'] = this.props.identifier.claimId;
+        body['claimId'] = modifier.id;
       }
     }
-    if (this.props.claim) {
-      body['claimName'] = this.props.claim.claimName;
-    }
+    body['claimName'] = name;
     const params = {
       method : 'POST',
       headers: new Headers({
@@ -35,13 +35,14 @@ class ShowAsset extends React.Component {
       }),
       body: JSON.stringify(body),
     }
+    // make request
     const that = this;
     this.getLongClaimId(params)
       .then(claimLongId => {
-        return that.getClaimData(this.props.claim.claimName, claimLongId);
+        return that.getClaimData(name, claimLongId);
       })
       .then(claimData => {
-        this.setState({ claimData });
+        this.props.onClaimDataChange(claimData);
       })
       .catch(error => {
         this.setState({error});
@@ -81,26 +82,21 @@ class ShowAsset extends React.Component {
     });
   }
   render () {
-    if (this.props.isServeRequest) {
+    if (this.props.request.extension) {
       return (
         <ShowAssetLite
           error={this.state.error}
-          claimData={this.state.claimData}
+          claimData={this.props.claim}
         />
       );
     }
     return (
       <ShowAssetDetails
         error={this.state.error}
-        claimData={this.state.claimData}
+        claimData={this.props.claim}
       />
     );
   }
 };
 
-// required props
-// identifier
-// claim
-// isServeRequest
-
 export default ShowAsset;

react/containers/ShowPage/view.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ErrorPage from 'components/ErrorPage';
-import ShowAsset from 'components/ShowAsset';
+import ShowAsset from 'containers/ShowAsset';
 import ShowChannel from 'containers/ShowChannel';
 import lbryUri from 'utils/lbryUri';
 
@@ -109,11 +109,7 @@ class ShowPage extends React.Component {
         );
       } 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}
-          />
+          <ShowAsset />
         );
       }
     }

react/reducers/show.js

@@ -16,11 +16,7 @@ const initialState = {
       totalClaims: null,
     },
   },
-  claim: {
-    name: null,
-    id  : null,
-    data: null,
-  },
+  claim: null,
 };
 
 /*
@@ -64,7 +60,7 @@ export default function (state = initialState, action) {
       });
     case actions.CLAIM_DATA_UPDATE:
       return Object.assign({}, state, {
-        displayClaim: action.claimData,
+        claim: action.data,
       });
     default:
       return state;