moved url parsing to its own action saga

react/actions/show.js

@@ -3,12 +3,19 @@ import * as actions from 'constants/show_action_types';
 import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types';
 
 // basic request parsing
+export function handleShowPageUri (params) {
+  return {
+    type: actions.HANDLE_SHOW_URI,
+    data: params,
+  };
+};
+
 export function onRequestError (error) {
   return {
     type: actions.REQUEST_UPDATE_ERROR,
     data: error,
   };
-}
+};
 
 export function onNewChannelRequest (channelName, channelId) {
   const requestType = CHANNEL;
@@ -41,7 +48,7 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension)
 
 export function addRequestToRequestList (id, error, key) {
   return {
-    type: actions.PREVIOUS_REQUEST_ADD,
+    type: actions.REQUEST_LIST_ADD,
     data: { id, error, key },
   };
 };

react/constants/show_action_types.js

@@ -1,14 +1,14 @@
 // request actions
+export const HANDLE_SHOW_URI = 'HANDLE_SHOW_URI';
 export const REQUEST_UPDATE_ERROR = 'REQUEST_UPDATE_ERROR';
 export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW';
 export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW';
+export const REQUEST_LIST_ADD = 'REQUEST_LIST_ADD';
 
 // asset actions
-export const PREVIOUS_REQUEST_ADD = 'PREVIOUS_REQUEST_ADD';
 export const ASSET_ADD = `ASSET_ADD`;
 
 // channel actions
-export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD';
 export const CHANNEL_ADD = 'CHANNEL_ADD';
 
 export const CHANNEL_CLAIMS_UPDATE_ASYNC = 'CHANNEL_CLAIMS_UPDATE_ASYNC';

react/containers/ShowPage/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show';
+import { handleShowPageUri } from 'actions/show';
+// import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show';
 import View from './view';
 
 const mapStateToProps = ({ show }) => {
@@ -10,9 +11,7 @@ const mapStateToProps = ({ show }) => {
 };
 
 const mapDispatchToProps = {
-  onRequestError,
+  handleShowPageUri,
-  onNewChannelRequest,
-  onNewAssetRequest,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(View);

react/containers/ShowPage/view.jsx

@@ -3,73 +3,18 @@ import ErrorPage from 'components/ErrorPage';
 import ShowAssetLite from 'components/ShowAssetLite';
 import ShowAssetDetails from 'components/ShowAssetDetails';
 import ShowChannel from 'components/ShowChannel';
-import lbryUri from 'utils/lbryUri';
 
 import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types';
 
 class ShowPage extends React.Component {
-  constructor (props) {
-    super(props);
-    this.parseUrlAndUpdateState = this.parseUrlAndUpdateState.bind(this);
-    this.parseAndUpdateIdentifierAndClaim = this.parseAndUpdateIdentifierAndClaim.bind(this);
-    this.parseAndUpdateClaimOnly = this.parseAndUpdateClaimOnly.bind(this);
-  }
   componentDidMount () {
-    const { identifier, claim } = this.props.match.params;
+    this.props.handleShowPageUri(this.props.match.params);
-    this.parseUrlAndUpdateState(identifier, claim);
   }
   componentWillReceiveProps (nextProps) {
     if (nextProps.match.params !== this.props.match.params) {
-      const { identifier, claim } = nextProps.match.params;
+      this.props.handleShowPageUri(nextProps.match.params);
-      this.parseUrlAndUpdateState(identifier, claim);
     }
   }
-  parseUrlAndUpdateState (identifier, claim) {
-    if (identifier) {
-      return this.parseAndUpdateIdentifierAndClaim(identifier, claim);
-    }
-    this.parseAndUpdateClaimOnly(claim);
-  }
-  parseAndUpdateIdentifierAndClaim (modifier, claim) {
-    // this is a request for an asset
-    // claim will be an asset claim
-    // the identifier could be a channel or a claim id
-    let isChannel, channelName, channelClaimId, claimId, claimName, extension;
-    try {
-      ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier));
-      ({ claimName, extension } = lbryUri.parseClaim(claim));
-    } catch (error) {
-      return this.props.onRequestError(error.message);
-    }
-    // update the store
-    if (isChannel) {
-      return this.props.onNewAssetRequest(claimName, null, channelName, channelClaimId, extension);
-    } else {
-      return this.props.onNewAssetRequest(claimName, claimId, null, null, extension);
-    }
-  }
-  parseAndUpdateClaimOnly (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;
-    try {
-      ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim));
-    } catch (error) {
-      return this.props.onRequestError(error.message);
-    }
-    // return early if this request is for a channel
-    if (isChannel) {
-      return this.props.onNewChannelRequest(channelName, channelClaimId);
-    }
-    // if not for a channel, parse the claim request
-    let claimName, extension;  // if I am destructuring below, do I still need to declare these here?
-    try {
-      ({claimName, extension} = lbryUri.parseClaim(claim));
-    } catch (error) {
-      return this.props.onRequestError(error.message);
-    }
-    this.props.onNewAssetRequest(claimName, null, null, null, extension);
-  }
   render () {
     const { error, requestType } = this.props;
     if (error) {

react/reducers/show.js

@@ -34,7 +34,7 @@ export default function (state = initialState, action) {
         }),
       });
     // store requests
-    case actions.PREVIOUS_REQUEST_ADD:
+    case actions.REQUEST_LIST_ADD:
       return Object.assign({}, state, {
         requestList: Object.assign({}, state.requestList, {
           [action.data.id]: {

react/sagas/index.js

@@ -1,10 +1,12 @@
 import { all } from 'redux-saga/effects';
+import { watchHandleShowPageUri } from './show_uri';
 import { watchNewAssetRequest } from './show_asset';
 import { watchNewChannelRequest, watchUpdateChannelClaims } from './show_channel';
 import { watchFileIsRequested } from './file';
 
 export default function* rootSaga () {
   yield all([
+    watchHandleShowPageUri(),
     watchNewAssetRequest(),
     watchNewChannelRequest(),
     watchUpdateChannelClaims(),

react/sagas/show_uri.js

@@ -0,0 +1,58 @@
+import { takeLatest } from 'redux-saga/effects';
+import * as actions from 'constants/show_action_types';
+import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show';
+import lbryUri from 'utils/lbryUri';
+
+function parseAndUpdateIdentifierAndClaim (modifier, claim) {
+  // this is a request for an asset
+  // claim will be an asset claim
+  // the identifier could be a channel or a claim id
+  let isChannel, channelName, channelClaimId, claimId, claimName, extension;
+  try {
+    ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier));
+    ({ claimName, extension } = lbryUri.parseClaim(claim));
+  } catch (error) {
+    return onRequestError(error.message);
+  }
+  // trigger an new action to update the store
+  if (isChannel) {
+    return onNewAssetRequest(claimName, null, channelName, channelClaimId, extension);
+  } else {
+    return onNewAssetRequest(claimName, claimId, null, null, extension);
+  }
+}
+function parseAndUpdateClaimOnly (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;
+  try {
+    ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim));
+  } catch (error) {
+    return onRequestError(error.message);
+  }
+  // trigger an new action to update the store
+  // return early if this request is for a channel
+  if (isChannel) {
+    return onNewChannelRequest(channelName, channelClaimId);
+  }
+  // if not for a channel, parse the claim request
+  let claimName, extension;
+  try {
+    ({claimName, extension} = lbryUri.parseClaim(claim));
+  } catch (error) {
+    return onRequestError(error.message);
+  }
+  onNewAssetRequest(claimName, null, null, null, extension);
+}
+
+function* handleShowPageUri (action) {
+  const { params: { identifier, claim } } = action.data;
+  if (identifier) {
+    return parseAndUpdateIdentifierAndClaim(identifier, claim);
+  }
+  parseAndUpdateClaimOnly(claim);
+};
+
+export function* watchHandleShowPageUri () {
+  yield takeLatest(actions.HANDLE_SHOW_URI, handleShowPageUri);
+};