122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import Button from 'component/button';
|
|
import NavigationHistoryItem from 'component/navigationHistoryItem';
|
|
import Paginate from 'component/common/paginate';
|
|
|
|
type HistoryItem = {
|
|
uri: string,
|
|
lastViewed: number,
|
|
};
|
|
|
|
type Props = {
|
|
historyItems: Array<HistoryItem>,
|
|
pageCount: number,
|
|
clearHistoryUri: string => void,
|
|
};
|
|
|
|
type State = {
|
|
itemsSelected: {},
|
|
};
|
|
|
|
class UserHistoryPage extends React.PureComponent<Props, State> {
|
|
constructor() {
|
|
super();
|
|
|
|
this.state = {
|
|
itemsSelected: {},
|
|
};
|
|
|
|
(this: any).selectAll = this.selectAll.bind(this);
|
|
(this: any).unselectAll = this.unselectAll.bind(this);
|
|
(this: any).removeSelected = this.removeSelected.bind(this);
|
|
}
|
|
|
|
onSelect(uri: string) {
|
|
const { itemsSelected } = this.state;
|
|
|
|
const newItemsSelected = { ...itemsSelected };
|
|
if (itemsSelected[uri]) {
|
|
delete newItemsSelected[uri];
|
|
} else {
|
|
newItemsSelected[uri] = true;
|
|
}
|
|
|
|
this.setState({
|
|
itemsSelected: { ...newItemsSelected },
|
|
});
|
|
}
|
|
|
|
selectAll() {
|
|
const { historyItems } = this.props;
|
|
const newSelectedState = {};
|
|
historyItems.forEach(({ uri }) => (newSelectedState[uri] = true));
|
|
this.setState({ itemsSelected: newSelectedState });
|
|
}
|
|
|
|
unselectAll() {
|
|
this.setState({
|
|
itemsSelected: {},
|
|
});
|
|
}
|
|
|
|
removeSelected() {
|
|
const { clearHistoryUri } = this.props;
|
|
const { itemsSelected } = this.state;
|
|
|
|
Object.keys(itemsSelected).forEach(uri => clearHistoryUri(uri));
|
|
this.setState({
|
|
itemsSelected: {},
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { historyItems = [], pageCount } = this.props;
|
|
const { itemsSelected } = this.state;
|
|
const allSelected = Object.keys(itemsSelected).length === historyItems.length;
|
|
const selectHandler = allSelected ? this.unselectAll : this.selectAll;
|
|
|
|
return historyItems.length ? (
|
|
<React.Fragment>
|
|
<div className="card__actions">
|
|
{Object.keys(itemsSelected).length ? (
|
|
<Button button="link" label={__('Delete')} onClick={this.removeSelected} />
|
|
) : (
|
|
<span>{/* Using an empty span so spacing stays the same if the button isn't rendered */}</span>
|
|
)}
|
|
<Button button="link" label={allSelected ? __('Cancel') : __('Select All')} onClick={selectHandler} />
|
|
</div>
|
|
{!!historyItems.length && (
|
|
<section className="card item-list">
|
|
{historyItems.map(item => (
|
|
<NavigationHistoryItem
|
|
key={item.uri}
|
|
uri={item.uri}
|
|
lastViewed={item.lastViewed}
|
|
selected={!!itemsSelected[item.uri]}
|
|
onSelect={() => {
|
|
this.onSelect(item.uri);
|
|
}}
|
|
/>
|
|
))}
|
|
</section>
|
|
)}
|
|
<Paginate totalPages={pageCount} />
|
|
</React.Fragment>
|
|
) : (
|
|
<div className="main--empty">
|
|
<section className="card card--section">
|
|
<h2 className="card__title card__title--deprecated">
|
|
{__('Your history is empty, what are you doing here?')}
|
|
</h2>
|
|
|
|
<div className="card__actions card__actions--center">
|
|
<Button button="primary" navigate="/" label={__('Explore new content')} />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default UserHistoryPage;
|