diff --git a/src/FilterLists.Web.V2/package-lock.json b/src/FilterLists.Web.V2/package-lock.json index c6c1284cc..e0870e399 100644 Binary files a/src/FilterLists.Web.V2/package-lock.json and b/src/FilterLists.Web.V2/package-lock.json differ diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx index 1e0b19860..cd267daf3 100644 --- a/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx +++ b/src/FilterLists.Web.V2/src/modules/allListsTable/AllListsTable.tsx @@ -1,12 +1,14 @@ import { Table } from 'antd'; import * as React from "react"; -import { SubscribeButton, Description } from '../../shared'; +import { Description, SubscribeButton, TagCloud } from '../../shared'; import { nameof } from '../../utils'; import './AllListsTable.css'; import { List } from './List'; +import { Tag } from './Tag'; interface State { - data: List[]; + lists: List[]; + tags: Tag[]; pageSize: number; pageSizeOptions: string[]; isNarrowWindow: boolean; @@ -16,7 +18,8 @@ export class AllListsTable extends React.Component<{}, State> { constructor(props: any) { super(props); this.state = { - data: [], + lists: [], + tags: [], pageSize: 0, pageSizeOptions: [], isNarrowWindow: false @@ -25,18 +28,27 @@ export class AllListsTable extends React.Component<{}, State> { } componentDidMount() { + this.fetchData(); 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); } + private fetchData() { + fetch("/api/v1/lists") + .then(response => response.json()) + .then(json => (json as List[]).sort((a, b) => a.name.localeCompare(b.name))) + .then(lists => { this.setState({ lists: lists }); }) + + fetch("/api/v1/tags") + .then(response => response.json()) + .then(json => (json as Tag[]).sort((a, b) => a.name.localeCompare(b.name))) + .then(tags => { this.setState({ tags: tags }); }) + } + private updatePageSize() { const pageSize = Math.floor((window.innerHeight - 275.5) / 59); this.setState({ @@ -49,9 +61,9 @@ export class AllListsTable extends React.Component<{}, State> { render() { return (