diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx index 4337afb74..ad4980088 100644 --- a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx +++ b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx @@ -7,22 +7,42 @@ import { List } from './List'; interface State { data: List[]; + pageSize: number; + pageSizeOptions: string[]; } export class AllListsTable extends React.Component<{}, State> { constructor(props: any) { super(props); this.state = { - data: [] + data: [], + pageSize: 0, + pageSizeOptions: [] }; + this.updatePageSize = this.updatePageSize.bind(this); } componentDidMount() { + this.updatePageSize(); + window.addEventListener('resize', this.updatePageSize); + fetch("/api/v1/lists") .then(response => response.json()) .then(json => { this.setState({ data: json }); }) } + componentWillUnmount() { + window.removeEventListener('resize', this.updatePageSize); + } + + updatePageSize() { + const pageSize = Math.floor((window.innerHeight - 450) / 42); + this.setState({ + pageSize: pageSize, + pageSizeOptions: [5, 10, 20, 500, 2000, pageSize].sort((a, b) => a - b).map(String) + }); + } + render() { return (