diff --git a/react/actions/show.js b/react/actions/show.js index a3847c6b..cae8c4e3 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -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, diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 8a956774..d8061a34 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -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 ( -
- -
-
- -
-
-
- -
-
-
- -
-
-
- } -
- ); - } +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); diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx new file mode 100644 index 00000000..42047032 --- /dev/null +++ b/react/components/ShowAssetDetails/view.jsx @@ -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 ( +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ } +
+ ); + }; + return ( + + ); + } +}; + +export default ShowAssetDetails; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 19c96cd1..40c09afd 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -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, }; }; diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx index 74dc1beb..e8567fbc 100644 --- a/react/components/ShowAssetLite/view.jsx +++ b/react/components/ShowAssetLite/view.jsx @@ -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 (
- { (name && claimId) && + { (asset) &&
- hosted via Spee.ch + hosted via Spee.ch
}
diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js new file mode 100644 index 00000000..8de0944f --- /dev/null +++ b/react/components/ShowChannel/index.js @@ -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); diff --git a/react/containers/ShowChannel/view.jsx b/react/components/ShowChannel/view.jsx similarity index 74% rename from react/containers/ShowChannel/view.jsx rename to react/components/ShowChannel/view.jsx index 4545d1a3..3539cdf7 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/components/ShowChannel/view.jsx @@ -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) { diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 8185f79e..9927408e 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -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'; diff --git a/react/constants/show_request_types.js b/react/constants/show_request_types.js index 82ae07cd..d5fbed67 100644 --- a/react/constants/show_request_types.js +++ b/react/constants/show_request_types.js @@ -1,2 +1,3 @@ export const CHANNEL = 'CHANNEL'; -export const ASSET = 'ASSET'; +export const ASSET_LITE = 'ASSET_LITE'; +export const ASSET_DETAILS = 'ASSET_DETAILS'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 4a24968e..0fd7b165 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -15,10 +15,8 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = () => { - return { - onUpdateChannelClaims, - }; +const mapDispatchToProps = { + onUpdateChannelClaims, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js deleted file mode 100644 index c59f6470..00000000 --- a/react/containers/ShowAsset/index.js +++ /dev/null @@ -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); diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx deleted file mode 100644 index ddc8a07f..00000000 --- a/react/containers/ShowAsset/view.jsx +++ /dev/null @@ -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 ? : ; - }; - return ( - - ); - } -}; - -export default ShowAsset; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js deleted file mode 100644 index 0a9c83c7..00000000 --- a/react/containers/ShowChannel/index.js +++ /dev/null @@ -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); diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 6bdfd64f..8ba6752e 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -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 { - onRequestError, - onParsedChannelRequest, - onParsedAssetRequest, - }; +const mapDispatchToProps = { + onRequestError, + onNewChannelRequest, + onNewAssetRequest, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index e379113a..b431dd53 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -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 ; - case ASSET: - return ; + case ASSET_LITE: + return ; + case ASSET_DETAILS: + return ; default: return

loading...

; } diff --git a/react/reducers/show.js b/react/reducers/show.js index 4bbe4fdb..699540ec 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -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, - type : null, - data : null, - requestId: null, + error: null, + type : 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, - 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, - }, - }, + request: Object.assign({}, state.request, { + type: action.data.requestType, + id : action.data.requestId, + }), }); // asset actions case actions.ASSET_REQUEST_SUCCESS: diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index c1174f50..6f21b0ec 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -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; diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 40aeddeb..981d6cc7 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -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)); }