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

updated show request reducers and actions

Browse source
This commit is contained in:
bill bittner 2018-02-02 11:10:58 -08:00
parent b7ca5ac1ac
commit 1cbe9edf21
12 changed files with 124 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
react/actions/show.js
View file

@ -1,18 +1,22 @@
import * as actions from 'constants/show_action_types';
// export action creators
export function updateClaimRequest (claim) {
export function updateRequestWithChannelRequest (name, id) {
return {
type: actions.CLAIM_REQUEST_UPDATE,
claim,
type: actions.REQUEST_UPDATE_CHANNEL,
name,
id,
};
};
export function updateChannelRequest (channel) {
export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) {
return {
type: actions.CHANNEL_REQUEST_UPDATE,
channel,
type : actions.REQUEST_UPDATE_CLAIM,
name,
id,
channelName: null,
channelId : null,
extension,
};
};
@ -27,7 +31,7 @@ export function updateChannelData (name, longId, shortId) {
export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) {
return {
type: actions.CHANNEL_CLAIMS_UPDATE,
type: actions.CHANNEL_CLAIMS_DATA_UPDATE,
claims,
currentPage,
totalPages,
@ -35,9 +39,9 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC
};
};
export function updateClaimData (data) {
export function updateAssetData (data) {
return {
type: actions.CLAIM_DATA_UPDATE,
type: actions.ASSET_DATA_UPDATE,
data,
};
};

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

@ -4,9 +4,9 @@ import AssetTitle from 'components/AssetTitle';
import AssetDisplay from 'components/AssetDisplay';
import AssetInfo from 'components/AssetInfo';
class ShowDetails extends React.Component {
class ShowAssetDetails extends React.Component {
componentDidMount () {
console.log(this.props);
console.log('ShowAssetDetails props', this.props);
}
render () {
return (
@ -63,4 +63,4 @@ class ShowDetails extends React.Component {
// claimId
// claimName
export default ShowDetails;
export default ShowAssetDetails;

8
react/constants/show_action_types.js
View file

@ -1,5 +1,5 @@
export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE';
export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE';
export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL';
export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM';
export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE';
export const CHANNEL_CLAIMS_UPDATE = 'CHANNEL_CLAIMS_UPDATE';
export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE';
export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE';
export const ASSET_DATA_UPDATE = 'ASSET_DATA_UPDATE';

2
react/constants/show_request_types.js Normal file
View file

@ -0,0 +1,2 @@
export const CHANNEL = 'CHANNEL';
export const ASSET = 'ASSET';

12
react/containers/ChannelClaimsDisplay/index.js
View file

@ -4,12 +4,12 @@ import {updateChannelClaimsData} from 'actions/show';
const mapStateToProps = ({ show }) => {
return {
name : show.channel.name,
id : show.channel.id,
claims : show.channel.claimsData.claims,
currentPage: show.channel.claimsData.currentPage,
totalPages : show.channel.claimsData.totalPages,
totalClaims: show.channel.claimsData.totalClaims,
name : show.channelData.name,
longId : show.channelData.longId,
claims : show.channelClaimsData.claims,
currentPage: show.channelClaimsData.currentPage,
totalPages : show.channelClaimsData.totalPages,
totalClaims: show.channelClaimsData.totalClaims,
};
};

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

@ -7,12 +7,11 @@ class ChannelClaimsDisplay extends React.Component {
super(props);
this.state = {
error: null,
page : 1,
};
this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this);
}
componentDidMount () {
this.getAndStoreChannelClaims(this.props.name, this.props.id, this.state.page);
this.getAndStoreChannelClaims(this.props.name, this.props.longId, this.props.currentPage);
}
getAndStoreChannelClaims (name, id, page) {
if (!id) id = 'none';

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

@ -1,22 +1,20 @@
import { updateClaimData } from 'actions/show';
import { connect } from 'react-redux';
import { updateAssetData } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
return {
request: {
modifier : show.request.claim.modifier,
claim : show.request.claim.name,
extension: show.request.claim.extension,
},
claim: show.claim,
modifier : show.assetRequest.modifier,
claim : show.assetRequest.name,
extension: show.assetRequest.extension,
claimData: show.assetData,
};
};
const mapDispatchToProps = dispatch => {
return {
onClaimDataChange: (data) => {
dispatch(updateClaimData(data));
onAssetDataUpdate: (data) => {
dispatch(updateAssetData(data));
},
};
};

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

@ -1,6 +1,6 @@
import React from 'react';
import ShowAssetLite from 'components/ShowAssetLite/index';
import ShowAssetDetails from 'components/ShowAssetDetails/index';
import ShowAssetLite from 'components/ShowAssetLite';
import ShowAssetDetails from 'components/ShowAssetDetails';
import request from 'utils/request';
class ShowAsset extends React.Component {
@ -15,8 +15,8 @@ class ShowAsset extends React.Component {
componentDidMount () {
console.log('ShowAsset did mount');
console.log('ShowAsset props', this.props);
const modifier = this.props.request.modifier;
const name = this.props.request.claim;
const modifier = this.props.modifier;
const name = this.props.claim;
// create request params
let body = {};
if (modifier) {
@ -42,7 +42,7 @@ class ShowAsset extends React.Component {
return that.getClaimData(name, claimLongId);
})
.then(claimData => {
this.props.onClaimDataChange(claimData);
this.props.onAssetDataUpdate(claimData);
})
.catch(error => {
this.setState({error});
@ -82,18 +82,18 @@ class ShowAsset extends React.Component {
});
}
render () {
if (this.props.request.extension) {
if (this.props.extension) {
return (
<ShowAssetLite
error={this.state.error}
claimData={this.props.claim}
claimData={this.props.claimData}
/>
);
}
return (
<ShowAssetDetails
error={this.state.error}
claimData={this.props.claim}
claimData={this.props.claimData}
/>
);
}

12
react/containers/ShowChannel/index.js
View file

@ -1,17 +1,17 @@
import { connect } from 'react-redux';
import { updateChannelData } from 'actions/show';
import View from './view';
import {updateChannelData} from 'actions/show';
const mapStateToProps = ({ show }) => {
return {
request: {
name: show.request.channel.name,
id : show.request.channel.id,
name: show.channelRequest.name,
id : show.channelRequest.id,
},
channel: {
name : show.channel.name,
shortId: show.channel.shortId,
longId : show.channel.longId,
name : show.channelData.name,
shortId: show.channelData.shortId,
longId : show.channelData.longId,
},
};
};

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

@ -1,20 +1,20 @@
import { updateChannelRequest, updateClaimRequest } from 'actions/show';
import { connect } from 'react-redux';
import { updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show';
import View from './view';
const mapStateToProps = ({ show }) => {
return {
request: show.request,
requestType: show.requestType,
};
};
const mapDispatchToProps = dispatch => {
return {
onChannelRequest: (channel) => {
dispatch(updateChannelRequest(channel));
onChannelRequest: (name, id) => {
dispatch(updateRequestWithChannelRequest(name, id));
},
onClaimRequest: (claim) => {
dispatch(updateClaimRequest(claim));
onAssetRequest: (name, id, channelName, channelId, extension) => {
dispatch(updateRequestWithAssetRequest(name, id, channelName, channelId, extension));
},
};
};

56
react/containers/ShowPage/view.jsx
View file

@ -4,6 +4,8 @@ import ShowAsset from 'containers/ShowAsset';
import ShowChannel from 'containers/ShowChannel';
import lbryUri from 'utils/lbryUri';
import { CHANNEL, ASSET } from 'constants/show_request_types';
class ShowPage extends React.Component {
constructor (props) {
super(props);
@ -46,23 +48,11 @@ class ShowPage extends React.Component {
return this.setState({error: error.message});
}
// update the store
let requestedClaim = {
name : claimName,
modifier: {
id : null,
channel: null,
},
extension,
};
if (isChannel) {
requestedClaim['modifier']['channel'] = {
name: channelName,
id : channelClaimId,
};
return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension);
} else {
requestedClaim['modifier']['id'] = claimId;
return this.props.onAssetRequest(claimName, claimId, null, null, extension);
}
return this.props.onClaimRequest(requestedClaim);
}
parseAndUpdateClaimOnly (claim) {
// this could be a request for an asset or a channel page
@ -75,11 +65,7 @@ class ShowPage extends React.Component {
}
// return early if this request is for a channel
if (isChannel) {
const requestedChannel = {
name: channelName,
id : channelClaimId,
}
return this.props.onChannelRequest(requestedChannel);
return this.props.onChannelRequest(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?
@ -88,39 +74,25 @@ class ShowPage extends React.Component {
} catch (error) {
return this.setState({error: error.message});
}
const requestedClaim = {
name : claimName,
modifier: null,
extension,
}
this.props.onClaimRequest(requestedClaim);
this.props.onAssetRequest(claimName, null, null, null, extension);
}
render () {
console.log('rendering ShowPage');
console.log('ShowPage props', this.props);
if (this.state.error) {
return (
<ErrorPage error={this.state.error}/>
);
}
if (this.props.request) {
if (this.props.request.channel) {
return (
<ShowChannel />
);
} else if (this.props.request.claim) {
return (
<ShowAsset />
);
}
switch (this.props.requestType) {
case CHANNEL:
return <ShowChannel/>;
case ASSET:
return <ShowAsset/>;
default:
return <p>loading...</p>;
}
return (
<p>loading...</p>
);
}
};
// props
// channel
// show
export default ShowPage;

86
react/reducers/show.js
View file

@ -1,22 +1,35 @@
import * as actions from 'constants/show_action_types';
import { CHANNEL, ASSET } from 'constants/show_request_types';
const initialState = {
request: {
channel: null,
claim : null,
requestType : null,
channelRequest: {
name: null,
id : null,
},
channel: {
name : null,
shortId : null,
longId : null,
claimsData: {
claims : null,
currentPage: null,
totalPages : null,
totalClaims: null,
assetRequest: {
name : null,
modifier: {
id : null,
channel: {
name: null,
id : null,
},
},
extension: null,
},
claim: null,
channelData: {
name : null,
shortId: null,
longId : null,
},
channelClaimsData: {
claims : null,
currentPage: 1,
totalPages : null,
totalClaims: null,
},
assetData: null,
};
/*
@ -25,42 +38,49 @@ Reducers describe how the application's state changes in response to actions
export default function (state = initialState, action) {
switch (action.type) {
case actions.CLAIM_REQUEST_UPDATE:
case actions.REQUEST_UPDATE_CHANNEL:
return Object.assign({}, state, {
request: {
channel: null,
claim : action.claim,
requestType : CHANNEL,
channelRequest: {
name: action.name,
id : action.id,
},
});
case actions.CHANNEL_REQUEST_UPDATE:
case actions.REQUEST_UPDATE_CLAIM:
return Object.assign({}, state, {
request: {
channel: action.channel,
claim : null,
requestType : ASSET,
assetRequest: {
name : action.name,
modifier: {
id : action.id,
channel: {
name: action.channelName,
id : action.channelId,
},
},
extension: action.extension,
},
});
case actions.CHANNEL_DATA_UPDATE:
return Object.assign({}, state, {
channel: Object.assign({}, state.channel, {
channelData: Object.assign({}, state.channel, {
name : action.name,
shortId: action.shortId,
longId : action.longId,
}),
});
case actions.CHANNEL_CLAIMS_UPDATE:
case actions.CHANNEL_CLAIMS_DATA_UPDATE:
return Object.assign({}, state, {
channel: Object.assign({}, state.channel, {
claimsData: {
claims : action.claims,
currentPage: action.currentPage,
totalPages : action.totalPages,
totalClaims: action.totalClaims,
},
}),
channelClaimsData: {
claims : action.claims,
currentPage: action.currentPage,
totalPages : action.totalPages,
totalClaims: action.totalClaims,
},
});
case actions.CLAIM_DATA_UPDATE:
case actions.ASSET_DATA_UPDATE:
return Object.assign({}, state, {
claim: action.data,
assetData: action.data,
});
default:
return state;