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));
}