LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

moved request error out of show page state

Browse source
This commit is contained in:
bill bittner 2018-02-07 11:30:39 -08:00
parent 2744045c5c
commit ffb4466fcf
9 changed files with 92 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
react/actions/show.js
View file

@ -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,

6
react/components/ErrorPage/index.js
View file

@ -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
// error
ErrorPage.propTypes = {
error: PropTypes.string.isRequired,
}
export default ErrorPage;

6
react/constants/show_action_types.js
View file

@ -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';

4
react/containers/ShowAsset/view.jsx
View file

@ -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) {

7
react/containers/ShowChannel/index.js
View file

@ -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));

44
react/containers/ShowChannel/view.jsx
View file

@ -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="column column--10">
<p>{this.state.error}</p>
</div>
<div className="row row--tall row--padded">
<div className="column column--10">
<h2>channel name: {name ? name : 'loading...'}</h2>
<p className={'fine-print'}>full channel id: {longId ? longId : 'loading...'}</p>
<p className={'fine-print'}>short channel id: {shortId ? shortId : 'loading...'}</p>
</div>
) : (
<div className="row row--tall row--padded">
<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 className="column column--10">
{(name && longId) && <ChannelClaimsDisplay />}
</div>
)}
</div>
</div>
);
}

6
react/containers/ShowPage/index.js
View file

@ -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));
},

26
react/containers/ShowPage/view.jsx
View file

@ -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 = this.props.match.params.identifier;
const claim = this.props.match.params.claim;
const { identifier, claim } = this.props.match.params;
this.parseUrlAndUpdateState(identifier, claim);
}
componentWillReceiveProps (nextProps) {
if (nextProps.match.params !== this.props.match.params) {
console.log('ShowPage received new params props');
const identifier = nextProps.match.params.identifier;
const claim = nextProps.match.params.claim;
const { identifier, claim } = nextProps.match.params;
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');
console.log('ShowPage props', this.props);
if (this.state.error) {
const { error, requestType } = this.props;
if (error) {
return (
<ErrorPage error={this.state.error}/>
<ErrorPage error={error}/>
);
}
switch (this.props.requestType) {
switch (requestType) {
case CHANNEL:
return <ShowChannel />;
case ASSET:

39
react/reducers/show.js
View file

@ -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, {
type: ASSET,
}),
request: {
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:
return Object.assign({}, state, {
showAsset: Object.assign({}, state.showAsset, {
error: action.data,
}),
});
// display asset cases
case actions.FILE_AVAILABILITY_UPDATE:
return Object.assign({}, state, {
displayAsset: Object.assign({}, state.displayAsset, {