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

asset and channel display working

Browse source
This commit is contained in:
bill bittner 2018-02-08 13:22:54 -08:00
parent 967474bfa4
commit c4042ecea9
9 changed files with 48 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
react/actions/show.js
View file

@ -107,10 +107,10 @@ export function showNewChannel (id, channelData) {
}; };
}; };
export function updateShowChannel (error, name, shortId, longId, claimData) { export function updateShowChannel (error, name, shortId, longId, claimsData) {
return { return {
type: actions.SHOW_CHANNEL_UPDATE, type: actions.SHOW_CHANNEL_UPDATE,
data: { error, name, shortId, longId, claimData }, data: { error, name, shortId, longId, claimsData },
}; };
}; };

3
react/api/assetApi.js
View file

@ -1,6 +1,7 @@
import Request from 'utils/request'; import Request from 'utils/request';
export function getLongClaimId (name, modifier) { export function getLongClaimId (name, modifier) {
console.log('getting long claim id for asset:', name, modifier);
let body = {}; let body = {};
// create request params // create request params
if (modifier) { if (modifier) {
@ -26,11 +27,13 @@ export function getLongClaimId (name, modifier) {
}; };
export function getShortId (name, claimId) { export function getShortId (name, claimId) {
console.log('getting short id for asset:', name, claimId);
const url = `/api/claim/short-id/${claimId}/${name}`; const url = `/api/claim/short-id/${claimId}/${name}`;
return Request(url); return Request(url);
}; };
export function getClaimData (name, claimId) { export function getClaimData (name, claimId) {
console.log('getting claim data for asset:', name, claimId);
const url = `/api/claim/data/${name}/${claimId}`; const url = `/api/claim/data/${name}/${claimId}`;
return Request(url); return Request(url);
}; };

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

@ -2,26 +2,27 @@ import { connect } from 'react-redux';
import { updateChannelClaimsData } from 'actions/show'; import { updateChannelClaimsData } from 'actions/show';
import View from './view'; import View from './view';
const mapStateToProps = ({ show : { showChannel: { channelData, channelClaimsData } } }) => { const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsData } } }) => {
return { return {
error : error,
name : channelData.name, name : channelData.name,
longId : channelData.longId, longId : channelData.longId,
claims : channelClaimsData.claims, claims : claimsData.claims,
currentPage: channelClaimsData.currentPage, currentPage: claimsData.currentPage,
totalPages : channelClaimsData.totalPages, totalPages : claimsData.totalPages,
totalClaims: channelClaimsData.totalClaims, totalClaims: claimsData.totalClaims,
}; };
}; };
const mapDispatchToProps = dispatch => { // const mapDispatchToProps = dispatch => {
return { // return {
onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => { // onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => {
dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); // dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims));
}, // },
onChannelClaimsDataClear: () => { // onChannelClaimsDataClear: () => {
dispatch(updateChannelClaimsData(null, null, null, null)); // dispatch(updateChannelClaimsData(null, null, null, null));
}, // },
}; // };
}; // };
export default connect(mapStateToProps, mapDispatchToProps)(View); export default connect(mapStateToProps, null)(View);

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

@ -1,54 +1,38 @@
import React from 'react'; import React from 'react';
import AssetPreview from 'components/AssetPreview'; import AssetPreview from 'components/AssetPreview';
import request from 'utils/request';
class ChannelClaimsDisplay extends React.Component { class ChannelClaimsDisplay extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
this.state = {
error: null,
};
this.showNextResultsPage = this.showNextResultsPage.bind(this); this.showNextResultsPage = this.showNextResultsPage.bind(this);
this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this); this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
} }
componentDidMount () { showNewPage (page) {
const name = this.props.name; console.log(`update claims data with new page ${page}`);
const longId = this.props.longId;
this.updateClaimsData(name, longId, 1);
}
componentWillReceiveProps (nextProps) {
if (nextProps.name !== this.props.name || nextProps.longId !== this.props.longId) {
this.updateClaimsData(nextProps.name, nextProps.longId, 1);
}
}
updateClaimsData (name, longId, page) {
console.log('this function has been moved into the redux sagas');
}
componentWillUnmount () {
this.props.onChannelClaimsDataClear();
} }
showPreviousResultsPage () { showPreviousResultsPage () {
const previousPage = parseInt(this.props.currentPage) - 1; const previousPage = parseInt(this.props.currentPage) - 1;
this.updateClaimsData(this.props.name, this.props.longId, previousPage); this.showNewPage(previousPage);
} }
showNextResultsPage () { showNextResultsPage () {
const nextPage = parseInt(this.props.currentPage) + 1; const nextPage = parseInt(this.props.currentPage) + 1;
this.updateClaimsData(this.props.name, this.props.longId, nextPage); this.showNewPage(nextPage);
} }
render () { render () {
const { error, claims, currentPage, totalPages } = this.props;
return ( return (
<div> <div>
{this.state.error ? ( {error ? (
<div className="row"> <div className="row">
<div className="column column--10"> <div className="column column--10">
<p>{this.state.error}</p> <p>{error}</p>
</div> </div>
</div> </div>
) : ( ) : (
<div className="row row--tall"> <div className="row row--tall">
{this.props.claims && {claims &&
<div> <div>
{this.props.claims.map((claim, index) => <AssetPreview {claims.map((claim, index) => <AssetPreview
name={claim.name} name={claim.name}
claimId={claim.claimId} claimId={claim.claimId}
fileExt={claim.fileExt} fileExt={claim.fileExt}
@ -56,10 +40,10 @@ class ChannelClaimsDisplay extends React.Component {
key={`${claim.name}-${index}`} key={`${claim.name}-${index}`}
/>)} />)}
<div> <div>
{(this.props.currentPage > 1) && {(currentPage > 1) &&
<button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button> <button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
} }
{(this.props.currentPage < this.props.totalPages) && {(currentPage < totalPages) &&
<button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button> <button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
} }
</div> </div>

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

@ -25,7 +25,7 @@ class ShowAsset extends React.Component {
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
// case where componentDidMount triggered new props // case where componentDidMount triggered new props
if (requestIsNewRequest(nextProps, this.props)) { if (requestIsAnAssetRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) {
const { requestId, requestName, requestModifier, assetRequests } = nextProps; const { requestId, requestName, requestModifier, assetRequests } = nextProps;
const existingRequest = assetRequests[requestId]; const existingRequest = assetRequests[requestId];
if (existingRequest) { // case: the assetRequest exists if (existingRequest) { // case: the assetRequest exists
@ -34,7 +34,7 @@ class ShowAsset extends React.Component {
this.onNewRequest(requestId, requestName, requestModifier); this.onNewRequest(requestId, requestName, requestModifier);
} }
} else { } else {
console.log('show.assetRequestId did not update'); console.log('ShowAsset receiving new props -> request.id did not update', nextProps);
} }
} }
onNewRequest (id, requestName, requestModifier) { onNewRequest (id, requestName, requestModifier) {

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

@ -30,8 +30,8 @@ const mapDispatchToProps = dispatch => {
onShowNewChannel: (id, channelData) => { onShowNewChannel: (id, channelData) => {
dispatch(showNewChannel(id, channelData)); dispatch(showNewChannel(id, channelData));
}, },
onShowExistingChannel: (error, name, shortId, longId, claimData) => { onShowExistingChannel: (error, name, shortId, longId, claimsData) => {
dispatch(updateShowChannel(error, name, shortId, longId, claimData)); dispatch(updateShowChannel(error, name, shortId, longId, claimsData));
}, },
onShowChannelClear: () => { onShowChannelClear: () => {
dispatch(clearShowChannel()); dispatch(clearShowChannel());

9
react/containers/ShowChannel/view.jsx
View file

@ -32,6 +32,8 @@ class ShowChannel extends React.Component {
} else { } else {
this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); this.onNewChannelRequest(requestId, requestChannelName, requestChannelId);
} }
} else {
console.log('ShowChannel receiving new props -> request.id did not update', nextProps);
}; };
} }
onNewChannelRequest (requestId, requestName, requestChannelId) { onNewChannelRequest (requestId, requestName, requestChannelId) {
@ -47,7 +49,7 @@ class ShowChannel extends React.Component {
const channelRecordId = `c#${channelData.name}#${channelData.longId}`; const channelRecordId = `c#${channelData.name}#${channelData.longId}`;
const existingChannel = channelList[channelRecordId]; const existingChannel = channelList[channelRecordId];
if (existingChannel) { if (existingChannel) {
this.showExistingChannel(channelRecordId, existingChannel); this.showExistingChannel(existingChannel);
} else { } else {
this.showNewChannel(channelRecordId, channelData); this.showNewChannel(channelRecordId, channelData);
} }
@ -56,8 +58,9 @@ class ShowChannel extends React.Component {
this.props.onShowNewChannel(channelRecordId, channelData); this.props.onShowNewChannel(channelRecordId, channelData);
}; };
showExistingChannel (existingChannel) { showExistingChannel (existingChannel) {
const { error, channelData: {name, shortId, longId}, claimData } = existingChannel; console.log('showExistingChannel:', existingChannel);
this.props.onShowExistingChannel(error, name, shortId, longId, claimData); const { error, channelData: {name, shortId, longId}, claimsData } = existingChannel;
this.props.onShowExistingChannel(error, name, shortId, longId, claimsData);
}; };
componentWillUnmount () { componentWillUnmount () {
console.log('ShowChannel will unmount'); console.log('ShowChannel will unmount');

6
react/reducers/show.js
View file

@ -16,7 +16,7 @@ const initialState = {
shortId: null, shortId: null,
longId : null, longId : null,
}, },
channelClaimsData: { claimsData: {
claims : null, claims : null,
currentPage: null, currentPage: null,
totalPages : null, totalPages : null,
@ -147,7 +147,7 @@ export default function (state = initialState, action) {
shortId: action.data.shortId, shortId: action.data.shortId,
longId : action.data.longId, longId : action.data.longId,
}, },
claimData: action.data.claimData, claimsData: action.data.claimsData,
}, },
}); });
case actions.SHOW_CHANNEL_CLEAR: case actions.SHOW_CHANNEL_CLEAR:
@ -159,7 +159,7 @@ export default function (state = initialState, action) {
shortId: null, shortId: null,
longId : null, longId : null,
}, },
channelClaimsData: { claimsData: {
claims : null, claims : null,
currentPage: null, currentPage: null,
totalPages : null, totalPages : null,

3
react/sagas/show.js
View file

@ -118,7 +118,8 @@ function* getNewChannelDataAndShowChannel (action) {
// yield put(addNewChannelToChannelList(id, message, null, null)); // yield put(addNewChannelToChannelList(id, message, null, null));
} }
yield put(updateShowChannel(null, name, shortId, longId, claimsData)); yield put(updateShowChannel(null, name, shortId, longId, claimsData));
yield put(addNewChannelToChannelList(id, null, name, shortId, longId, claimsData)); const channelData = {name, shortId, longId};
yield put(addNewChannelToChannelList(id, null, channelData, claimsData));
} }
export function* watchNewAssetRequest () { export function* watchNewAssetRequest () {