lbry-desktop/src/renderer/component/uriIndicator/view.jsx

97 lines
2.2 KiB
React
Raw Normal View History

import React from 'react';
import Icon from 'component/icon';
import Link from 'component/link';
import lbryuri from 'lbryuri';
import classnames from 'classnames';
2017-05-02 07:25:31 +02:00
2017-06-08 06:42:19 +02:00
class UriIndicator extends React.PureComponent {
2017-05-21 16:42:34 +02:00
componentWillMount() {
2017-06-06 23:19:12 +02:00
this.resolve(this.props);
2017-05-21 16:42:34 +02:00
}
2017-05-02 07:25:31 +02:00
2017-05-21 16:42:34 +02:00
componentWillReceiveProps(nextProps) {
2017-06-06 23:19:12 +02:00
this.resolve(nextProps);
2017-05-10 05:06:48 +02:00
}
2017-05-21 16:42:34 +02:00
resolve(props) {
2017-06-06 23:19:12 +02:00
const { isResolvingUri, resolveUri, claim, uri } = props;
2017-05-10 05:06:48 +02:00
2017-06-06 23:19:12 +02:00
if (!isResolvingUri && claim === undefined && uri) {
resolveUri(uri);
2017-05-21 16:42:34 +02:00
}
2017-05-02 07:25:31 +02:00
}
2017-05-21 16:42:34 +02:00
render() {
const { claim, link, uri, isResolvingUri, smallCard, span } = this.props;
2017-05-21 16:42:34 +02:00
if (isResolvingUri && !claim) {
2017-06-06 23:19:12 +02:00
return <span className="empty">Validating...</span>;
2017-05-21 16:42:34 +02:00
}
if (!claim) {
2017-06-06 23:19:12 +02:00
return <span className="empty">Unused</span>;
2017-05-21 16:42:34 +02:00
}
2017-05-02 07:25:31 +02:00
2017-05-21 16:42:34 +02:00
const {
channel_name: channelName,
has_signature: hasSignature,
signature_is_valid: signatureIsValid,
2017-09-17 22:33:52 +02:00
value,
2017-06-06 23:19:12 +02:00
} = claim;
2017-09-17 22:33:52 +02:00
const channelClaimId =
value && value.publisherSignature && value.publisherSignature.certificateId;
2017-05-21 16:42:34 +02:00
if (!hasSignature || !channelName) {
return <span className="empty">Anonymous</span>;
}
2017-09-17 22:33:52 +02:00
let icon, channelLink, modifier;
2017-05-21 16:42:34 +02:00
if (signatureIsValid) {
modifier = 'valid';
channelLink = link ? lbryuri.build({ channelName, claimId: channelClaimId }, false) : false;
2017-05-21 16:42:34 +02:00
} else {
icon = 'icon-times-circle';
modifier = 'invalid';
2017-05-21 16:42:34 +02:00
}
2017-09-17 22:33:52 +02:00
const inner = (
2017-05-21 16:42:34 +02:00
<span>
<span
className={classnames('channel-name', {
'channel-name--small': smallCard,
'button-text no-underline': link,
})}
>
2017-11-22 21:28:56 +01:00
{channelName}
</span>{' '}
2017-11-21 20:51:12 +01:00
{!signatureIsValid ? (
<Icon
icon={icon}
className={`channel-indicator__icon channel-indicator__icon--${modifier}`}
2017-11-21 20:51:12 +01:00
/>
) : (
''
2017-11-21 20:51:12 +01:00
)}
2017-05-21 16:42:34 +02:00
</span>
2017-06-06 23:19:12 +02:00
);
2017-09-17 22:33:52 +02:00
if (!channelLink) {
return inner;
}
return (
2017-10-08 23:56:59 +02:00
<Link
navigate="/show"
navigateParams={{ uri: channelLink }}
className="no-underline"
span={span}
2017-10-08 23:56:59 +02:00
>
2017-09-17 22:33:52 +02:00
{inner}
</Link>
);
2017-05-21 16:42:34 +02:00
}
2017-05-02 07:25:31 +02:00
}
2017-06-06 06:21:55 +02:00
export default UriIndicator;