connected show asset components directly to redux store

react/actions/show.js

@@ -2,7 +2,7 @@ import * as actions from 'constants/show_action_types';
 
 export function updateRequestWithChannelRequest (name, id) {
   return {
-    type: actions.REQUEST_UPDATE_CHANNEL,
+    type: actions.REQUEST_CHANNEL_UPDATE,
     data: {
       name,
       id,
@@ -12,7 +12,7 @@ export function updateRequestWithChannelRequest (name, id) {
 
 export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) {
   return {
-    type: actions.REQUEST_UPDATE_CLAIM,
+    type: actions.REQUEST_CLAIM_UPDATE,
     data: {
       name,
       modifier: {
@@ -27,6 +27,13 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId,
   };
 };
 
+export function updateRequestError (error) {
+  return {
+    type: actions.REQUEST_ERROR_UPDATE,
+    data: error,
+  };
+}
+
 export function updateChannelData (name, longId, shortId) {
   return {
     type: actions.CHANNEL_DATA_UPDATE,
@@ -70,9 +77,9 @@ export function fileRequested (name, claimId) {
   };
 };
 
-export function updateFileIsAvailable (status) {
+export function updateFileAvailability (status) {
   return {
-    type: actions.FILE_IS_AVAILABLE_UPDATE,
+    type: actions.FILE_AVAILABILITY_UPDATE,
     data: status,
   };
 };
@@ -83,3 +90,10 @@ export function updateShowAssetError (error) {
     data: error,
   };
 };
+
+export function updateDisplayAssetError (error) {
+  return {
+    type: actions.DISPLAY_ASSET_ERROR,
+    data: error,
+  };
+};

react/components/AssetDisplay/index.js

@@ -4,8 +4,8 @@ import { fileRequested } from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
-    error    : show.showAsset.error,
+    error    : show.displayAsset.error,
-    status   : show.showAsset.status,
+    status   : show.displayAsset.status,
     claimData: show.showAsset.claimData,
   };
 };

react/components/AssetDisplay/view.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProgressBar from 'components/ProgressBar/index';
+import ProgressBar from 'components/ProgressBar';
 import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_display_states';
 
 class AssetDisplay extends React.Component {
@@ -7,9 +7,7 @@ class AssetDisplay extends React.Component {
     this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId);
   }
   render () {
-    const status = this.props.status;
+    const { status, error, claimData: { name, claimId, contentType, fileExt, thumbnail } } = this.props;
-    const error = this.props.error;
-    const { name, claimId, contentType, fileExt, thumbnail } = this.props.claimData;
     return (
       <div id="asset-display-component">
         {(status === LOCAL_CHECK) &&

react/components/AssetInfo/index.js

@@ -1,179 +1,19 @@
-import React from 'react';
+import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import View from './view';
-import { Link } from 'react-router-dom';
 
-class AssetInfo extends React.Component {
+const mapStateToProps = ({ show }) => {
-  constructor (props) {
+  return {
-    super(props);
+    shortId      : show.showAsset.shortId,
-    this.state = {
+    channelName  : show.showAsset.claimData.channelName,
-      showDetails: false,
+    certificateId: show.showAsset.claimData.certificateId,
+    description  : show.showAsset.claimData.description,
+    name         : show.showAsset.claimData.name,
+    claimId      : show.showAsset.claimData.claimId,
+    fileExt      : show.showAsset.claimData.fileExt,
+    contentType  : show.showAsset.claimData.contentType,
+    thumbnail    : show.showAsset.claimData.thumbnail,
+    host         : show.showAsset.claimData.host,
   };
-    this.toggleDetails = this.toggleDetails.bind(this);
-    this.copyToClipboard = this.copyToClipboard.bind(this);
-  }
-  toggleDetails () {
-    if (this.state.showDetails) {
-      return this.setState({showDetails: false});
-    }
-    this.setState({showDetails: true});
-  }
-  copyToClipboard (event) {
-    var elementToCopy = event.target.dataset.elementtocopy;
-    var element = document.getElementById(elementToCopy);
-    element.select();
-    try {
-      document.execCommand('copy');
-    } catch (err) {
-      this.setState({error: 'Oops, unable to copy'});
-    }
-  }
-  render () {
-    const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props;
-    return (
-      <div>
-        {channelName &&
-        <div className="row row--padded row--wide row--no-top">
-          <div className="column column--2 column--med-10">
-            <span className="text">Channel:</span>
-          </div>
-          <div className="column column--8 column--med-10">
-            <span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
-          </div>
-        </div>
-        }
-
-        {description &&
-        <div className="row row--padded row--wide row--no-top">
-          <span className="text">{description}</span>
-        </div>
-        }
-
-        <div className="row row--padded row--wide row--no-top">
-          <div id="show-short-link">
-            <div className="column column--2 column--med-10">
-              <Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
-                className="text">Link:</span></Link>
-            </div>
-            <div className="column column--8 column--med-10">
-              <div className="row row--short row--wide">
-                <div className="column column--7">
-                  <div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
-                  <input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
-                         spellCheck="false"
-                         value={`${host}/${shortId}/${name}.${fileExt}`}
-                         onClick={this.select}/>
-                </div>
-                <div className="column column--1"> </div>
-                <div className="column column--2">
-                  <button className="button--primary" data-elementtocopy="short-link"
-                          onClick={this.copyToClipboard}>copy
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div id="show-embed-code">
-            <div className="column column--2 column--med-10">
-              <span className="text">Embed:</span>
-            </div>
-            <div className="column column--8 column--med-10">
-              <div className="row row--short row--wide">
-                <div className="column column--7">
-                  <div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
-                  {(contentType === 'video/mp4') ? (
-                    <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
-                           onClick={this.select} spellCheck="false"
-                           value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
-                  ) : (
-                    <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
-                           onClick={this.select} spellCheck="false"
-                           value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
-                    />
-                  )}
-                </div>
-                <div className="column column--1"> </div>
-                <div className="column column--2">
-                  <button className="button--primary" data-elementtocopy="embed-text"
-                          onClick={this.copyToClipboard}>copy
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div id="show-share-buttons">
-          <div className="row row--padded row--wide row--no-top">
-            <div className="column column--2 column--med-10">
-              <span className="text">Share:</span>
-            </div>
-            <div className="column column--7 column--med-10">
-              <div
-                className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
-                <a className="link--primary" target="_blank"
-                   href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
-                <a className="link--primary" target="_blank"
-                   href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
-                <a className="link--primary" target="_blank"
-                   href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
-                <a className="link--primary" target="_blank"
-                   href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        { this.state.showDetails &&
-          <div>
-            <div className="row--padded row--wide row--no-top">
-              <div>
-                <div className="column column--2 column--med-10">
-                  <span className="text">Claim Name:</span>
-                </div><div className="column column--8 column--med-10">
-                  {name}
-                </div>
-              </div>
-              <div>
-                <div className="column column--2 column--med-10">
-                  <span className="text">Claim Id:</span>
-                </div><div className="column column--8 column--med-10">
-                  {claimId}
-                </div>
-              </div>
-              <div>
-                <div className="column column--2 column--med-10">
-                  <span className="text">File Type:</span>
-                </div><div className="column column--8 column--med-10">
-                  {contentType ? `${contentType}` : 'unknown'}
-                </div>
-              </div>
-            </div>
-            <div className="row--padded row--wide row--no-top">
-              <div className="column column--10">
-                <a target="_blank" href="https://lbry.io/dmca">Report</a>
-              </div>
-            </div>
-          </div>
-        }
-        <div className="row row--wide">
-          <button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
-        </div>
-      </div>
-    );
-  }
 };
 
-AssetInfo.propTypes = {
+export default connect(mapStateToProps, null)(View);
-  channelName  : PropTypes.string,
-  certificateId: PropTypes.string,
-  description  : PropTypes.string,
-  shortId      : PropTypes.string.isRequired,
-  name         : PropTypes.string.isRequired,
-  claimId      : PropTypes.string.isRequired,
-  contentType  : PropTypes.string.isRequired,
-  fileExt      : PropTypes.string.isRequired,
-  thumbnail    : PropTypes.string,
-  host         : PropTypes.string.isRequired,
-};
-
-export default AssetInfo;

react/components/AssetInfo/view.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+class AssetInfo extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      showDetails: false,
+    };
+    this.toggleDetails = this.toggleDetails.bind(this);
+    this.copyToClipboard = this.copyToClipboard.bind(this);
+  }
+  toggleDetails () {
+    if (this.state.showDetails) {
+      return this.setState({showDetails: false});
+    }
+    this.setState({showDetails: true});
+  }
+  copyToClipboard (event) {
+    var elementToCopy = event.target.dataset.elementtocopy;
+    var element = document.getElementById(elementToCopy);
+    element.select();
+    try {
+      document.execCommand('copy');
+    } catch (err) {
+      this.setState({error: 'Oops, unable to copy'});
+    }
+  }
+  render () {
+    const { shortId, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } = this.props;
+    return (
+      <div>
+        {channelName &&
+        <div className="row row--padded row--wide row--no-top">
+          <div className="column column--2 column--med-10">
+            <span className="text">Channel:</span>
+          </div>
+          <div className="column column--8 column--med-10">
+            <span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
+          </div>
+        </div>
+        }
+
+        {description &&
+        <div className="row row--padded row--wide row--no-top">
+          <span className="text">{description}</span>
+        </div>
+        }
+
+        <div className="row row--padded row--wide row--no-top">
+          <div id="show-short-link">
+            <div className="column column--2 column--med-10">
+              <Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
+                className="text">Link:</span></Link>
+            </div>
+            <div className="column column--8 column--med-10">
+              <div className="row row--short row--wide">
+                <div className="column column--7">
+                  <div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
+                  <input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
+                         spellCheck="false"
+                         value={`${host}/${shortId}/${name}.${fileExt}`}
+                         onClick={this.select}/>
+                </div>
+                <div className="column column--1"> </div>
+                <div className="column column--2">
+                  <button className="button--primary" data-elementtocopy="short-link"
+                          onClick={this.copyToClipboard}>copy
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="show-embed-code">
+            <div className="column column--2 column--med-10">
+              <span className="text">Embed:</span>
+            </div>
+            <div className="column column--8 column--med-10">
+              <div className="row row--short row--wide">
+                <div className="column column--7">
+                  <div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
+                  {(contentType === 'video/mp4') ? (
+                    <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
+                           onClick={this.select} spellCheck="false"
+                           value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
+                  ) : (
+                    <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
+                           onClick={this.select} spellCheck="false"
+                           value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
+                    />
+                  )}
+                </div>
+                <div className="column column--1"> </div>
+                <div className="column column--2">
+                  <button className="button--primary" data-elementtocopy="embed-text"
+                          onClick={this.copyToClipboard}>copy
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="show-share-buttons">
+          <div className="row row--padded row--wide row--no-top">
+            <div className="column column--2 column--med-10">
+              <span className="text">Share:</span>
+            </div>
+            <div className="column column--7 column--med-10">
+              <div
+                className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
+                <a className="link--primary" target="_blank"
+                   href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
+                <a className="link--primary" target="_blank"
+                   href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
+                <a className="link--primary" target="_blank"
+                   href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
+                <a className="link--primary" target="_blank"
+                   href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        { this.state.showDetails &&
+        <div>
+          <div className="row--padded row--wide row--no-top">
+            <div>
+              <div className="column column--2 column--med-10">
+                <span className="text">Claim Name:</span>
+              </div><div className="column column--8 column--med-10">
+              {name}
+            </div>
+            </div>
+            <div>
+              <div className="column column--2 column--med-10">
+                <span className="text">Claim Id:</span>
+              </div><div className="column column--8 column--med-10">
+              {claimId}
+            </div>
+            </div>
+            <div>
+              <div className="column column--2 column--med-10">
+                <span className="text">File Type:</span>
+              </div><div className="column column--8 column--med-10">
+              {contentType ? `${contentType}` : 'unknown'}
+            </div>
+            </div>
+          </div>
+          <div className="row--padded row--wide row--no-top">
+            <div className="column column--10">
+              <a target="_blank" href="https://lbry.io/dmca">Report</a>
+            </div>
+          </div>
+        </div>
+        }
+        <div className="row row--wide">
+          <button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default AssetInfo;

react/components/AssetTitle/index.js

@@ -1,11 +1,10 @@
-import React from 'react';
+import { connect } from 'react-redux';
+import View from './view';
 
-const AssetTitle = ({title}) => {
+const mapStateToProps = ({ show }) => {
-  return (
+  return {
-    <div>
+    title: show.showAsset.claimData.title,
-      <span className="text--large">{title}</span>
+  };
-    </div>
-  );
 };
 
-export default AssetTitle;
+export default connect(mapStateToProps, null)(View);

react/components/AssetTitle/view.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const AssetTitle = ({title}) => {
+  return (
+    <div>
+      <span className="text--large">{title}</span>
+    </div>
+  );
+};
+
+export default AssetTitle;

react/components/ShowAssetDetails/index.js

@@ -1,57 +1,10 @@
-import React from 'react';
+import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import View from './view';
-import NavBar from 'containers/NavBar';
-import AssetTitle from 'components/AssetTitle';
-import AssetDisplay from 'containers/AssetDisplay';
-import AssetInfo from 'components/AssetInfo';
 
-class ShowAssetDetails extends React.Component {
+const mapStateToProps = ({ show }) => {
-  render () {
+  return {
-    const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props;
+    claimData: show.showAsset.claimData,
-    return (
+  };
-      <div>
-        <NavBar/>
-          {error &&
-          <div className="row row--padded">
-            <p>{error}</p>
-          </div>
-          }
-          {this.props.claimData &&
-          <div className="row row--tall row--padded">
-            <div className="column column--10">
-              <AssetTitle title={title}/>
-            </div>
-            <div className="column column--5 column--sml-10 align-content-top">
-              <div className="row row--padded">
-                <AssetDisplay />
-              </div>
-            </div><div className="column column--5 column--sml-10 align-content-top">
-              <div className="row row--padded">
-              <AssetInfo
-                channelName={channelName}
-                certificateId={certificateId}
-                description={description}
-                name={name}
-                claimId={claimId}
-                fileExt={fileExt}
-                contentType={contentType}
-                thumbnail={thumbnail}
-                host={host}
-                shortId={shortId}
-              />
-              </div>
-            </div>
-          </div>
-          }
-        </div>
-    );
-  }
 };
 
-ShowAssetDetails.propTypes = {
+export default connect(mapStateToProps, null)(View);
-  error    : PropTypes.string,
-  claimData: PropTypes.object.isRequired,
-  shortId  : PropTypes.string.isRequired,
-};
-
-export default ShowAssetDetails;

react/components/ShowAssetDetails/view.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NavBar from 'containers/NavBar';
+import AssetTitle from 'components/AssetTitle';
+import AssetDisplay from 'components/AssetDisplay';
+import AssetInfo from 'components/AssetInfo';
+
+class ShowAssetDetails extends React.Component {
+  render () {
+    const { claimData } = this.props;
+    return (
+      <div>
+        <NavBar/>
+        {claimData &&
+        <div className="row row--tall row--padded">
+          <div className="column column--10">
+            <AssetTitle />
+          </div>
+          <div className="column column--5 column--sml-10 align-content-top">
+            <div className="row row--padded">
+              <AssetDisplay />
+            </div>
+          </div><div className="column column--5 column--sml-10 align-content-top">
+          <div className="row row--padded">
+            <AssetInfo />
+          </div>
+        </div>
+        </div>
+        }
+      </div>
+    );
+  }
+};
+
+ShowAssetDetails.propTypes = {
+  error: PropTypes.string,
+};
+
+export default ShowAssetDetails;

react/components/ShowAssetLite/index.js

@@ -1,30 +1,11 @@
-import React from 'react';
+import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
+import View from './view';
-import { Link } from 'react-router-dom';
-import AssetDisplay from 'containers/AssetDisplay';
 
-class ShowLite extends React.Component {
+const mapStateToProps = ({ show }) => {
-  render () {
+  return {
-    const { error, claimData: { name, claimId } } = this.props;
+    name   : show.showAsset.claimData.name,
-    return (
+    claimId: show.showAsset.claimData.claimId,
-      <div className="row row--tall flex-container--column flex-container--center-center">
+  };
-        {error &&
-          <p>{error}</p>
-        }
-        {this.props.claimData &&
-        <div>
-          <AssetDisplay />
-          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${claimId}/${name}`}>hosted via Spee.ch</Link>
-        </div>
-        }
-      </div>
-    );
-  }
 };
 
-ShowLite.propTypes = {
+export default connect(mapStateToProps, null)(View);
-  error    : PropTypes.string,
-  claimData: PropTypes.object.isRequired,
-};
-
-export default ShowLite;

react/components/ShowAssetLite/view.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import AssetDisplay from 'components/AssetDisplay';
+
+class ShowLite extends React.Component {
+  render () {
+    const { name, claimId } = this.props;
+    return (
+      <div className="row row--tall flex-container--column flex-container--center-center">
+        { (name && claimId) &&
+        <div>
+          <AssetDisplay />
+          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${claimId}/${name}`}>hosted via Spee.ch</Link>
+        </div>
+        }
+      </div>
+    );
+  }
+};
+
+export default ShowLite;

react/constants/show_action_types.js

@@ -1,8 +1,10 @@
-export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL';
+export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE';
-export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM';
+export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE';
+export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE';
 export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
 export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
 export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE';
 export const FILE_REQUESTED = 'FILE_REQUESTED';
-export const FILE_IS_AVAILABLE_UPDATE = 'FILE_IS_AVAILABLE_UPDATE';
+export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
 export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR';
+export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';

react/containers/ChannelClaimsDisplay/view.jsx

@@ -1,5 +1,5 @@
-import React from 'react/index';
+import React from 'react';
-import AssetPreview from 'components/AssetPreview/index';
+import AssetPreview from 'components/AssetPreview';
 import request from 'utils/request';
 
 class ChannelClaimsDisplay extends React.Component {

react/containers/ShowAsset/index.js

@@ -1,24 +1,29 @@
 import { connect } from 'react-redux';
 import View from './view';
-import { updateAssetClaimData } from 'actions/show';
+import { updateAssetClaimData, updateShowAssetError } from 'actions/show';
 
 const mapStateToProps = ({ show }) => {
   return {
     modifier : show.assetRequest.modifier,
-    claim    : show.assetRequest.name,
+    name     : show.assetRequest.name,
     extension: show.assetRequest.extension,
+    error    : show.showAsset.error,
     claimData: show.showAsset.claimData,
-    shortId  : show.showAsset.shortId,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
+    onShowAssetError: (error) => {
+      dispatch(updateShowAssetError(error));
+    },
     onAssetClaimDataUpdate: (claimData, shortId) => {
       dispatch(updateAssetClaimData(claimData, shortId));
+      dispatch(updateShowAssetError(null)); // clear any errors
     },
     onAssetClaimDataClear: () => {
       dispatch(updateAssetClaimData(null, null));
+      dispatch(updateShowAssetError(null)); // clear any errors
     },
   };
 };

react/containers/ShowAsset/view.jsx

@@ -6,17 +6,11 @@ import request from 'utils/request';
 class ShowAsset extends React.Component {
   constructor (props) {
     super(props);
-    this.state = {
-      error: null,
-    };
     this.getLongClaimId = this.getLongClaimId.bind(this);
     this.getClaimData = this.getClaimData.bind(this);
   }
   componentDidMount () {
-    console.log('ShowAsset did mount');
+    const { name, modifier } = this.props;
-    console.log('ShowAsset props', this.props);
-    const modifier = this.props.modifier;
-    const name = this.props.claim;
     // create request params
     let body = {};
     if (modifier) {
@@ -41,11 +35,10 @@ class ShowAsset extends React.Component {
         return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]);
       })
       .then(([shortId, claimData]) => {
-        this.setState({error: null}); // note: move this to redux level
         this.props.onAssetClaimDataUpdate(claimData, shortId);
       })
       .catch(error => {
-        this.setState({error});
+        this.props.onShowAssetError(error);
       });
   }
   getLongClaimId (params) {
@@ -101,26 +94,25 @@ class ShowAsset extends React.Component {
     this.props.onAssetClaimDataClear();
   }
   render () {
-    if (this.props.claimData) {
+    const { error, claimData, extension } = this.props;
-      if (this.props.extension) {
+    if (error) {
       return (
-          <ShowAssetLite
+        <p>{error}</p>
-            error={this.state.error}
+      );
-            claimData={this.props.claimData}
+    }
-          />
+    if (claimData) {
+      if (extension) {
+        return (
+          <ShowAssetLite />
         );
       } else {
         return (
-          <ShowAssetDetails
+          <ShowAssetDetails />
-            error={this.state.error}
-            claimData={this.props.claimData}
-            shortId={this.props.shortId}
-          />
         );
       }
     };
     return (
-      <div></div>
+      <div> </div>
     );
   }
 };

react/containers/ShowPage/index.js

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

react/reducers/show.js

@@ -3,7 +3,10 @@ import { CHANNEL, ASSET } from 'constants/show_request_types';
 import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states';
 
 const initialState = {
-  requestType   : null,
+  request: {
+    error: null,
+    type : null,
+  },
   channelRequest: {
     name: null,
     id  : null,
@@ -34,10 +37,13 @@ const initialState = {
   },
   showAsset: {
     error    : null,
-    status   : LOCAL_CHECK,
     claimData: null,
     shortId  : null,
   },
+  displayAsset: {
+    error : null,
+    status: LOCAL_CHECK,
+  },
 };
 
 /*
@@ -46,16 +52,26 @@ Reducers describe how the application's state changes in response to actions
 
 export default function (state = initialState, action) {
   switch (action.type) {
-    case actions.REQUEST_UPDATE_CHANNEL:
+    case actions.REQUEST_CHANNEL_UPDATE:
       return Object.assign({}, state, {
-        requestType   : CHANNEL,
+        request: Object.assign({}, state.request, {
+          type: CHANNEL,
+        }),
         channelRequest: action.data,
       });
-    case actions.REQUEST_UPDATE_CLAIM:
+    case actions.REQUEST_CLAIM_UPDATE:
       return Object.assign({}, state, {
-        requestType : ASSET,
+        request: Object.assign({}, state.request, {
+          type: ASSET,
+        }),
         assetRequest: action.data,
       });
+    case actions.REQUEST_ERROR_UPDATE:
+      return Object.assign({}, state, {
+        request: Object.assign({}, state.request, {
+          error: action.data,
+        }),
+      });
     case actions.CHANNEL_DATA_UPDATE:
       return Object.assign({}, state, {
         showChannel: Object.assign({}, state.showChannel, {
@@ -75,15 +91,21 @@ export default function (state = initialState, action) {
           shortId  : action.data.shortId,
         }),
       });
-    case actions.FILE_IS_AVAILABLE_UPDATE:
-      return Object.assign({}, state, {
-        showAsset: Object.assign({}, state.showAsset, {
-          status: action.data,
-        }),
-      });
     case actions.SHOW_ASSET_ERROR:
       return Object.assign({}, state, {
         showAsset: Object.assign({}, state.showAsset, {
+          error: action.data,
+        }),
+      });
+    case actions.FILE_AVAILABILITY_UPDATE:
+      return Object.assign({}, state, {
+        displayAsset: Object.assign({}, state.displayAsset, {
+          status: action.data,
+        }),
+      });
+    case actions.DISPLAY_ASSET_ERROR:
+      return Object.assign({}, state, {
+        displayAsset: Object.assign({}, state.displayAsset, {
           error : action.data,
           status: ERROR,
         }),

react/sagas/show.js

@@ -1,6 +1,6 @@
 import { call, put, takeLatest } from 'redux-saga/effects';
 import * as actions from 'constants/show_action_types';
-import { updateFileIsAvailable, updateShowAssetError } from 'actions/show';
+import { updateFileAvailability, updateDisplayAssetError } from 'actions/show';
 import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states';
 import { checkFileAvailability, triggerClaimGet } from 'api/fileApi';
 
@@ -12,27 +12,27 @@ function* retriveFile (action) {
   try {
     ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId));
   } catch (error) {
-    return yield put(updateShowAssetError(error.message));
+    return yield put(updateDisplayAssetError(error.message));
   };
   if (success) {
     if (isAvailable) {
-      return yield put(updateFileIsAvailable(AVAILABLE));
+      return yield put(updateFileAvailability(AVAILABLE));
     }
-    yield put(updateFileIsAvailable(UNAVAILABLE));
+    yield put(updateFileAvailability(UNAVAILABLE));
   } else {
-    yield put(updateShowAssetError(message));
+    yield put(updateDisplayAssetError(message));
   }
   // initiate get request for the file
   try {
     ({ success, message } = yield call(triggerClaimGet, name, claimId));
   } catch (error) {
-    return yield put(updateShowAssetError(error.message));
+    return yield put(updateDisplayAssetError(error.message));
   };
   if (success) {
     console.log('/api/glaim-get response:', message);
-    yield put(updateFileIsAvailable(AVAILABLE));
+    yield put(updateFileAvailability(AVAILABLE));
   } else {
-    yield put(updateShowAssetError(message));
+    yield put(updateDisplayAssetError(message));
   }
 }
 

routes/api-routes.js

@@ -207,7 +207,7 @@ module.exports = (app) => {
         res.status(200).json({success: false, message: error.message});
       });
   });
-  app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => {
+  app.get('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => {
     logger.debug('body:', body);
     const channelName = body.channelName;
     const channelClaimId = body.channelClaimId;