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

removed componentWillMount and simplified mapDispatchToProps

Browse source
This commit is contained in:
bill bittner 2018-02-14 09:19:22 -08:00
parent 10fdf6e6e2
commit 51c50d7f5d
11 changed files with 42 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
react/actions/show.js
View file

@ -1,14 +1,14 @@
import * as actions from 'constants/show_action_types';
// basic request parsing
export function updateRequestError (error) {
export function onRequestError (error) {
return {
type: actions.REQUEST_UPDATE_ERROR,
data: error,
};
}
export function updateRequestWithChannelRequest (name, id) {
export function onParsedChannelRequest (name, id) {
const requestId = `cr#${name}#${id}`;
return {
type: actions.REQUEST_UPDATE_CHANNEL,
@ -16,7 +16,7 @@ export function updateRequestWithChannelRequest (name, id) {
};
};
export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) {
export function onParsedAssetRequest (name, id, channelName, channelId, extension) {
const requestId = `ar#${name}#${id}#${channelName}#${channelId}`;
return {
type: actions.REQUEST_UPDATE_ASSET,
@ -37,7 +37,7 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId,
// asset actions
export function newAssetRequest (id, name, modifier) {
export function onNewAssetRequest (id, name, modifier) {
return {
type: actions.ASSET_REQUEST_NEW,
data: { id, name, modifier },
@ -60,7 +60,7 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat
// channel actions
export function newChannelRequest (id, name, channelId) {
export function onNewChannelRequest (id, name, channelId) {
return {
type: actions.CHANNEL_REQUEST_NEW,
data: {id, name, channelId},
@ -83,7 +83,7 @@ export function addNewChannelToChannelList (id, name, shortId, longId, claimsDat
// update channel data
export function updateChannelClaimsAsync (channelKey, name, longId, page) {
export function onUpdateChannelClaims (channelKey, name, longId, page) {
return {
type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC,
data: {channelKey, name, longId, page},

8
react/containers/ChannelClaimsDisplay/index.js
View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { updateChannelClaimsAsync } from 'actions/show';
import { onUpdateChannelClaims } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
@ -15,11 +15,9 @@ const mapStateToProps = ({ show }) => {
};
};
const mapDispatchToProps = dispatch => {
const mapDispatchToProps = () => {
return {
onChannelPageUpdate: (channelKey, name, longId, page) => {
dispatch(updateChannelClaimsAsync(channelKey, name, longId, page));
},
onUpdateChannelClaims,
};
};

2
react/containers/ChannelClaimsDisplay/view.jsx
View file

@ -19,7 +19,7 @@ class ChannelClaimsDisplay extends React.Component {
}
showNewPage (page) {
const { channelKey, channel: { name, longId } } = this.props;
this.props.onChannelPageUpdate(channelKey, name, longId, page);
this.props.onUpdateChannelClaims(channelKey, name, longId, page);
}
render () {
const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props;

12
react/containers/ShowAsset/index.js
View file

@ -1,10 +1,9 @@
import { connect } from 'react-redux';
import View from './view';
import { newAssetRequest, showNewAsset } from 'actions/show';
import { onNewAssetRequest } from 'actions/show';
const mapStateToProps = ({ show }) => {
// select request info
const requestType = show.request.type;
const requestId = show.request.id;
const requestName = show.request.data.name;
const requestModifier = show.request.data.modifier;
@ -17,10 +16,8 @@ const mapStateToProps = ({ show }) => {
const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request
asset = assetList[assetKey] || null;
};
// console.log('previousRequest:', previousRequest, 'asset:', asset, 'asset list', assetList);
// return props
return {
requestType,
requestId,
requestName,
requestModifier,
@ -29,12 +26,9 @@ const mapStateToProps = ({ show }) => {
};
};
const mapDispatchToProps = dispatch => {
const mapDispatchToProps = () => {
return {
// request
onNewRequest: (id, name, modifier) => {
dispatch(newAssetRequest(id, name, modifier));
},
onNewAssetRequest,
};
};

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

@ -3,36 +3,18 @@ import ErrorPage from 'components/ErrorPage';
import ShowAssetLite from 'components/ShowAssetLite';
import ShowAssetDetails from 'components/ShowAssetDetails';
import { ASSET } from 'constants/show_request_types';
function requestIsAnAssetRequest ({ requestType }) {
return requestType === ASSET;
}
class ShowAsset extends React.Component {
componentDidMount () {
const { asset, requestId, requestName, requestModifier } = this.props;
if (!asset) { // case: the asset info does not exist
return this.props.onNewRequest(requestId, requestName, requestModifier);
if (!asset) {
return this.props.onNewAssetRequest(requestId, requestName, requestModifier);
};
}
componentWillReceiveProps (nextProps) {
if (requestIsAnAssetRequest(nextProps)) {
const { asset, requestId, requestName, requestModifier } = nextProps;
if (!asset) { // case: the asset info does not exist
return this.props.onNewRequest(requestId, requestName, requestModifier);
};
}
}
render () {
const {asset, requestExtension} = this.props;
if (asset) {
if (requestExtension) {
return <ShowAssetLite/>;
}
return <ShowAssetDetails/>;
}
;
return requestExtension ? <ShowAssetLite/> : <ShowAssetDetails/>;
};
return (
<ErrorPage error={'loading asset data...'}/>
);

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

@ -1,11 +1,10 @@
import { connect } from 'react-redux';
import { newChannelRequest } from 'actions/show';
import { onNewChannelRequest } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
// select request info
const requestId = show.request.id;
const requestType = show.request.type;
const requestChannelName = show.request.data.name;
const requestChannelId = show.request.data.id;
// select request
@ -18,18 +17,15 @@ const mapStateToProps = ({ show }) => {
}
return {
requestId,
requestType,
requestChannelName,
requestChannelId,
channel,
};
};
const mapDispatchToProps = dispatch => {
const mapDispatchToProps = () => {
return {
onNewChannelRequest (requestId, requestChannelName, requestChannelId) {
dispatch(newChannelRequest(requestId, requestChannelName, requestChannelId));
},
onNewChannelRequest,
};
};

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

@ -3,12 +3,6 @@ import ErrorPage from 'components/ErrorPage';
import NavBar from 'containers/NavBar';
import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
import { CHANNEL } from 'constants/show_request_types';
function requestIsAChannelRequest ({ requestType }) {
return requestType === CHANNEL;
}
class ShowChannel extends React.Component {
componentDidMount () {
const { channel, requestId, requestChannelName, requestChannelId } = this.props;
@ -16,14 +10,6 @@ class ShowChannel extends React.Component {
return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId);
}
}
componentWillReceiveProps (nextProps) {
if (requestIsAChannelRequest(nextProps)) {
const { channel, requestId, requestChannelName, requestChannelId } = nextProps;
if (!channel) {
return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId);
}
}
}
render () {
const { channel } = this.props;
if (channel) {
@ -33,9 +19,9 @@ class ShowChannel extends React.Component {
<NavBar/>
<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>
<h2>channel name: {name || 'loading...'}</h2>
<p className={'fine-print'}>full channel id: {longId || 'loading...'}</p>
<p className={'fine-print'}>short channel id: {shortId || 'loading...'}</p>
</div>
<div className="column column--10">
<ChannelClaimsDisplay />

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

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { updateRequestError, updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show';
import { onRequestError, onParsedChannelRequest, onParsedAssetRequest } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
@ -9,17 +9,11 @@ const mapStateToProps = ({ show }) => {
};
};
const mapDispatchToProps = dispatch => {
const mapDispatchToProps = () => {
return {
onRequestError: (error) => {
dispatch(updateRequestError(error));
},
onChannelRequest: (name, id) => {
dispatch(updateRequestWithChannelRequest(name, id));
},
onAssetRequest: (name, id, channelName, channelId, extension) => {
dispatch(updateRequestWithAssetRequest(name, id, channelName, channelId, extension));
},
onRequestError,
onParsedChannelRequest,
onParsedAssetRequest,
};
};

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

@ -42,9 +42,9 @@ class ShowPage extends React.Component {
}
// update the store
if (isChannel) {
return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension);
return this.props.onParsedAssetRequest(claimName, null, channelName, channelClaimId, extension);
} else {
return this.props.onAssetRequest(claimName, claimId, null, null, extension);
return this.props.onParsedAssetRequest(claimName, claimId, null, null, extension);
}
}
parseAndUpdateClaimOnly (claim) {
@ -58,7 +58,7 @@ class ShowPage extends React.Component {
}
// return early if this request is for a channel
if (isChannel) {
return this.props.onChannelRequest(channelName, channelClaimId);
return this.props.onParsedChannelRequest(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?
@ -67,7 +67,7 @@ class ShowPage extends React.Component {
} catch (error) {
return this.props.onRequestError(error.message);
}
this.props.onAssetRequest(claimName, null, null, null, extension);
this.props.onParsedAssetRequest(claimName, null, null, null, extension);
}
render () {
const { error, requestType } = this.props;

10
react/sagas/show_asset.js
View file

@ -1,6 +1,6 @@
import { call, put, takeLatest } from 'redux-saga/effects';
import * as actions from 'constants/show_action_types';
import { addRequestToAssetRequests, updateRequestError, addAssetToAssetList } from 'actions/show';
import { addRequestToAssetRequests, onRequestError, addAssetToAssetList } from 'actions/show';
import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi';
function* newAssetRequest (action) {
@ -12,7 +12,7 @@ function* newAssetRequest (action) {
({data: longId} = yield call(getLongClaimId, name, modifier));
} catch (error) {
console.log('error:', error);
return yield put(updateRequestError(error.message));
return yield put(onRequestError(error.message));
}
// put action to add request to asset request list
yield put(addRequestToAssetRequests(id, null, name, longId));
@ -22,7 +22,7 @@ function* newAssetRequest (action) {
try {
({data: shortId} = yield call(getShortId, name, longId));
} catch (error) {
return yield put(updateRequestError(error.message));
return yield put(onRequestError(error.message));
}
// get asset claim data
console.log(`getting asset claim data ${name} ${longId}`);
@ -30,13 +30,13 @@ function* newAssetRequest (action) {
try {
({data: claimData} = yield call(getClaimData, name, longId));
} catch (error) {
return yield put(updateRequestError(error.message));
return yield put(onRequestError(error.message));
}
// put action to add asset to asset list
const assetKey = `a#${name}#${longId}`;
yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData));
// clear any errors in request error
yield put(updateRequestError(null));
yield put(onRequestError(null));
};
export function* watchNewAssetRequest () {

10
react/sagas/show_channel.js
View file

@ -1,6 +1,6 @@
import { call, put, takeLatest } from 'redux-saga/effects';
import * as actions from 'constants/show_action_types';
import { addNewChannelToChannelList, addRequestToChannelRequests, updateRequestError, updateChannelClaims } from 'actions/show';
import { addNewChannelToChannelList, addRequestToChannelRequests, onRequestError, updateChannelClaims } from 'actions/show';
import { getChannelClaims, getChannelData } from 'api/channelApi';
function* getNewChannelAndUpdateChannelList (action) {
@ -11,7 +11,7 @@ function* getNewChannelAndUpdateChannelList (action) {
try {
({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, name, channelId));
} catch (error) {
return yield put(updateRequestError(error.message));
return yield put(onRequestError(error.message));
}
// store the request in the channel requests list
yield put(addRequestToChannelRequests(id, null, name, longId, shortId));
@ -21,13 +21,13 @@ function* getNewChannelAndUpdateChannelList (action) {
try {
({ data: claimsData } = yield call(getChannelClaims, name, longId, 1));
} catch (error) {
return yield put(updateRequestError(error.message));
return yield put(onRequestError(error.message));
}
// store the channel data in the channel list
const channelKey = `c#${name}#${longId}`;
yield put(addNewChannelToChannelList(channelKey, name, shortId, longId, claimsData));
// clear any request errors
yield put(updateRequestError(null));
yield put(onRequestError(null));
}
export function* watchNewChannelRequest () {
@ -40,7 +40,7 @@ function* getNewClaimsAndUpdateChannel (action) {
try {
({ data: claimsData } = yield call(getChannelClaims, name, longId, page));
} catch (error) {
return yield put(updateRequestError(error.message));
return yield put(onRequestError(error.message));
}
yield put(updateChannelClaims(channelKey, claimsData));
}