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 { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types';
// basic request parsing
export function onRequestError (error) {
return {
@ -8,19 +10,22 @@ export function onRequestError (error) {
};
}
export function onParsedChannelRequest (name, id) {
const requestId = `cr#${name}#${id}`;
export function onNewChannelRequest (channelName, channelId) {
const requestType = CHANNEL;
const requestId = `cr#${channelName}#${channelId}`;
return {
type: actions.REQUEST_UPDATE_CHANNEL,
data: { requestId, name, id },
type: actions.CHANNEL_REQUEST_NEW,
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}`;
return {
type: actions.REQUEST_UPDATE_ASSET,
type: actions.ASSET_REQUEST_NEW,
data: {
requestType,
requestId,
name,
modifier: {
@ -30,20 +35,12 @@ export function onParsedAssetRequest (name, id, channelName, channelId, extensio
id : channelId,
},
},
extension,
},
};
};
// 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) {
return {
type: actions.ASSET_REQUEST_SUCCESS,
@ -60,13 +57,6 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat
// 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) {
return {
type: actions.CHANNEL_REQUEST_ADD,

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

@ -1,32 +1,22 @@
import React from 'react';
import NavBar from 'containers/NavBar';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'components/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
import { connect } from 'react-redux';
import View from './view';
class ShowAssetDetails extends React.Component {
render () {
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>
);
}
const mapStateToProps = ({ show }) => {
console.log('mapping state to props', show);
// select request info
const requestId = show.request.id;
// select asset info
let asset;
const previousRequest = show.assetRequests[requestId] || null;
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 {
asset,
};
};
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';
const mapStateToProps = ({ show }) => {
// select name and claim id
let name, claimId;
const previousRequest = show.assetRequests[show.request.id];
const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`;
const asset = show.assetList[assetKey];
if (asset) {
name = asset.name;
claimId = asset.claimId;
console.log('mapping state to props', show);
// select request info
const requestId = show.request.id;
// select asset info
let asset;
const previousRequest = show.assetRequests[requestId] || null;
console.log('previous request:', previousRequest);
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 {
name,
claimId,
asset,
};
};

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

@ -4,13 +4,13 @@ import AssetDisplay from 'components/AssetDisplay';
class ShowLite extends React.Component {
render () {
const { name, claimId } = this.props;
const { asset } = this.props;
return (
<div className="row row--tall flex-container--column flex-container--center-center">
{ (name && claimId) &&
{ (asset) &&
<div>
<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>

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';
class ShowChannel extends React.Component {
componentDidMount () {
const { channel, requestId, requestChannelName, requestChannelId } = this.props;
if (!channel) {
return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId);
}
}
// componentDidMount () {
// const { channel, requestId, requestChannelName, requestChannelId } = this.props;
// if (!channel) {
// 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 () {
const { channel } = this.props;
if (channel) {

6
react/constants/show_action_types.js
View file

@ -1,15 +1,13 @@
// 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 ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW';
export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW';
// asset actions
export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW';
export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS';
export const ASSET_ADD = `ASSET_ADD`;
// channel actions
export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW';
export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_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 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 = () => {
return {
const mapDispatchToProps = {
onUpdateChannelClaims,
};
};
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 { onRequestError, onParsedChannelRequest, onParsedAssetRequest } from 'actions/show';
import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
@ -9,12 +9,10 @@ const mapStateToProps = ({ show }) => {
};
};
const mapDispatchToProps = () => {
return {
const mapDispatchToProps = {
onRequestError,
onParsedChannelRequest,
onParsedAssetRequest,
};
onNewChannelRequest,
onNewAssetRequest,
};
export default connect(mapStateToProps, mapDispatchToProps)(View);

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

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

33
react/reducers/show.js
View file

@ -1,13 +1,11 @@
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';
const initialState = {
request: {
error : null,
error: null,
type : null,
data : null,
requestId: null,
id : null,
},
channelRequests: {},
channelList : {},
@ -28,30 +26,13 @@ export default function (state = initialState, action) {
error: action.data,
}),
});
case actions.REQUEST_UPDATE_CHANNEL:
case actions.CHANNEL_REQUEST_NEW:
case actions.ASSET_REQUEST_NEW:
return Object.assign({}, state, {
request: {
type : CHANNEL,
error: null,
request: Object.assign({}, state.request, {
type: action.data.requestType,
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
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';
function* newAssetRequest (action) {
const { id, name, modifier } = action.data;
const { requestId, name, modifier } = action.data;
// get long id
console.log(`getting asset long id ${name}`);
let longId;
@ -15,7 +15,7 @@ function* newAssetRequest (action) {
return yield put(onRequestError(error.message));
}
// 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
console.log(`getting asset short id ${name} ${longId}`);
let shortId;

12
react/sagas/show_channel.js
View file

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