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

consolidated request handling to showPage

Browse source
This commit is contained in:
bill bittner 2018-02-14 11:39:24 -08:00
parent 51c50d7f5d
commit 4a2fbb402f
18 changed files with 150 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
react/actions/show.js
View file

@ -1,5 +1,7 @@
import * as actions from 'constants/show_action_types'; import * as actions from 'constants/show_action_types';
import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types';
// basic request parsing // basic request parsing
export function onRequestError (error) { export function onRequestError (error) {
return { return {
@ -8,19 +10,22 @@ export function onRequestError (error) {
}; };
} }
export function onParsedChannelRequest (name, id) { export function onNewChannelRequest (channelName, channelId) {
const requestId = `cr#${name}#${id}`; const requestType = CHANNEL;
const requestId = `cr#${channelName}#${channelId}`;
return { return {
type: actions.REQUEST_UPDATE_CHANNEL, type: actions.CHANNEL_REQUEST_NEW,
data: { requestId, name, id }, data: { requestType, requestId, channelName, channelId },
}; };
}; };
export function onParsedAssetRequest (name, id, channelName, channelId, extension) { export function onNewAssetRequest (name, id, channelName, channelId, extension) {
const requestType = extension ? ASSET_LITE : ASSET_DETAILS;
const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; const requestId = `ar#${name}#${id}#${channelName}#${channelId}`;
return { return {
type: actions.REQUEST_UPDATE_ASSET, type: actions.ASSET_REQUEST_NEW,
data: { data: {
requestType,
requestId, requestId,
name, name,
modifier: { modifier: {
@ -30,20 +35,12 @@ export function onParsedAssetRequest (name, id, channelName, channelId, extensio
id : channelId, id : channelId,
}, },
}, },
extension,
}, },
}; };
}; };
// asset actions // asset actions
export function onNewAssetRequest (id, name, modifier) {
return {
type: actions.ASSET_REQUEST_NEW,
data: { id, name, modifier },
};
};
export function addRequestToAssetRequests (id, error, name, claimId) { export function addRequestToAssetRequests (id, error, name, claimId) {
return { return {
type: actions.ASSET_REQUEST_SUCCESS, type: actions.ASSET_REQUEST_SUCCESS,
@ -60,13 +57,6 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat
// channel actions // channel actions
export function onNewChannelRequest (id, name, channelId) {
return {
type: actions.CHANNEL_REQUEST_NEW,
data: {id, name, channelId},
};
};
export function addRequestToChannelRequests (id, error, name, longId, shortId) { export function addRequestToChannelRequests (id, error, name, longId, shortId) {
return { return {
type: actions.CHANNEL_REQUEST_ADD, type: actions.CHANNEL_REQUEST_ADD,

48
react/components/ShowAssetDetails/index.js
View file

@ -1,32 +1,22 @@
import React from 'react'; import { connect } from 'react-redux';
import NavBar from 'containers/NavBar'; import View from './view';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'components/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component { const mapStateToProps = ({ show }) => {
render () { console.log('mapping state to props', show);
return ( // select request info
<div> const requestId = show.request.id;
<NavBar/> // select asset info
<div className="row row--tall row--padded"> let asset;
<div className="column column--10"> const previousRequest = show.assetRequests[requestId] || null;
<AssetTitle /> const assetList = show.assetList;
</div> if (previousRequest) {
<div className="column column--5 column--sml-10 align-content-top"> const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request
<div className="row row--padded"> asset = assetList[assetKey] || null;
<AssetDisplay /> };
</div> // return props
</div><div className="column column--5 column--sml-10 align-content-top"> return {
<div className="row row--padded"> asset,
<AssetInfo /> };
</div>
</div>
</div>
}
</div>
);
}
}; };
export default ShowAssetDetails; export default connect(mapStateToProps, null)(View);

39
react/components/ShowAssetDetails/view.jsx Normal file
View file

@ -0,0 +1,39 @@
import React from 'react';
import NavBar from 'containers/NavBar';
import ErrorPage from 'components/ErrorPage';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'components/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component {
render () {
const { asset } = this.props;
if (asset) {
return (
<div>
<NavBar/>
<div className="row row--tall row--padded">
<div className="column column--10">
<AssetTitle />
</div>
<div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded">
<AssetDisplay />
</div>
</div><div className="column column--5 column--sml-10 align-content-top">
<div className="row row--padded">
<AssetInfo />
</div>
</div>
</div>
}
</div>
);
};
return (
<ErrorPage error={'loading asset data...'}/>
);
}
};
export default ShowAssetDetails;

22
react/components/ShowAssetLite/index.js
View file

@ -2,19 +2,21 @@ import { connect } from 'react-redux';
import View from './view'; import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
// select name and claim id console.log('mapping state to props', show);
let name, claimId; // select request info
const previousRequest = show.assetRequests[show.request.id]; const requestId = show.request.id;
const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // select asset info
const asset = show.assetList[assetKey]; let asset;
if (asset) { const previousRequest = show.assetRequests[requestId] || null;
name = asset.name; console.log('previous request:', previousRequest);
claimId = asset.claimId; const assetList = show.assetList;
if (previousRequest) {
const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request
asset = assetList[assetKey] || null;
}; };
// return props // return props
return { return {
name, asset,
claimId,
}; };
}; };

6
react/components/ShowAssetLite/view.jsx
View file

@ -4,13 +4,13 @@ import AssetDisplay from 'components/AssetDisplay';
class ShowLite extends React.Component { class ShowLite extends React.Component {
render () { render () {
const { name, claimId } = this.props; const { asset } = this.props;
return ( return (
<div className="row row--tall flex-container--column flex-container--center-center"> <div className="row row--tall flex-container--column flex-container--center-center">
{ (name && claimId) && { (asset) &&
<div> <div>
<AssetDisplay /> <AssetDisplay />
<Link id="asset-boilerpate" className="link--primary fine-print" to={`/${claimId}/${name}`}>hosted via Spee.ch</Link> <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${asset.claimId}/${asset.name}`}>hosted via Spee.ch</Link>
</div> </div>
} }
</div> </div>

20
react/components/ShowChannel/index.js Normal file
View file

@ -0,0 +1,20 @@
import { connect } from 'react-redux';
import View from './view';
const mapStateToProps = ({ show }) => {
// select request info
const requestId = show.request.id;
// select request
const previousRequest = show.channelRequests[requestId] || null;
// select channel
let channel;
if (previousRequest) {
const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`;
channel = show.channelList[channelKey] || null;
}
return {
channel,
};
};
export default connect(mapStateToProps, null)(View);

12
react/containers/ShowChannel/view.jsx → react/components/ShowChannel/view.jsx
View file

@ -4,12 +4,12 @@ import NavBar from 'containers/NavBar';
import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
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;
if (!channel) { // if (!channel) {
return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); // return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); // check the channel you have in the request and see you have no channel so fetch that channel?
} // }
} // }
render () { render () {
const { channel } = this.props; const { channel } = this.props;
if (channel) { if (channel) {

6
react/constants/show_action_types.js
View file

@ -1,15 +1,13 @@
// request actions // request actions
export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL';
export const REQUEST_UPDATE_ASSET = 'REQUEST_UPDATE_ASSET';
export const REQUEST_UPDATE_ERROR = 'REQUEST_UPDATE_ERROR'; export const REQUEST_UPDATE_ERROR = 'REQUEST_UPDATE_ERROR';
export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW';
export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW';
// asset actions // asset actions
export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW';
export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS'; export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS';
export const ASSET_ADD = `ASSET_ADD`; export const ASSET_ADD = `ASSET_ADD`;
// channel actions // channel actions
export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW';
export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD';
export const CHANNEL_ADD = 'CHANNEL_ADD'; export const CHANNEL_ADD = 'CHANNEL_ADD';

3
react/constants/show_request_types.js
View file

@ -1,2 +1,3 @@
export const CHANNEL = 'CHANNEL'; export const CHANNEL = 'CHANNEL';
export const ASSET = 'ASSET'; export const ASSET_LITE = 'ASSET_LITE';
export const ASSET_DETAILS = 'ASSET_DETAILS';

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

@ -15,10 +15,8 @@ const mapStateToProps = ({ show }) => {
}; };
}; };
const mapDispatchToProps = () => { const mapDispatchToProps = {
return {
onUpdateChannelClaims, onUpdateChannelClaims,
}; };
};
export default connect(mapStateToProps, mapDispatchToProps)(View); export default connect(mapStateToProps, mapDispatchToProps)(View);

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

@ -1,35 +0,0 @@
import { connect } from 'react-redux';
import View from './view';
import { onNewAssetRequest } from 'actions/show';
const mapStateToProps = ({ show }) => {
// select request info
const requestId = show.request.id;
const requestName = show.request.data.name;
const requestModifier = show.request.data.modifier;
const requestExtension = show.request.data.extension;
const assetList = show.assetList;
// select asset info
const previousRequest = show.assetRequests[show.request.id] || null;
let asset;
if (previousRequest) {
const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request
asset = assetList[assetKey] || null;
};
// return props
return {
requestId,
requestName,
requestModifier,
requestExtension,
asset,
};
};
const mapDispatchToProps = () => {
return {
onNewAssetRequest,
};
};
export default connect(mapStateToProps, mapDispatchToProps)(View);

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

@ -1,24 +0,0 @@
import React from 'react';
import ErrorPage from 'components/ErrorPage';
import ShowAssetLite from 'components/ShowAssetLite';
import ShowAssetDetails from 'components/ShowAssetDetails';
class ShowAsset extends React.Component {
componentDidMount () {
const { asset, requestId, requestName, requestModifier } = this.props;
if (!asset) {
return this.props.onNewAssetRequest(requestId, requestName, requestModifier);
};
}
render () {
const {asset, requestExtension} = this.props;
if (asset) {
return requestExtension ? <ShowAssetLite/> : <ShowAssetDetails/>;
};
return (
<ErrorPage error={'loading asset data...'}/>
);
}
};
export default ShowAsset;

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

@ -1,32 +0,0 @@
import { connect } from 'react-redux';
import { onNewChannelRequest } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
// select request info
const requestId = show.request.id;
const requestChannelName = show.request.data.name;
const requestChannelId = show.request.data.id;
// select request
const previousRequest = show.channelRequests[show.request.id] || null;
// select channel
let channel;
if (previousRequest) {
const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`;
channel = show.channelList[channelKey] || null;
}
return {
requestId,
requestChannelName,
requestChannelId,
channel,
};
};
const mapDispatchToProps = () => {
return {
onNewChannelRequest,
};
};
export default connect(mapStateToProps, mapDispatchToProps)(View);

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

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

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

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
import ErrorPage from 'components/ErrorPage'; import ErrorPage from 'components/ErrorPage';
import ShowAsset from 'containers/ShowAsset'; import ShowAssetLite from 'components/ShowAssetLite';
import ShowChannel from 'containers/ShowChannel'; import ShowAssetDetails from 'components/ShowAssetDetails';
import ShowChannel from 'components/ShowChannel';
import lbryUri from 'utils/lbryUri'; import lbryUri from 'utils/lbryUri';
import { CHANNEL, ASSET } from 'constants/show_request_types'; import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types';
class ShowPage extends React.Component { class ShowPage extends React.Component {
constructor (props) { constructor (props) {
@ -42,9 +43,9 @@ class ShowPage extends React.Component {
} }
// update the store // update the store
if (isChannel) { if (isChannel) {
return this.props.onParsedAssetRequest(claimName, null, channelName, channelClaimId, extension); return this.props.onNewAssetRequest(claimName, null, channelName, channelClaimId, extension);
} else { } else {
return this.props.onParsedAssetRequest(claimName, claimId, null, null, extension); return this.props.onNewAssetRequest(claimName, claimId, null, null, extension);
} }
} }
parseAndUpdateClaimOnly (claim) { parseAndUpdateClaimOnly (claim) {
@ -58,7 +59,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.onParsedChannelRequest(channelName, channelClaimId); return this.props.onNewChannelRequest(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 +68,7 @@ class ShowPage extends React.Component {
} catch (error) { } catch (error) {
return this.props.onRequestError(error.message); return this.props.onRequestError(error.message);
} }
this.props.onParsedAssetRequest(claimName, null, null, null, extension); this.props.onNewAssetRequest(claimName, null, null, null, extension);
} }
render () { render () {
const { error, requestType } = this.props; const { error, requestType } = this.props;
@ -79,8 +80,10 @@ class ShowPage extends React.Component {
switch (requestType) { switch (requestType) {
case CHANNEL: case CHANNEL:
return <ShowChannel />; return <ShowChannel />;
case ASSET: case ASSET_LITE:
return <ShowAsset />; return <ShowAssetLite />;
case ASSET_DETAILS:
return <ShowAssetDetails />;
default: default:
return <p>loading...</p>; return <p>loading...</p>;
} }

31
react/reducers/show.js
View file

@ -1,13 +1,11 @@
import * as actions from 'constants/show_action_types'; import * as actions from 'constants/show_action_types';
import { CHANNEL, ASSET } from 'constants/show_request_types';
import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states'; import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states';
const initialState = { const initialState = {
request: { request: {
error: null, error: null,
type : null, type : null,
data : null, id : null,
requestId: null,
}, },
channelRequests: {}, channelRequests: {},
channelList : {}, channelList : {},
@ -28,30 +26,13 @@ export default function (state = initialState, action) {
error: action.data, error: action.data,
}), }),
}); });
case actions.REQUEST_UPDATE_CHANNEL: case actions.CHANNEL_REQUEST_NEW:
case actions.ASSET_REQUEST_NEW:
return Object.assign({}, state, { return Object.assign({}, state, {
request: { request: Object.assign({}, state.request, {
type : CHANNEL, type: action.data.requestType,
error: null,
id : action.data.requestId, id : action.data.requestId,
data : { }),
name: action.data.name,
id : action.data.id,
},
},
});
case actions.REQUEST_UPDATE_ASSET:
return Object.assign({}, state, {
request: {
type : ASSET,
error: null,
id : action.data.requestId,
data : {
name : action.data.name,
modifier : action.data.modifier,
extension: action.data.extension,
},
},
}); });
// asset actions // asset actions
case actions.ASSET_REQUEST_SUCCESS: case actions.ASSET_REQUEST_SUCCESS:

4
react/sagas/show_asset.js
View file

@ -4,7 +4,7 @@ import { addRequestToAssetRequests, onRequestError, addAssetToAssetList } from '
import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi';
function* newAssetRequest (action) { function* newAssetRequest (action) {
const { id, name, modifier } = action.data; const { requestId, name, modifier } = action.data;
// get long id // get long id
console.log(`getting asset long id ${name}`); console.log(`getting asset long id ${name}`);
let longId; let longId;
@ -15,7 +15,7 @@ function* newAssetRequest (action) {
return yield put(onRequestError(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(requestId, null, name, longId));
// get short Id // get short Id
console.log(`getting asset short id ${name} ${longId}`); console.log(`getting asset short id ${name} ${longId}`);
let shortId; let shortId;

12
react/sagas/show_channel.js
View file

@ -4,28 +4,28 @@ import { addNewChannelToChannelList, addRequestToChannelRequests, onRequestError
import { getChannelClaims, getChannelData } from 'api/channelApi'; import { getChannelClaims, getChannelData } from 'api/channelApi';
function* getNewChannelAndUpdateChannelList (action) { function* getNewChannelAndUpdateChannelList (action) {
const { id, name, channelId } = action.data; const { requestId, channelName, channelId } = action.data;
// get channel long id // get channel long id
console.log('getting channel long id and short id'); console.log('getting channel long id and short id');
let longId, shortId; let longId, shortId;
try { try {
({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, name, channelId)); ({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, channelName, channelId));
} catch (error) { } catch (error) {
return yield put(onRequestError(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(requestId, null, channelName, longId, shortId));
// get channel claims data // get channel claims data
console.log('getting channel claims data'); console.log('getting channel claims data');
let claimsData; let claimsData;
try { try {
({ data: claimsData } = yield call(getChannelClaims, name, longId, 1)); ({ data: claimsData } = yield call(getChannelClaims, channelName, longId, 1));
} catch (error) { } catch (error) {
return yield put(onRequestError(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#${channelName}#${longId}`;
yield put(addNewChannelToChannelList(channelKey, name, shortId, longId, claimsData)); yield put(addNewChannelToChannelList(channelKey, channelName, shortId, longId, claimsData));
// clear any request errors // clear any request errors
yield put(onRequestError(null)); yield put(onRequestError(null));
} }