2017-12-21 22:08:54 +01:00
|
|
|
import React from 'react';
|
|
|
|
import CardMedia from 'component/cardMedia';
|
|
|
|
import { TruncatedText, BusyMessage } from 'component/common.js';
|
2017-10-10 01:19:50 +02:00
|
|
|
|
|
|
|
class ChannelTile extends React.PureComponent {
|
|
|
|
componentDidMount() {
|
2017-10-12 15:37:24 +02:00
|
|
|
const { uri, resolveUri } = this.props;
|
2017-10-10 01:19:50 +02:00
|
|
|
|
2017-10-12 15:37:24 +02:00
|
|
|
resolveUri(uri);
|
2017-10-10 01:19:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) {
|
2017-10-12 15:37:24 +02:00
|
|
|
const { uri, resolveUri } = this.props;
|
2017-10-10 01:19:50 +02:00
|
|
|
|
|
|
|
if (nextProps.uri != uri) {
|
2017-10-12 15:37:24 +02:00
|
|
|
resolveUri(uri);
|
2017-10-10 01:19:50 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-10-12 15:37:24 +02:00
|
|
|
const { claim, navigate, isResolvingUri, totalItems, uri } = this.props;
|
2017-10-13 04:08:29 +02:00
|
|
|
let channelName, channelId;
|
|
|
|
|
|
|
|
if (claim) {
|
|
|
|
channelName = claim.name;
|
|
|
|
channelId = claim.claim_id;
|
|
|
|
}
|
2017-10-13 03:37:26 +02:00
|
|
|
|
2017-12-21 22:08:54 +01:00
|
|
|
const onClick = () => navigate('/show', { uri });
|
2017-10-10 01:19:50 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<section className="file-tile card">
|
|
|
|
<div onClick={onClick} className="card__link">
|
2017-12-21 22:08:54 +01:00
|
|
|
<div className="card__inner file-tile__row">
|
2017-10-13 04:08:29 +02:00
|
|
|
{channelName && <CardMedia title={channelName} thumbnail={null} />}
|
2017-10-12 06:25:53 +02:00
|
|
|
<div className="file-tile__content">
|
2017-10-13 03:37:26 +02:00
|
|
|
<div className="card__title-primary">
|
|
|
|
<h3>
|
2017-10-13 04:08:29 +02:00
|
|
|
<TruncatedText lines={1}>{channelName || uri}</TruncatedText>
|
2017-10-13 03:37:26 +02:00
|
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
<div className="card__content card__subtext">
|
2017-12-21 22:08:54 +01:00
|
|
|
{isResolvingUri && <BusyMessage message={__('Resolving channel')} />}
|
2017-11-24 15:31:05 +01:00
|
|
|
{totalItems > 0 && (
|
2017-10-13 03:37:26 +02:00
|
|
|
<span>
|
2017-12-21 22:08:54 +01:00
|
|
|
This is a channel with {totalItems} {totalItems === 1 ? ' item' : ' items'}{' '}
|
|
|
|
inside of it.
|
2017-11-24 15:31:05 +01:00
|
|
|
</span>
|
|
|
|
)}
|
2017-10-13 03:37:26 +02:00
|
|
|
{!isResolvingUri &&
|
2017-12-21 22:08:54 +01:00
|
|
|
!totalItems && <span className="empty">This is an empty channel.</span>}
|
2017-10-13 03:37:26 +02:00
|
|
|
</div>
|
2017-10-10 01:19:50 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ChannelTile;
|