madiator.com/ui/component/navigationHistoryItem/view.jsx
2021-08-16 12:11:25 +02:00

67 lines
1.6 KiB
JavaScript

// @flow
import React from 'react';
import moment from 'moment';
import classnames from 'classnames';
import Button from 'component/button';
import { FormField } from 'component/common/form';
import { withRouter } from 'react-router-dom';
import { formatLbryUrlForWeb } from 'util/url';
type Props = {
lastViewed: number,
uri: string,
claim: ?StreamClaim,
selected: boolean,
onSelect?: () => void,
resolveUri: string => void,
slim: boolean,
history: { push: string => void },
};
class NavigationHistoryItem extends React.PureComponent<Props> {
static defaultProps = {
slim: false,
};
componentDidMount() {
const { claim, uri, resolveUri } = this.props;
if (!claim) {
resolveUri(uri);
}
}
render() {
const { lastViewed, selected, onSelect, claim, uri, slim, history } = this.props;
let title;
if (claim && claim.value) {
({ title } = claim.value);
}
const navigatePath = formatLbryUrlForWeb(uri);
const onClick =
onSelect ||
function() {
history.push(navigatePath);
};
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="">{moment(lastViewed).from(moment())}</span>
<Button className="item-list__element" button="link" label={uri} navigate={uri} />
<span className="item-list__element">{title}</span>
</div>
);
}
}
export default withRouter(NavigationHistoryItem);