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) {
return {
type: actions.REQUEST_UPDATE_CHANNEL,
type: actions.REQUEST_CHANNEL_UPDATE,
data: {
name,
id,
@ -12,7 +12,7 @@ export function updateRequestWithChannelRequest (name, id) {
export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) {
return {
type: actions.REQUEST_UPDATE_CLAIM,
type: actions.REQUEST_CLAIM_UPDATE,
data: {
name,
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) {
return {
type: actions.CHANNEL_DATA_UPDATE,
@ -70,9 +77,9 @@ export function fileRequested (name, claimId) {
};
};
export function updateFileIsAvailable (status) {
export function updateFileAvailability (status) {
return {
type: actions.FILE_IS_AVAILABLE_UPDATE,
type: actions.FILE_AVAILABILITY_UPDATE,
data: status,
};
};
@ -83,3 +90,10 @@ export function updateShowAssetError (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 }) => {
return {
error : show.showAsset.error,
status : show.showAsset.status,
error : show.displayAsset.error,
status : show.displayAsset.status,
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 ProgressBar from 'components/ProgressBar/index';
import ProgressBar from 'components/ProgressBar';
import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_display_states';
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);
}
render () {
const status = this.props.status;
const error = this.props.error;
const { name, claimId, contentType, fileExt, thumbnail } = this.props.claimData;
const { status, error, claimData: { name, claimId, contentType, fileExt, thumbnail } } = this.props;
return (
<div id="asset-display-component">
{(status === LOCAL_CHECK) &&

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

@ -1,179 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import View from './view';
class AssetInfo extends React.Component {
constructor (props) {
super(props);
this.state = {
showDetails: false,
const mapStateToProps = ({ show }) => {
return {
shortId : show.showAsset.shortId,
channelName : show.showAsset.claimData.channelName,
certificateId: show.showAsset.claimData.certificateId,
description : show.showAsset.claimData.description,
name : show.showAsset.claimData.name,
claimId : show.showAsset.claimData.claimId,
fileExt : show.showAsset.claimData.fileExt,
contentType : show.showAsset.claimData.contentType,
thumbnail : show.showAsset.claimData.thumbnail,
host : show.showAsset.claimData.host,
};
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 { 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 = {
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;
export default connect(mapStateToProps, null)(View);

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}) => {
return (
<div>
<span className="text--large">{title}</span>
</div>
);
const mapStateToProps = ({ show }) => {
return {
title: show.showAsset.claimData.title,
};
};
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 PropTypes from 'prop-types';
import NavBar from 'containers/NavBar';
import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'containers/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
import { connect } from 'react-redux';
import View from './view';
class ShowAssetDetails extends React.Component {
render () {
const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props;
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>
);
}
const mapStateToProps = ({ show }) => {
return {
claimData: show.showAsset.claimData,
};
};
ShowAssetDetails.propTypes = {
error : PropTypes.string,
claimData: PropTypes.object.isRequired,
shortId : PropTypes.string.isRequired,
};
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 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 PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import AssetDisplay from 'containers/AssetDisplay';
import { connect } from 'react-redux';
import View from './view';
class ShowLite extends React.Component {
render () {
const { error, claimData: { name, claimId } } = this.props;
return (
<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>
);
}
const mapStateToProps = ({ show }) => {
return {
name : show.showAsset.claimData.name,
claimId: show.showAsset.claimData.claimId,
};
};
ShowLite.propTypes = {
error : PropTypes.string,
claimData: PropTypes.object.isRequired,
};
export default ShowLite;
export default connect(mapStateToProps, null)(View);

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_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM';
export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE';
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_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE';
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 DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR';

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

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

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

@ -1,24 +1,29 @@
import { connect } from 'react-redux';
import View from './view';
import { updateAssetClaimData } from 'actions/show';
import { updateAssetClaimData, updateShowAssetError } from 'actions/show';
const mapStateToProps = ({ show }) => {
return {
modifier : show.assetRequest.modifier,
claim : show.assetRequest.name,
name : show.assetRequest.name,
extension: show.assetRequest.extension,
error : show.showAsset.error,
claimData: show.showAsset.claimData,
shortId : show.showAsset.shortId,
};
};
const mapDispatchToProps = dispatch => {
return {
onShowAssetError: (error) => {
dispatch(updateShowAssetError(error));
},
onAssetClaimDataUpdate: (claimData, shortId) => {
dispatch(updateAssetClaimData(claimData, shortId));
dispatch(updateShowAssetError(null)); // clear any errors
},
onAssetClaimDataClear: () => {
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 {
constructor (props) {
super(props);
this.state = {
error: null,
};
this.getLongClaimId = this.getLongClaimId.bind(this);
this.getClaimData = this.getClaimData.bind(this);
}
componentDidMount () {
console.log('ShowAsset did mount');
console.log('ShowAsset props', this.props);
const modifier = this.props.modifier;
const name = this.props.claim;
const { name, modifier } = this.props;
// create request params
let body = {};
if (modifier) {
@ -41,11 +35,10 @@ class ShowAsset extends React.Component {
return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]);
})
.then(([shortId, claimData]) => {
this.setState({error: null}); // note: move this to redux level
this.props.onAssetClaimDataUpdate(claimData, shortId);
})
.catch(error => {
this.setState({error});
this.props.onShowAssetError(error);
});
}
getLongClaimId (params) {
@ -101,26 +94,25 @@ class ShowAsset extends React.Component {
this.props.onAssetClaimDataClear();
}
render () {
if (this.props.claimData) {
if (this.props.extension) {
const { error, claimData, extension } = this.props;
if (error) {
return (
<ShowAssetLite
error={this.state.error}
claimData={this.props.claimData}
/>
<p>{error}</p>
);
}
if (claimData) {
if (extension) {
return (
<ShowAssetLite />
);
} else {
return (
<ShowAssetDetails
error={this.state.error}
claimData={this.props.claimData}
shortId={this.props.shortId}
/>
<ShowAssetDetails />
);
}
};
return (
<div></div>
<div> </div>
);
}
};

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

@ -4,7 +4,7 @@ import View from './view';
const mapStateToProps = ({ show }) => {
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';
const initialState = {
requestType : null,
request: {
error: null,
type : null,
},
channelRequest: {
name: null,
id : null,
@ -34,10 +37,13 @@ const initialState = {
},
showAsset: {
error : null,
status : LOCAL_CHECK,
claimData: 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) {
switch (action.type) {
case actions.REQUEST_UPDATE_CHANNEL:
case actions.REQUEST_CHANNEL_UPDATE:
return Object.assign({}, state, {
requestType : CHANNEL,
request: Object.assign({}, state.request, {
type: CHANNEL,
}),
channelRequest: action.data,
});
case actions.REQUEST_UPDATE_CLAIM:
case actions.REQUEST_CLAIM_UPDATE:
return Object.assign({}, state, {
requestType : ASSET,
request: Object.assign({}, state.request, {
type: ASSET,
}),
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:
return Object.assign({}, state, {
showChannel: Object.assign({}, state.showChannel, {
@ -75,15 +91,21 @@ export default function (state = initialState, action) {
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:
return Object.assign({}, state, {
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,
status: ERROR,
}),

16
react/sagas/show.js
View file

@ -1,6 +1,6 @@
import { call, put, takeLatest } from 'redux-saga/effects';
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 { checkFileAvailability, triggerClaimGet } from 'api/fileApi';
@ -12,27 +12,27 @@ function* retriveFile (action) {
try {
({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId));
} catch (error) {
return yield put(updateShowAssetError(error.message));
return yield put(updateDisplayAssetError(error.message));
};
if (success) {
if (isAvailable) {
return yield put(updateFileIsAvailable(AVAILABLE));
return yield put(updateFileAvailability(AVAILABLE));
}
yield put(updateFileIsAvailable(UNAVAILABLE));
yield put(updateFileAvailability(UNAVAILABLE));
} else {
yield put(updateShowAssetError(message));
yield put(updateDisplayAssetError(message));
}
// initiate get request for the file
try {
({ success, message } = yield call(triggerClaimGet, name, claimId));
} catch (error) {
return yield put(updateShowAssetError(error.message));
return yield put(updateDisplayAssetError(error.message));
};
if (success) {
console.log('/api/glaim-get response:', message);
yield put(updateFileIsAvailable(AVAILABLE));
yield put(updateFileAvailability(AVAILABLE));
} 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});
});
});
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);
const channelName = body.channelName;
const channelClaimId = body.channelClaimId;