diff --git a/react/actions/show.js b/react/actions/show.js index 8dd6b732..3a23b66d 100644 --- a/react/actions/show.js +++ b/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 }, }; }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 7abb46f6..5137d13b 100644 --- a/react/constants/show_action_types.js +++ b/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'; diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 8ba6752e..705de666 100644 --- a/react/containers/ShowPage/index.js +++ b/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, - onNewChannelRequest, - onNewAssetRequest, + handleShowPageUri, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index b431dd53..cf565f02 100644 --- a/react/containers/ShowPage/view.jsx +++ b/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.parseUrlAndUpdateState(identifier, claim); + this.props.handleShowPageUri(this.props.match.params); } componentWillReceiveProps (nextProps) { if (nextProps.match.params !== this.props.match.params) { - const { identifier, claim } = nextProps.match.params; - this.parseUrlAndUpdateState(identifier, claim); + this.props.handleShowPageUri(nextProps.match.params); } } - 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) { diff --git a/react/reducers/show.js b/react/reducers/show.js index afad0df1..c1de617d 100644 --- a/react/reducers/show.js +++ b/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]: { diff --git a/react/sagas/index.js b/react/sagas/index.js index fc8a4529..e2b808c2 100644 --- a/react/sagas/index.js +++ b/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(), diff --git a/react/sagas/show_uri.js b/react/sagas/show_uri.js new file mode 100644 index 00000000..f0973d67 --- /dev/null +++ b/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); +};