React router #343
|
|
@ -276,7 +276,7 @@ a, a:visited {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.align-content-right {
|
||||
.align-content-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
|
@ -495,7 +495,7 @@ table {
|
|||
padding: 1em;
|
||||
}
|
||||
|
||||
#asset-preview {
|
||||
#dropzone-preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -506,6 +506,20 @@ table {
|
|||
|
||||
/* Assets */
|
||||
|
||||
.asset-holder {
|
||||
clear : both;
|
||||
display: inline-block;
|
||||
width : 31%;
|
||||
padding: 0px;
|
||||
margin : 1%;
|
||||
}
|
||||
|
||||
.asset-preview {
|
||||
width : 100%;
|
||||
padding: 0px;
|
||||
margin : 0px
|
||||
}
|
||||
|
||||
.asset {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ class AssetInfo extends React.Component {
|
|||
This should be a This should be a `button` if it isn't linking anywhere.
|
||||
</div>
|
||||
}
|
||||
<div className="row row--wide">
|
||||
<a className="text link--primary" id="show-details-toggle" href="#" onClick={this.toggleDetails}>{this.state.showDetails ? '[less]' : '[more]'}</a>
|
||||
|
This should be a This should be a `button` if it isn't linking anywhere.
|
||||
<button className="button--primary" onClick={this.toggleDetails}>{this.state.showDetails ? '[less]' : '[more]'}</button>
|
||||
|
This should be a This should be a `button` if it isn't linking anywhere.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
This should be a This should be a `button` if it isn't linking anywhere.
This should be a This should be a `button` if it isn't linking anywhere.
|
||||
|
|
@ -4,20 +4,8 @@ import { Link } from 'react-router-dom';
|
|||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
|
||||
const directSourceLink = `${claimId}/${name}.${fileExt}`;
|
||||
const showUrlLink = `${claimId}/${name}`;
|
||||
const previewHolderStyle = {
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
clear : 'both',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
display: 'inline-block',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
width : '31%',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
padding: '0px',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
margin : '1%',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
};
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
const assetStyle = {
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
width : '100%',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
padding: '0px',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
margin : '0px',
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
};
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
return (
|
||||
<div style={previewHolderStyle}>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
<div className="asset-holder">
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
<Link to={showUrlLink} >
|
||||
{(() => {
|
||||
switch (contentType) {
|
||||
|
|
@ -25,15 +13,15 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
|
|||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
case 'image/jpg':
|
||||
case 'image/png':
|
||||
return (
|
||||
<img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name}/>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
<img className={'asset-preview'} src={directSourceLink} alt={name}/>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
);
|
||||
case 'image/gif':
|
||||
return (
|
||||
<img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name}/>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
<img className={'asset-preview'} src={directSourceLink} alt={name}/>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<video style={assetStyle}>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
<video className={'asset-preview'}>
|
||||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
<source src={directSourceLink} type={contentType}/>
|
||||
</video>
|
||||
);
|
||||
|
|
|
|||
|
Any reason these aren't just css? Any reason these aren't just css?
oops oops
Any reason these aren't just css? Any reason these aren't just css?
oops oops
|
||||
|
|
@ -34,7 +34,7 @@ class Preview extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<img
|
||||
id="asset-preview"
|
||||
id="dropzone-preview"
|
||||
src={this.state.imgSource}
|
||||
className={this.props.dimPreview ? 'dim' : ''}
|
||||
alt="publish preview"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ class ChannelClaimsDisplay extends React.Component {
|
|||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
this.state = {
|
||||
error: null,
|
||||
};
|
||||
this.showNextResultsPage = this.showNextResultsPage.bind(this);
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
}
|
||||
componentDidMount () {
|
||||
const name = this.props.name;
|
||||
|
|
@ -66,8 +68,12 @@ class ChannelClaimsDisplay extends React.Component {
|
|||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
key={`${claim.name}-${index}`}
|
||||
/>)}
|
||||
<div>
|
||||
{(this.props.currentPage > 1) && <button onClick={this.showPreviousResultsPage}>Previous Page</button>}
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
{(this.props.currentPage < this.props.totalPages) && <button onClick={this.showNextResultsPage}>Next Page</button>}
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
{(this.props.currentPage > 1) &&
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
<button className={'button--primary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
}
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
{(this.props.currentPage < this.props.totalPages) &&
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
<button className={'button--primary'} onClick={this.showNextResultsPage}>Next Page</button>
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
}
|
||||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch This might be what you were thinking of doing, but instead of doing the request here, then calling an action to update the data or set an error, just dispatch `updateClaimsData` action which makes the call, then updates the redux state accordingly. I think making an effort to keep all data logic inside of redux files can simplify a lot of components (for the most part)
|
||||
|
|
@ -51,8 +51,8 @@ class ShowChannel extends React.Component {
|
|||
|
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
|
||||
<div className="row row--tall row--padded">
|
||||
<div className="column column--10">
|
||||
<h2>channel name: {this.props.name ? this.props.name : 'loading...'}</h2>
|
||||
<p>full channel id: {this.props.longId ? this.props.longId : 'loading...'}</p>
|
||||
|
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
|
||||
<p>short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}</p>
|
||||
|
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
|
||||
<p className={'fine-print'}>full channel id: {this.props.longId ? this.props.longId : 'loading...'}</p>
|
||||
|
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
|
||||
<p className={'fine-print'}>short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}</p>
|
||||
|
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
|
||||
</div>
|
||||
<div className="column column--10">
|
||||
{(this.props.name && this.props.longId) && <ChannelClaimsDisplay />}
|
||||
|
|
|
|||
|
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
Same comments above about Same comments above about `previousRequest`. I think a more understandable approach would just be:
```
if (!channel) this.props.onNewChannelRequest(...)
```
See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done. See above re: previous request. I mostly fixed this, but not sure if more consolidation can be done.
|
||||
This should be a
buttonif it isn't linking anywhere.