updated showAsset to use an id

This commit is contained in:
bill bittner 2018-02-08 16:23:09 -08:00
parent f38a4fb7e5
commit c96c4d1fbd
15 changed files with 42 additions and 60 deletions

View file

@ -61,10 +61,10 @@ export function showNewAsset (name, claimId) {
}; };
}; };
export function updateShowAsset (error, name, claimId, shortId, claimData) { export function updateShowAsset (error, id) {
return { return {
type: actions.SHOW_ASSET_UPDATE, type: actions.SHOW_ASSET_UPDATE,
data: { error, name, claimId, shortId, claimData }, data: { error, id },
}; };
}; };
@ -76,9 +76,9 @@ export function clearShowAsset () {
// add asset to asset list // add asset to asset list
export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { export function upsertAssetToAssetList (id, error, name, claimId, shortId, claimData) {
return { return {
type: actions.ASSET_LIST_ADD, type: actions.ASSET_LIST_UPSERT,
data: { id, error, name, claimId, shortId, claimData }, data: { id, error, name, claimId, shortId, claimData },
}; };
} }

View file

@ -6,7 +6,7 @@ const mapStateToProps = ({ show }) => {
return { return {
error : show.displayAsset.error, error : show.displayAsset.error,
status : show.displayAsset.status, status : show.displayAsset.status,
claimData: show.showAsset.claimData, asset : show.assetList[show.showAsset.id],
}; };
}; };

View file

@ -4,10 +4,12 @@ import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_disp
class AssetDisplay extends React.Component { class AssetDisplay extends React.Component {
componentDidMount () { componentDidMount () {
this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId); const { asset: { claimData: { name, claimId } } } = this.props;
this.props.onFileRequest(name, claimId);
} }
render () { render () {
const { status, error, claimData: { name, claimId, contentType, fileExt, thumbnail } } = this.props; console.log('rendering assetdisplay', this.props);
const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
return ( return (
<div id="asset-display-component"> <div id="asset-display-component">
{(status === LOCAL_CHECK) && {(status === LOCAL_CHECK) &&

View file

@ -3,16 +3,7 @@ import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
shortId : show.showAsset.shortId, asset: show.assetList[show.showAsset.id],
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,
}; };
}; };

View file

@ -27,7 +27,7 @@ class AssetInfo extends React.Component {
} }
} }
render () { render () {
const { shortId, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } = this.props; const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
return ( return (
<div> <div>
{channelName && {channelName &&

View file

@ -3,7 +3,7 @@ import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
title: show.showAsset.claimData.title, title: show.assetList[show.showAsset.id].claimData.title,
}; };
}; };

View file

@ -3,7 +3,7 @@ import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
claimData: show.showAsset.claimData, asset: show.assetList[show.showAsset.id],
}; };
}; };

View file

@ -7,11 +7,11 @@ import AssetInfo from 'components/AssetInfo';
class ShowAssetDetails extends React.Component { class ShowAssetDetails extends React.Component {
render () { render () {
const { claimData } = this.props; const { asset } = this.props;
return ( return (
<div> <div>
<NavBar/> <NavBar/>
{claimData && {asset &&
<div className="row row--tall row--padded"> <div className="row row--tall row--padded">
<div className="column column--10"> <div className="column column--10">
<AssetTitle /> <AssetTitle />

View file

@ -3,8 +3,7 @@ import View from './view';
const mapStateToProps = ({ show }) => { const mapStateToProps = ({ show }) => {
return { return {
name : show.showAsset.claimData.name, asset: show.assetList[show.showAsset.id],
claimId: show.showAsset.claimData.claimId,
}; };
}; };

View file

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

View file

@ -11,7 +11,7 @@ export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW';
export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE';
export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR';
export const ASSET_LIST_ADD = `ASSET_LIST_ADD`; export const ASSET_LIST_UPSERT = `ASSET_LIST_UPSERT`;
// channel request actions // channel request actions
export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW';

View file

@ -13,25 +13,25 @@ const mapStateToProps = ({ show }) => {
assetList : show.assetList, assetList : show.assetList,
// show asset // show asset
error : show.showAsset.error, error : show.showAsset.error,
name : show.showAsset.name, id : show.showAsset.id,
claimData : show.showAsset.claimData,
}; };
}; };
const mapDispatchToProps = dispatch => { const mapDispatchToProps = dispatch => {
return { return {
// new // request
onNewRequest: (id, name, modifier) => { onNewRequest: (id, name, modifier) => {
dispatch(newAssetRequest(id, name, modifier)); dispatch(newAssetRequest(id, name, modifier));
}, },
onRequestError: (error) => { onRequestError: (error) => {
dispatch(updateRequestError(error, null, null)); dispatch(updateRequestError(error, null, null));
}, },
// show asset
onShowNewAsset: (name, claimId) => { onShowNewAsset: (name, claimId) => {
dispatch(showNewAsset(name, claimId)); dispatch(showNewAsset(name, claimId));
}, },
onShowExistingAsset: (error, name, claimId, shortId, claimData) => { onShowExistingAsset: (assetId) => {
dispatch(updateShowAsset(error, name, claimId, shortId, claimData)); dispatch(updateShowAsset(null, assetId));
}, },
onLeaveShowAsset: () => { onLeaveShowAsset: () => {
dispatch(clearShowAsset()); // clear any errors dispatch(clearShowAsset()); // clear any errors

View file

@ -52,7 +52,7 @@ class ShowAsset extends React.Component {
const assetId = `a#${name}#${claimId}`; const assetId = `a#${name}#${claimId}`;
const existingAssetRecord = assetList[assetId]; const existingAssetRecord = assetList[assetId];
if (existingAssetRecord) { // case: the asset data already exists if (existingAssetRecord) { // case: the asset data already exists
this.showExistingAsset(existingAssetRecord); this.showExistingAsset(assetId);
} else { // case: the asset data does not exist yet } else { // case: the asset data does not exist yet
this.showNewAsset(name, claimId); this.showNewAsset(name, claimId);
} }
@ -60,21 +60,20 @@ class ShowAsset extends React.Component {
showNewAsset (name, claimId) { showNewAsset (name, claimId) {
this.props.onShowNewAsset(name, claimId); this.props.onShowNewAsset(name, claimId);
} }
showExistingAsset (existingAssetRecord) { showExistingAsset (assetId) {
let { error, name, claimId, shortId, claimData } = existingAssetRecord; this.props.onShowExistingAsset(assetId);
this.props.onShowExistingAsset(error, name, claimId, shortId, claimData);
} }
componentWillUnmount () { componentWillUnmount () {
this.props.onLeaveShowAsset(); this.props.onLeaveShowAsset();
} }
render () { render () {
const { error, name, requestExtension } = this.props; const { error, id, requestExtension } = this.props;
if (error) { if (error) {
return ( return (
<ErrorPage error={error}/> <ErrorPage error={error}/>
); );
} }
if (name) { // direct requests are passing because name is present so it just goes if (id) { // direct requests are passing because name is present so it just goes
if (requestExtension) { if (requestExtension) {
return ( return (
<ShowAssetLite /> <ShowAssetLite />

View file

@ -24,11 +24,8 @@ const initialState = {
}, },
}, },
showAsset: { showAsset: {
error : null, error: null,
name : null, id : null,
claimId : null,
shortId : null,
claimData: null,
}, },
displayAsset: { displayAsset: {
error : null, error : null,
@ -93,25 +90,19 @@ export default function (state = initialState, action) {
case actions.SHOW_ASSET_UPDATE: case actions.SHOW_ASSET_UPDATE:
return Object.assign({}, state, { return Object.assign({}, state, {
showAsset: Object.assign({}, state.showAsset, { showAsset: Object.assign({}, state.showAsset, {
error : action.data.error, error: action.data.error,
name : action.data.name, id : action.data.id,
claimId : action.data.claimId,
shortId : action.data.shortId,
claimData: action.data.claimData,
}), }),
}); });
case actions.SHOW_ASSET_CLEAR: case actions.SHOW_ASSET_CLEAR:
return Object.assign({}, state, { return Object.assign({}, state, {
showAsset: Object.assign({}, state.showAsset, { showAsset: Object.assign({}, state.showAsset, {
error : null, error: null,
name : null, id : null,
claimId : null,
shortId : null,
claimData: null,
}), }),
}); });
// add asset to asset list // add asset to asset list
case actions.ASSET_LIST_ADD: case actions.ASSET_LIST_UPSERT:
return Object.assign({}, state, { return Object.assign({}, state, {
assetList: Object.assign({}, state.assetList, { assetList: Object.assign({}, state.assetList, {
[action.data.id]: { [action.data.id]: {

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 { updateShowAsset, addAssetToAssetList } from 'actions/show'; import { updateShowAsset, upsertAssetToAssetList } from 'actions/show';
import { getShortId, getClaimData } from 'api/assetApi'; import { getShortId, getClaimData } from 'api/assetApi';
function* getAssetDataAndShowAsset (action) { function* getAssetDataAndShowAsset (action) {
@ -10,10 +10,10 @@ function* getAssetDataAndShowAsset (action) {
try { try {
({success, message, data: shortId} = yield call(getShortId, name, claimId)); ({success, message, data: shortId} = yield call(getShortId, name, claimId));
} catch (error) { } catch (error) {
return yield put(updateShowAsset(error.message, name, claimId)); return yield put(updateShowAsset(error.message, null));
} }
if (!success) { if (!success) {
return yield put(updateShowAsset(message, name, claimId)); return yield put(updateShowAsset(message, null));
} }
// if no error, get claim data // if no error, get claim data
success = null; success = null;
@ -21,13 +21,13 @@ function* getAssetDataAndShowAsset (action) {
try { try {
({success, message, data: claimData} = yield call(getClaimData, name, claimId)); ({success, message, data: claimData} = yield call(getClaimData, name, claimId));
} catch (error) { } catch (error) {
return yield put(updateShowAsset(error.message, name, claimId)); return yield put(updateShowAsset(error.message, null));
} }
if (!success) { if (!success) {
return yield put(updateShowAsset(message, name, claimId)); return yield put(updateShowAsset(message, null));
} }
yield put(updateShowAsset(null, name, claimId, shortId, claimData)); yield put(updateShowAsset(null, id));
yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); yield put(upsertAssetToAssetList(id, null, name, claimId, shortId, claimData));
} }
export function* watchShowNewAsset () { export function* watchShowNewAsset () {