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

connected show asset components directly to redux store

Browse source
This commit is contained in:
bill bittner 2018-02-07 10:52:09 -08:00
parent d809173b00
commit 2744045c5c
19 changed files with 368 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
react/actions/show.js
View file

@ -2,7 +2,7 @@ import * as actions from 'constants/show_action_types';
export function updateRequestWithChannelRequest (name, id) { export function updateRequestWithChannelRequest (name, id) {
return { return {
type: actions.REQUEST_UPDATE_CHANNEL, type: actions.REQUEST_CHANNEL_UPDATE,
data: { data: {
name, name,
id, id,
@ -12,7 +12,7 @@ export function updateRequestWithChannelRequest (name, id) {
export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) {
return { return {
type: actions.REQUEST_UPDATE_CLAIM, type: actions.REQUEST_CLAIM_UPDATE,
data: { data: {
name, name,
modifier: { modifier: {
@ -27,6 +27,13 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId,
}; };
}; };
export function updateRequestError (error) {
return {
type: actions.REQUEST_ERROR_UPDATE,
data: error,
};
}
export function updateChannelData (name, longId, shortId) { export function updateChannelData (name, longId, shortId) {
return { return {
type: actions.CHANNEL_DATA_UPDATE, type: actions.CHANNEL_DATA_UPDATE,
@ -70,9 +77,9 @@ export function fileRequested (name, claimId) {
}; };
}; };
export function updateFileIsAvailable (status) { export function updateFileAvailability (status) {
return { return {
type: actions.FILE_IS_AVAILABLE_UPDATE, type: actions.FILE_AVAILABILITY_UPDATE,
data: status, data: status,
}; };
}; };
@ -83,3 +90,10 @@ export function updateShowAssetError (error) {
data: error, data: error,
}; };
}; };
export function updateDisplayAssetError (error) {
return {
type: actions.DISPLAY_ASSET_ERROR,
data: error,
};
};

4
react/containers/AssetDisplay/index.js → react/components/AssetDisplay/index.js
View file

@ -4,8 +4,8 @@ import { fileRequested } from 'actions/show';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
error : show.showAsset.error, error : show.displayAsset.error,
status : show.showAsset.status, status : show.displayAsset.status,
claimData: show.showAsset.claimData, claimData: show.showAsset.claimData,
}; };
}; };

6
react/containers/AssetDisplay/view.jsx → react/components/AssetDisplay/view.jsx
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import ProgressBar from 'components/ProgressBar/index'; import ProgressBar from 'components/ProgressBar';
import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_display_states'; import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_display_states';
class AssetDisplay extends React.Component { class AssetDisplay extends React.Component {
@ -7,9 +7,7 @@ class AssetDisplay extends React.Component {
this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId); this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId);
} }
render () { render () {
const status = this.props.status; const { status, error, claimData: { name, claimId, contentType, fileExt, thumbnail } } = this.props;
const error = this.props.error;
const { name, claimId, contentType, fileExt, thumbnail } = this.props.claimData;
return ( return (
<div id="asset-display-component"> <div id="asset-display-component">
{(status === LOCAL_CHECK) && {(status === LOCAL_CHECK) &&

192
react/components/AssetInfo/index.js
View file

@ -1,179 +1,19 @@
import React from 'react'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import View from './view';
import { Link } from 'react-router-dom';
class AssetInfo extends React.Component { const mapStateToProps = ({ show }) => {
constructor (props) { return {
super(props); shortId : show.showAsset.shortId,
this.state = { channelName : show.showAsset.claimData.channelName,
showDetails: false, certificateId: show.showAsset.claimData.certificateId,
}; description : show.showAsset.claimData.description,
this.toggleDetails = this.toggleDetails.bind(this); name : show.showAsset.claimData.name,
this.copyToClipboard = this.copyToClipboard.bind(this); claimId : show.showAsset.claimData.claimId,
} fileExt : show.showAsset.claimData.fileExt,
toggleDetails () { contentType : show.showAsset.claimData.contentType,
if (this.state.showDetails) { thumbnail : show.showAsset.claimData.thumbnail,
return this.setState({showDetails: false}); host : show.showAsset.claimData.host,
} };
this.setState({showDetails: true});
}
copyToClipboard (event) {
var elementToCopy = event.target.dataset.elementtocopy;
var element = document.getElementById(elementToCopy);
element.select();
try {
document.execCommand('copy');
} catch (err) {
this.setState({error: 'Oops, unable to copy'});
}
}
render () {
const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props;
return (
<div>
{channelName &&
<div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10">
<span className="text">Channel:</span>
</div>
<div className="column column--8 column--med-10">
<span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
</div>
</div>
}
{description &&
<div className="row row--padded row--wide row--no-top">
<span className="text">{description}</span>
</div>
}
<div className="row row--padded row--wide row--no-top">
<div id="show-short-link">
<div className="column column--2 column--med-10">
<Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
className="text">Link:</span></Link>
</div>
<div className="column column--8 column--med-10">
<div className="row row--short row--wide">
<div className="column column--7">
<div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
<input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
spellCheck="false"
value={`${host}/${shortId}/${name}.${fileExt}`}
onClick={this.select}/>
</div>
<div className="column column--1"> </div>
<div className="column column--2">
<button className="button--primary" data-elementtocopy="short-link"
onClick={this.copyToClipboard}>copy
</button>
</div>
</div>
</div>
</div>
<div id="show-embed-code">
<div className="column column--2 column--med-10">
<span className="text">Embed:</span>
</div>
<div className="column column--8 column--med-10">
<div className="row row--short row--wide">
<div className="column column--7">
<div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
{(contentType === 'video/mp4') ? (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false"
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
) : (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false"
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
/>
)}
</div>
<div className="column column--1"> </div>
<div className="column column--2">
<button className="button--primary" data-elementtocopy="embed-text"
onClick={this.copyToClipboard}>copy
</button>
</div>
</div>
</div>
</div>
</div>
<div id="show-share-buttons">
<div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10">
<span className="text">Share:</span>
</div>
<div className="column column--7 column--med-10">
<div
className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
<a className="link--primary" target="_blank"
href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
<a className="link--primary" target="_blank"
href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
<a className="link--primary" target="_blank"
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
<a className="link--primary" target="_blank"
href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
</div>
</div>
</div>
</div>
{ this.state.showDetails &&
<div>
<div className="row--padded row--wide row--no-top">
<div>
<div className="column column--2 column--med-10">
<span className="text">Claim Name:</span>
</div><div className="column column--8 column--med-10">
{name}
</div>
</div>
<div>
<div className="column column--2 column--med-10">
<span className="text">Claim Id:</span>
</div><div className="column column--8 column--med-10">
{claimId}
</div>
</div>
<div>
<div className="column column--2 column--med-10">
<span className="text">File Type:</span>
</div><div className="column column--8 column--med-10">
{contentType ? `${contentType}` : 'unknown'}
</div>
</div>
</div>
<div className="row--padded row--wide row--no-top">
<div className="column column--10">
<a target="_blank" href="https://lbry.io/dmca">Report</a>
</div>
</div>
</div>
}
<div className="row row--wide">
<button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
</div>
</div>
);
}
}; };
AssetInfo.propTypes = { export default connect(mapStateToProps, null)(View);
channelName : PropTypes.string,
certificateId: PropTypes.string,
description : PropTypes.string,
shortId : PropTypes.string.isRequired,
name : PropTypes.string.isRequired,
claimId : PropTypes.string.isRequired,
contentType : PropTypes.string.isRequired,
fileExt : PropTypes.string.isRequired,
thumbnail : PropTypes.string,
host : PropTypes.string.isRequired,
};
export default AssetInfo;

165
react/components/AssetInfo/view.jsx Normal file
View file

@ -0,0 +1,165 @@
import React from 'react';
import { Link } from 'react-router-dom';
class AssetInfo extends React.Component {
constructor (props) {
super(props);
this.state = {
showDetails: false,
};
this.toggleDetails = this.toggleDetails.bind(this);
this.copyToClipboard = this.copyToClipboard.bind(this);
}
toggleDetails () {
if (this.state.showDetails) {
return this.setState({showDetails: false});
}
this.setState({showDetails: true});
}
copyToClipboard (event) {
var elementToCopy = event.target.dataset.elementtocopy;
var element = document.getElementById(elementToCopy);
element.select();
try {
document.execCommand('copy');
} catch (err) {
this.setState({error: 'Oops, unable to copy'});
}
}
render () {
const { shortId, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } = this.props;
return (
<div>
{channelName &&
<div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10">
<span className="text">Channel:</span>
</div>
<div className="column column--8 column--med-10">
<span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
</div>
</div>
}
{description &&
<div className="row row--padded row--wide row--no-top">
<span className="text">{description}</span>
</div>
}
<div className="row row--padded row--wide row--no-top">
<div id="show-short-link">
<div className="column column--2 column--med-10">
<Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
className="text">Link:</span></Link>
</div>
<div className="column column--8 column--med-10">
<div className="row row--short row--wide">
<div className="column column--7">
<div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
<input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
spellCheck="false"
value={`${host}/${shortId}/${name}.${fileExt}`}
onClick={this.select}/>
</div>
<div className="column column--1"> </div>
<div className="column column--2">
<button className="button--primary" data-elementtocopy="short-link"
onClick={this.copyToClipboard}>copy
</button>
</div>
</div>
</div>
</div>
<div id="show-embed-code">
<div className="column column--2 column--med-10">
<span className="text">Embed:</span>
</div>
<div className="column column--8 column--med-10">
<div className="row row--short row--wide">
<div className="column column--7">
<div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
{(contentType === 'video/mp4') ? (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false"
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
) : (
<input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
onClick={this.select} spellCheck="false"
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
/>
)}
</div>
<div className="column column--1"> </div>
<div className="column column--2">
<button className="button--primary" data-elementtocopy="embed-text"
onClick={this.copyToClipboard}>copy
</button>
</div>
</div>
</div>
</div>
</div>
<div id="show-share-buttons">
<div className="row row--padded row--wide row--no-top">
<div className="column column--2 column--med-10">
<span className="text">Share:</span>
</div>
<div className="column column--7 column--med-10">
<div
className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
<a className="link--primary" target="_blank"
href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
<a className="link--primary" target="_blank"
href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
<a className="link--primary" target="_blank"
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
<a className="link--primary" target="_blank"
href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
</div>
</div>
</div>
</div>
{ this.state.showDetails &&
<div>
<div className="row--padded row--wide row--no-top">
<div>
<div className="column column--2 column--med-10">
<span className="text">Claim Name:</span>
</div><div className="column column--8 column--med-10">
{name}
</div>
</div>
<div>
<div className="column column--2 column--med-10">
<span className="text">Claim Id:</span>
</div><div className="column column--8 column--med-10">
{claimId}
</div>
</div>
<div>
<div className="column column--2 column--med-10">
<span className="text">File Type:</span>
</div><div className="column column--8 column--med-10">
{contentType ? `${contentType}` : 'unknown'}
</div>
</div>
</div>
<div className="row--padded row--wide row--no-top">
<div className="column column--10">
<a target="_blank" href="https://lbry.io/dmca">Report</a>
</div>
</div>
</div>
}
<div className="row row--wide">
<button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
</div>
</div>
);
}
};
export default AssetInfo;

15
react/components/AssetTitle/index.js
View file

@ -1,11 +1,10 @@
import React from 'react'; import { connect } from 'react-redux';
import View from './view';
const AssetTitle = ({title}) => { const mapStateToProps = ({ show }) => {
return ( return {
<div> title: show.showAsset.claimData.title,
<span className="text--large">{title}</span> };
</div>
);
}; };
export default AssetTitle; export default connect(mapStateToProps, null)(View);

11
react/components/AssetTitle/view.jsx Normal file
View file

@ -0,0 +1,11 @@
import React from 'react';
const AssetTitle = ({title}) => {
return (
<div>
<span className="text--large">{title}</span>
</div>
);
};
export default AssetTitle;

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

@ -1,57 +1,10 @@
import React from 'react'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import View from './view';
import NavBar from 'containers/NavBar';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'containers/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component { const mapStateToProps = ({ show }) => {
render () { return {
const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props; claimData: show.showAsset.claimData,
return ( };
<div>
<NavBar/>
{error &&
<div className="row row--padded">
<p>{error}</p>
</div>
}
{this.props.claimData &&
<div className="row row--tall row--padded">
<div className="column column--10">
<AssetTitle title={title}/>
</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
channelName={channelName}
certificateId={certificateId}
description={description}
name={name}
claimId={claimId}
fileExt={fileExt}
contentType={contentType}
thumbnail={thumbnail}
host={host}
shortId={shortId}
/>
</div>
</div>
</div>
}
</div>
);
}
}; };
ShowAssetDetails.propTypes = { export default connect(mapStateToProps, null)(View);
error : PropTypes.string,
claimData: PropTypes.object.isRequired,
shortId : PropTypes.string.isRequired,
};
export default ShowAssetDetails;

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

@ -0,0 +1,39 @@
import React from 'react';
import PropTypes from 'prop-types';
import NavBar from 'containers/NavBar';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'components/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component {
render () {
const { claimData } = this.props;
return (
<div>
<NavBar/>
{claimData &&
<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>
);
}
};
ShowAssetDetails.propTypes = {
error: PropTypes.string,
};
export default ShowAssetDetails;

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

@ -1,30 +1,11 @@
import React from 'react'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import View from './view';
import { Link } from 'react-router-dom';
import AssetDisplay from 'containers/AssetDisplay';
class ShowLite extends React.Component { const mapStateToProps = ({ show }) => {
render () { return {
const { error, claimData: { name, claimId } } = this.props; name : show.showAsset.claimData.name,
return ( claimId: show.showAsset.claimData.claimId,
<div className="row row--tall flex-container--column flex-container--center-center"> };
{error &&
<p>{error}</p>
}
{this.props.claimData &&
<div>
<AssetDisplay />
<Link id="asset-boilerpate" className="link--primary fine-print" to={`/${claimId}/${name}`}>hosted via Spee.ch</Link>
</div>
}
</div>
);
}
}; };
ShowLite.propTypes = { export default connect(mapStateToProps, null)(View);
error : PropTypes.string,
claimData: PropTypes.object.isRequired,
};
export default ShowLite;

21
react/components/ShowAssetLite/view.jsx Normal file
View file

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

8
react/constants/show_action_types.js
View file

@ -1,8 +1,10 @@
export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE';
export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE';
export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE';
export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE';
export const FILE_REQUESTED = 'FILE_REQUESTED'; export const FILE_REQUESTED = 'FILE_REQUESTED';
export const FILE_IS_AVAILABLE_UPDATE = 'FILE_IS_AVAILABLE_UPDATE'; export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE';
export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR'; export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR';
export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';

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

@ -1,5 +1,5 @@
import React from 'react/index'; import React from 'react';
import AssetPreview from 'components/AssetPreview/index'; import AssetPreview from 'components/AssetPreview';
import request from 'utils/request'; import request from 'utils/request';
class ChannelClaimsDisplay extends React.Component { class ChannelClaimsDisplay extends React.Component {

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

@ -1,24 +1,29 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import View from './view'; import View from './view';
import { updateAssetClaimData } from 'actions/show'; import { updateAssetClaimData, updateShowAssetError } from 'actions/show';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
modifier : show.assetRequest.modifier, modifier : show.assetRequest.modifier,
claim : show.assetRequest.name, name : show.assetRequest.name,
extension: show.assetRequest.extension, extension: show.assetRequest.extension,
error : show.showAsset.error,
claimData: show.showAsset.claimData, claimData: show.showAsset.claimData,
shortId : show.showAsset.shortId,
}; };
}; };
const mapDispatchToProps = dispatch => { const mapDispatchToProps = dispatch => {
return { return {
onShowAssetError: (error) => {
dispatch(updateShowAssetError(error));
},
onAssetClaimDataUpdate: (claimData, shortId) => { onAssetClaimDataUpdate: (claimData, shortId) => {
dispatch(updateAssetClaimData(claimData, shortId)); dispatch(updateAssetClaimData(claimData, shortId));
dispatch(updateShowAssetError(null)); // clear any errors
}, },
onAssetClaimDataClear: () => { onAssetClaimDataClear: () => {
dispatch(updateAssetClaimData(null, null)); dispatch(updateAssetClaimData(null, null));
dispatch(updateShowAssetError(null)); // clear any errors
}, },
}; };
}; };

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

@ -6,17 +6,11 @@ import request from 'utils/request';
class ShowAsset extends React.Component { class ShowAsset extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = {
error: null,
};
this.getLongClaimId = this.getLongClaimId.bind(this); this.getLongClaimId = this.getLongClaimId.bind(this);
this.getClaimData = this.getClaimData.bind(this); this.getClaimData = this.getClaimData.bind(this);
} }
componentDidMount () { componentDidMount () {
console.log('ShowAsset did mount'); const { name, modifier } = this.props;
console.log('ShowAsset props', this.props);
const modifier = this.props.modifier;
const name = this.props.claim;
// create request params // create request params
let body = {}; let body = {};
if (modifier) { if (modifier) {
@ -41,11 +35,10 @@ class ShowAsset extends React.Component {
return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]); return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]);
}) })
.then(([shortId, claimData]) => { .then(([shortId, claimData]) => {
this.setState({error: null}); // note: move this to redux level
this.props.onAssetClaimDataUpdate(claimData, shortId); this.props.onAssetClaimDataUpdate(claimData, shortId);
}) })
.catch(error => { .catch(error => {
this.setState({error}); this.props.onShowAssetError(error);
}); });
} }
getLongClaimId (params) { getLongClaimId (params) {
@ -101,26 +94,25 @@ class ShowAsset extends React.Component {
this.props.onAssetClaimDataClear(); this.props.onAssetClaimDataClear();
} }
render () { render () {
if (this.props.claimData) { const { error, claimData, extension } = this.props;
if (this.props.extension) { if (error) {
return (
<p>{error}</p>
);
}
if (claimData) {
if (extension) {
return ( return (
<ShowAssetLite <ShowAssetLite />
error={this.state.error}
claimData={this.props.claimData}
/>
); );
} else { } else {
return ( return (
<ShowAssetDetails <ShowAssetDetails />
error={this.state.error}
claimData={this.props.claimData}
shortId={this.props.shortId}
/>
); );
} }
}; };
return ( return (
<div></div> <div> </div>
); );
} }
}; };

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

@ -4,7 +4,7 @@ import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
requestType: show.requestType, requestType: show.request.type,
}; };
}; };

46
react/reducers/show.js
View file

@ -3,7 +3,10 @@ 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 = {
requestType : null, request: {
error: null,
type : null,
},
channelRequest: { channelRequest: {
name: null, name: null,
id : null, id : null,
@ -34,10 +37,13 @@ const initialState = {
}, },
showAsset: { showAsset: {
error : null, error : null,
status : LOCAL_CHECK,
claimData: null, claimData: null,
shortId : null, shortId : null,
}, },
displayAsset: {
error : null,
status: LOCAL_CHECK,
},
}; };
/* /*
@ -46,16 +52,26 @@ Reducers describe how the application's state changes in response to actions
export default function (state = initialState, action) { export default function (state = initialState, action) {
switch (action.type) { switch (action.type) {
case actions.REQUEST_UPDATE_CHANNEL: case actions.REQUEST_CHANNEL_UPDATE:
return Object.assign({}, state, { return Object.assign({}, state, {
requestType : CHANNEL, request: Object.assign({}, state.request, {
type: CHANNEL,
}),
channelRequest: action.data, channelRequest: action.data,
}); });
case actions.REQUEST_UPDATE_CLAIM: case actions.REQUEST_CLAIM_UPDATE:
return Object.assign({}, state, { return Object.assign({}, state, {
requestType : ASSET, request: Object.assign({}, state.request, {
type: ASSET,
}),
assetRequest: action.data, assetRequest: action.data,
}); });
case actions.REQUEST_ERROR_UPDATE:
return Object.assign({}, state, {
request: Object.assign({}, state.request, {
error: action.data,
}),
});
case actions.CHANNEL_DATA_UPDATE: case actions.CHANNEL_DATA_UPDATE:
return Object.assign({}, state, { return Object.assign({}, state, {
showChannel: Object.assign({}, state.showChannel, { showChannel: Object.assign({}, state.showChannel, {
@ -75,15 +91,21 @@ export default function (state = initialState, action) {
shortId : action.data.shortId, shortId : action.data.shortId,
}), }),
}); });
case actions.FILE_IS_AVAILABLE_UPDATE:
return Object.assign({}, state, {
showAsset: Object.assign({}, state.showAsset, {
status: action.data,
}),
});
case actions.SHOW_ASSET_ERROR: case actions.SHOW_ASSET_ERROR:
return Object.assign({}, state, { return Object.assign({}, state, {
showAsset: Object.assign({}, state.showAsset, { showAsset: Object.assign({}, state.showAsset, {
error: action.data,
}),
});
case actions.FILE_AVAILABILITY_UPDATE:
return Object.assign({}, state, {
displayAsset: Object.assign({}, state.displayAsset, {
status: action.data,
}),
});
case actions.DISPLAY_ASSET_ERROR:
return Object.assign({}, state, {
displayAsset: Object.assign({}, state.displayAsset, {
error : action.data, error : action.data,
status: ERROR, status: ERROR,
}), }),

16
react/sagas/show.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 { updateFileIsAvailable, updateShowAssetError } from 'actions/show'; import { updateFileAvailability, updateDisplayAssetError } from 'actions/show';
import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states';
import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi';
@ -12,27 +12,27 @@ function* retriveFile (action) {
try { try {
({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId)); ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId));
} catch (error) { } catch (error) {
return yield put(updateShowAssetError(error.message)); return yield put(updateDisplayAssetError(error.message));
}; };
if (success) { if (success) {
if (isAvailable) { if (isAvailable) {
return yield put(updateFileIsAvailable(AVAILABLE)); return yield put(updateFileAvailability(AVAILABLE));
} }
yield put(updateFileIsAvailable(UNAVAILABLE)); yield put(updateFileAvailability(UNAVAILABLE));
} else { } else {
yield put(updateShowAssetError(message)); yield put(updateDisplayAssetError(message));
} }
// initiate get request for the file // initiate get request for the file
try { try {
({ success, message } = yield call(triggerClaimGet, name, claimId)); ({ success, message } = yield call(triggerClaimGet, name, claimId));
} catch (error) { } catch (error) {
return yield put(updateShowAssetError(error.message)); return yield put(updateDisplayAssetError(error.message));
}; };
if (success) { if (success) {
console.log('/api/glaim-get response:', message); console.log('/api/glaim-get response:', message);
yield put(updateFileIsAvailable(AVAILABLE)); yield put(updateFileAvailability(AVAILABLE));
} else { } else {
yield put(updateShowAssetError(message)); yield put(updateDisplayAssetError(message));
} }
} }

2
routes/api-routes.js
View file

@ -207,7 +207,7 @@ module.exports = (app) => {
res.status(200).json({success: false, message: error.message}); res.status(200).json({success: false, message: error.message});
}); });
}); });
app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { app.get('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => {
logger.debug('body:', body); logger.debug('body:', body);
const channelName = body.channelName; const channelName = body.channelName;
const channelClaimId = body.channelClaimId; const channelClaimId = body.channelClaimId;