// @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;