lbry-desktop/ui/component/navigationHistoryItem/view.jsx

69 lines
1.7 KiB
React
Raw Normal View History

2019-04-01 01:04:01 +02:00
// @flow
import React from 'react';
import moment from 'moment';
import classnames from 'classnames';
import Button from 'component/button';
import { FormField } from 'component/common/form';
2019-04-04 23:05:23 +02:00
import { withRouter } from 'react-router-dom';
2019-04-01 01:04:01 +02:00
import { formatLbryUriForWeb } from 'util/uri';
type Props = {
lastViewed: number,
uri: string,
2019-04-24 16:02:08 +02:00
claim: ?StreamClaim,
2019-04-01 01:04:01 +02:00
selected: boolean,
onSelect?: () => void,
resolveUri: string => void,
slim: boolean,
2019-04-04 23:05:23 +02:00
history: { push: string => void },
2019-04-01 01:04:01 +02:00
};
class NavigationHistoryItem extends React.PureComponent<Props> {
static defaultProps = {
slim: false,
};
componentDidMount() {
const { claim, uri, resolveUri } = this.props;
if (!claim) {
resolveUri(uri);
}
}
render() {
2019-04-04 23:05:23 +02:00
const { lastViewed, selected, onSelect, claim, uri, slim, history } = this.props;
2019-04-01 01:04:01 +02:00
let name;
let title;
2019-04-24 16:02:08 +02:00
if (claim && claim.value) {
2019-04-01 01:04:01 +02:00
({ name } = claim);
2019-04-24 16:02:08 +02:00
({ title } = claim.value);
2019-04-01 01:04:01 +02:00
}
const navigatePath = formatLbryUriForWeb(uri);
const onClick =
onSelect ||
function() {
2019-04-04 23:05:23 +02:00
history.push(navigatePath);
2019-04-01 01:04:01 +02:00
};
return (
<div
role="button"
onClick={onClick}
className={classnames('item-list__row', {
'item-list__row--selected': selected,
})}
>
{!slim && <FormField checked={selected} type="checkbox" onChange={onSelect} />}
<span className="time time--ago">{moment(lastViewed).from(moment())}</span>
<Button className="item-list__element" constrict button="link" label={uri} navigate={uri} />
<span className="item-list__element">{title}</span>
</div>
);
}
}
2019-04-04 23:05:23 +02:00
export default withRouter(NavigationHistoryItem);