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

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

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

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

@ -19,7 +19,7 @@ class ChannelClaimsDisplay extends React.Component {
} }
showNewPage (page) { showNewPage (page) {
const { channelKey, channel: { name, longId } } = this.props; const { channelKey, channel: { name, longId } } = this.props;
this.props.onChannelPageUpdate(channelKey, name, longId, page); this.props.onUpdateChannelClaims(channelKey, name, longId, page);
} }
render () { render () {
const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props; 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 { connect } from 'react-redux';
import View from './view'; import View from './view';
import { newAssetRequest, showNewAsset } from 'actions/show'; import { onNewAssetRequest } from 'actions/show';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
// select request info // select request info
const requestType = show.request.type;
const requestId = show.request.id; const requestId = show.request.id;
const requestName = show.request.data.name; const requestName = show.request.data.name;
const requestModifier = show.request.data.modifier; 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 const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request
asset = assetList[assetKey] || null; asset = assetList[assetKey] || null;
}; };
// console.log('previousRequest:', previousRequest, 'asset:', asset, 'asset list', assetList);
// return props // return props
return { return {
requestType,
requestId, requestId,
requestName, requestName,
requestModifier, requestModifier,
@ -29,12 +26,9 @@ const mapStateToProps = ({ show }) => {
}; };
}; };
const mapDispatchToProps = dispatch => { const mapDispatchToProps = () => {
return { return {
// request onNewAssetRequest,
onNewRequest: (id, name, modifier) => {
dispatch(newAssetRequest(id, name, modifier));
},
}; };
}; };

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

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

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

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

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

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

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

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

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

@ -42,9 +42,9 @@ class ShowPage extends React.Component {
} }
// update the store // update the store
if (isChannel) { if (isChannel) {
return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension); return this.props.onParsedAssetRequest(claimName, null, channelName, channelClaimId, extension);
} else { } else {
return this.props.onAssetRequest(claimName, claimId, null, null, extension); return this.props.onParsedAssetRequest(claimName, claimId, null, null, extension);
} }
} }
parseAndUpdateClaimOnly (claim) { parseAndUpdateClaimOnly (claim) {
@ -58,7 +58,7 @@ class ShowPage extends React.Component {
} }
// return early if this request is for a channel // return early if this request is for a channel
if (isChannel) { if (isChannel) {
return this.props.onChannelRequest(channelName, channelClaimId); return this.props.onParsedChannelRequest(channelName, channelClaimId);
} }
// if not for a channel, parse the claim request // 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? 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) { } catch (error) {
return this.props.onRequestError(error.message); return this.props.onRequestError(error.message);
} }
this.props.onAssetRequest(claimName, null, null, null, extension); this.props.onParsedAssetRequest(claimName, null, null, null, extension);
} }
render () { render () {
const { error, requestType } = this.props; 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 { call, put, takeLatest } from 'redux-saga/effects';
import * as actions from 'constants/show_action_types'; 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'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi';
function* newAssetRequest (action) { function* newAssetRequest (action) {
@ -12,7 +12,7 @@ function* newAssetRequest (action) {
({data: longId} = yield call(getLongClaimId, name, modifier)); ({data: longId} = yield call(getLongClaimId, name, modifier));
} catch (error) { } catch (error) {
console.log('error:', 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 // put action to add request to asset request list
yield put(addRequestToAssetRequests(id, null, name, longId)); yield put(addRequestToAssetRequests(id, null, name, longId));
@ -22,7 +22,7 @@ function* newAssetRequest (action) {
try { try {
({data: shortId} = yield call(getShortId, name, longId)); ({data: shortId} = yield call(getShortId, name, longId));
} catch (error) { } catch (error) {
return yield put(updateRequestError(error.message)); return yield put(onRequestError(error.message));
} }
// get asset claim data // get asset claim data
console.log(`getting asset claim data ${name} ${longId}`); console.log(`getting asset claim data ${name} ${longId}`);
@ -30,13 +30,13 @@ function* newAssetRequest (action) {
try { try {
({data: claimData} = yield call(getClaimData, name, longId)); ({data: claimData} = yield call(getClaimData, name, longId));
} catch (error) { } catch (error) {
return yield put(updateRequestError(error.message)); return yield put(onRequestError(error.message));
} }
// put action to add asset to asset list // put action to add asset to asset list
const assetKey = `a#${name}#${longId}`; const assetKey = `a#${name}#${longId}`;
yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData)); yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData));
// clear any errors in request error // clear any errors in request error
yield put(updateRequestError(null)); yield put(onRequestError(null));
}; };
export function* watchNewAssetRequest () { export function* watchNewAssetRequest () {

10
react/sagas/show_channel.js
View file

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