moved request error out of show page state

react/actions/show.js

@@ -1,5 +1,12 @@
 import * as actions from 'constants/show_action_types';
 
+export function updateRequestError (error) {
+  return {
+    type: actions.REQUEST_ERROR_UPDATE,
+    data: error,
+  };
+}
+
 export function updateRequestWithChannelRequest (name, id) {
   return {
     type: actions.REQUEST_CHANNEL_UPDATE,
@@ -27,12 +34,12 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId,
   };
 };
 
-export function updateRequestError (error) {
+export function updateShowChannelError (error) {
   return {
-    type: actions.REQUEST_ERROR_UPDATE,
+    type: actions.SHOW_CHANNEL_ERROR,
     data: error,
   };
-}
+};
 
 export function updateChannelData (name, longId, shortId) {
   return {
@@ -57,6 +64,13 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC
   };
 };
 
+export function updateShowAssetError (error) {
+  return {
+    type: actions.SHOW_ASSET_ERROR,
+    data: error,
+  };
+};
+
 export function updateAssetClaimData (data, shortId) {
   return {
     type: actions.ASSET_CLAIM_DATA_UPDATE,
@@ -84,13 +98,6 @@ export function updateFileAvailability (status) {
   };
 };
 
-export function updateShowAssetError (error) {
-  return {
-    type: actions.SHOW_ASSET_ERROR,
-    data: error,
-  };
-};
-
 export function updateDisplayAssetError (error) {
   return {
     type: actions.DISPLAY_ASSET_ERROR,

react/components/ErrorPage/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import NavBar from 'containers/NavBar';
 
 class ErrorPage extends React.Component {
@@ -15,7 +16,8 @@ class ErrorPage extends React.Component {
   }
 };
 
-// required props
+ErrorPage.propTypes = {
-// error
+  error: PropTypes.string.isRequired,
+}
 
 export default ErrorPage;

react/constants/show_action_types.js

@@ -1,10 +1,14 @@
 export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE';
 export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE';
 export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE';
+
+export const SHOW_CHANNEL_ERROR = 'SHOW_CHANNEL_ERROR';
 export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
 export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
+
+export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR';
 export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE';
+
 export const FILE_REQUESTED = 'FILE_REQUESTED';
 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/ShowAsset/view.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ErrorPage from 'components/ErrorPage';
 import ShowAssetLite from 'components/ShowAssetLite';
 import ShowAssetDetails from 'components/ShowAssetDetails';
 import request from 'utils/request';
@@ -43,7 +44,6 @@ class ShowAsset extends React.Component {
   }
   getLongClaimId (params) {
     const url = `/api/claim/long-id`;
-    console.log('params:', params);
     return new Promise((resolve, reject) => {
       request(url, params)
         .then(({ success, message, data }) => {
@@ -97,7 +97,7 @@ class ShowAsset extends React.Component {
     const { error, claimData, extension } = this.props;
     if (error) {
       return (
-        <p>{error}</p>
+        <ErrorPage error={error}/>
       );
     }
     if (claimData) {

react/containers/ShowChannel/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
-import {updateChannelData} from 'actions/show';
+import {updateChannelData, updateShowChannelError} from 'actions/show';
 import View from './view';
 
 const mapStateToProps = ({ show }) => {
   return {
     requestName: show.channelRequest.name,
     requestId  : show.channelRequest.id,
+    error      : show.showChannel.error,
     name       : show.showChannel.channelData.name,
     shortId    : show.showChannel.channelData.shortId,
     longId     : show.showChannel.channelData.longId,
@@ -14,8 +15,12 @@ const mapStateToProps = ({ show }) => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    onShowChannelError: (error) => {
+      dispatch(updateShowChannelError(error));
+    },
     onChannelDataUpdate: (name, longId, shortId) => {
       dispatch(updateChannelData(name, longId, shortId));
+      dispatch(updateShowChannelError(null));  // clear any errors
     },
     onChannelDataClear: () => {
       dispatch(updateChannelData(null, null, null));

react/containers/ShowChannel/view.jsx

@@ -1,15 +1,10 @@
 import React from 'react';
+import ErrorPage from 'components/ErrorPage';
 import NavBar from 'containers/NavBar';
 import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
 import request from 'utils/request';
 
 class ShowChannel extends React.Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      error: null,
-    };
-  }
   componentDidMount () {
     this.getAndStoreChannelData(this.props.requestName, this.props.requestId);
   }
@@ -23,42 +18,39 @@ class ShowChannel extends React.Component {
     const url = `/api/channel/data/${name}/${id}`;
     return request(url)
       .then(({ success, message, data }) => {
-        console.log('api/channel-data response:', data);
+        console.log('api/channel/data/ response:', data);
         if (!success) {
-          return this.setState({error: message});
+          return this.props.onShowChannelError(message);
         }
-        this.setState({error: null}); // note: store this error at app level also
         this.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId);
       })
       .catch((error) => {
-        this.setState({error: error.message});
+        return this.props.onShowChannelError(error.message);
       });
   }
   componentWillUnmount () {
     this.props.onChannelDataClear();
   }
   render () {
+    const { error, name, longId, shortId } = this.props;
+    if (error) {
+      return (
+        <ErrorPage error={error}/>
+      );
+    };
     return (
       <div>
         <NavBar/>
-        {this.state.error ? (
+        <div className="row row--tall row--padded">
-          <div className="row row--tall row--padded">
+          <div className="column column--10">
-            <div className="column column--10">
+            <h2>channel name: {name ? name : 'loading...'}</h2>
-              <p>{this.state.error}</p>
+            <p className={'fine-print'}>full channel id: {longId ? longId : 'loading...'}</p>
-            </div>
+            <p className={'fine-print'}>short channel id: {shortId ? shortId : 'loading...'}</p>
           </div>
-        ) : (
+          <div className="column column--10">
-          <div className="row row--tall row--padded">
+            {(name && longId) && <ChannelClaimsDisplay />}
-            <div className="column column--10">
-              <h2>channel name: {this.props.name ? this.props.name : 'loading...'}</h2>
-              <p className={'fine-print'}>full channel id: {this.props.longId ? this.props.longId : 'loading...'}</p>
-              <p className={'fine-print'}>short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}</p>
-            </div>
-            <div className="column column--10">
-              {(this.props.name && this.props.longId) && <ChannelClaimsDisplay />}
-            </div>
           </div>
-        )}
+        </div>
       </div>
     );
   }

react/containers/ShowPage/index.js

@@ -1,15 +1,19 @@
 import { connect } from 'react-redux';
-import { updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show';
+import { updateRequestError, updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show';
 import View from './view';
 
 const mapStateToProps = ({ show }) => {
   return {
+    error      : show.request.error,
     requestType: show.request.type,
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
+    onRequestError: (error) => {
+      dispatch(updateRequestError(error));
+    },
     onChannelRequest: (name, id) => {
       dispatch(updateRequestWithChannelRequest(name, id));
     },

react/containers/ShowPage/view.jsx

@@ -9,24 +9,17 @@ import { CHANNEL, ASSET } from 'constants/show_request_types';
 class ShowPage extends React.Component {
   constructor (props) {
     super(props);
-    this.state = {
-      error: null,
-    };
     this.parseUrlAndUpdateState = this.parseUrlAndUpdateState.bind(this);
     this.parseAndUpdateIdentifierAndClaim = this.parseAndUpdateIdentifierAndClaim.bind(this);
     this.parseAndUpdateClaimOnly = this.parseAndUpdateClaimOnly.bind(this);
   }
   componentDidMount () {
-    console.log('ShowPage did mount');
+    const { identifier, claim } = this.props.match.params;
-    const identifier = this.props.match.params.identifier;
-    const claim = this.props.match.params.claim;
     this.parseUrlAndUpdateState(identifier, claim);
   }
   componentWillReceiveProps (nextProps) {
     if (nextProps.match.params !== this.props.match.params) {
-      console.log('ShowPage received new params props');
+      const { identifier, claim } = nextProps.match.params;
-      const identifier = nextProps.match.params.identifier;
-      const claim = nextProps.match.params.claim;
       this.parseUrlAndUpdateState(identifier, claim);
     }
   }
@@ -45,7 +38,7 @@ class ShowPage extends React.Component {
       ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier));
       ({ claimName, extension } = lbryUri.parseClaim(claim));
     } catch (error) {
-      return this.setState({error: error.message});
+      return this.props.onRequestError(error.message);
     }
     // update the store
     if (isChannel) {
@@ -61,7 +54,7 @@ class ShowPage extends React.Component {
     try {
       ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim));
     } catch (error) {
-      return this.setState({error: error.message});
+      return this.props.onRequestError(error.message);
     }
     // return early if this request is for a channel
     if (isChannel) {
@@ -72,19 +65,18 @@ class ShowPage extends React.Component {
     try {
       ({claimName, extension} = lbryUri.parseClaim(claim));
     } catch (error) {
-      return this.setState({error: error.message});
+      return this.props.onRequestError(error.message);
     }
     this.props.onAssetRequest(claimName, null, null, null, extension);
   }
   render () {
-    console.log('rendering ShowPage');
+    const { error, requestType } = this.props;
-    console.log('ShowPage props', this.props);
+    if (error) {
-    if (this.state.error) {
       return (
-        <ErrorPage error={this.state.error}/>
+        <ErrorPage error={error}/>
       );
     }
-    switch (this.props.requestType) {
+    switch (requestType) {
       case CHANNEL:
         return <ShowChannel />;
       case ASSET:

react/reducers/show.js

@@ -23,6 +23,7 @@ const initialState = {
     extension: null,
   },
   showChannel: {
+    error      : null,
     channelData: {
       name   : null,
       shortId: null,
@@ -52,23 +53,33 @@ Reducers describe how the application's state changes in response to actions
 
 export default function (state = initialState, action) {
   switch (action.type) {
-    case actions.REQUEST_CHANNEL_UPDATE:
+    // request cases
+    case actions.REQUEST_ERROR_UPDATE:
       return Object.assign({}, state, {
         request: Object.assign({}, state.request, {
-          type: CHANNEL,
+          error: action.data,
         }),
+      });
+    case actions.REQUEST_CHANNEL_UPDATE:
+      return Object.assign({}, state, {
+        request: {
+          type : CHANNEL,
+          error: null,
+        },
         channelRequest: action.data,
       });
     case actions.REQUEST_CLAIM_UPDATE:
       return Object.assign({}, state, {
-        request: Object.assign({}, state.request, {
+        request: {
-          type: ASSET,
+          type : ASSET,
-        }),
+          error: null,
+        },
         assetRequest: action.data,
       });
-    case actions.REQUEST_ERROR_UPDATE:
+    // show channel cases
+    case actions.SHOW_CHANNEL_ERROR:
       return Object.assign({}, state, {
-        request: Object.assign({}, state.request, {
+        showChannel: Object.assign({}, state.showAsset, {
           error: action.data,
         }),
       });
@@ -84,6 +95,13 @@ export default function (state = initialState, action) {
           channelClaimsData: action.data,
         }),
       });
+    // show asset cases
+    case actions.SHOW_ASSET_ERROR:
+      return Object.assign({}, state, {
+        showAsset: Object.assign({}, state.showAsset, {
+          error: action.data,
+        }),
+      });
     case actions.ASSET_CLAIM_DATA_UPDATE:
       return Object.assign({}, state, {
         showAsset: Object.assign({}, state.showAsset, {
@@ -91,12 +109,7 @@ export default function (state = initialState, action) {
           shortId  : action.data.shortId,
         }),
       });
-    case actions.SHOW_ASSET_ERROR:
+    // display asset cases
-      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, {