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 ( - dataSource={this.state.data} + dataSource={this.state.lists} rowKey={record => record.id.toString()} - loading={this.state.data.length === 0 ? true : false} + loading={this.state.lists.length === 0 ? true : false} size="small" pagination={{ size: "small", @@ -84,7 +96,8 @@ export class AllListsTable extends React.Component<{}, State> { title="Tags" dataIndex={nameof("tagIds")} - render={(text: string) =>
{text}
} /> + render={(tagIds: number[]) => + tagIds.includes(t.id))} />} /> title="Subscribe" dataIndex={nameof("viewUrl")} width={123} diff --git a/src/FilterLists.Web.V2/src/modules/allListsTable/Tag.ts b/src/FilterLists.Web.V2/src/modules/allListsTable/Tag.ts new file mode 100644 index 000000000..755e683f7 --- /dev/null +++ b/src/FilterLists.Web.V2/src/modules/allListsTable/Tag.ts @@ -0,0 +1,6 @@ +export interface Tag { + id: number; + description: string; + filterListIds: number[]; + name: string; +}; \ No newline at end of file diff --git a/src/FilterLists.Web.V2/src/shared/TagCloud.tsx b/src/FilterLists.Web.V2/src/shared/TagCloud.tsx new file mode 100644 index 000000000..2a8bf3400 --- /dev/null +++ b/src/FilterLists.Web.V2/src/shared/TagCloud.tsx @@ -0,0 +1,20 @@ +import { Tag } from 'antd'; +import * as React from "react"; + +interface TagData { + description: string; + name: string; +}; + +interface Props { + tags?: TagData[] +}; + +export const TagCloud = (props: Props): JSX.Element | null => { + return props.tags + ?
+ {props.tags.map((t: TagData, i: number) => + {t.name})} +
+ : null; +}; \ No newline at end of file diff --git a/src/FilterLists.Web.V2/src/shared/index.ts b/src/FilterLists.Web.V2/src/shared/index.ts index 55147fbd6..4d83351b7 100644 --- a/src/FilterLists.Web.V2/src/shared/index.ts +++ b/src/FilterLists.Web.V2/src/shared/index.ts @@ -1,5 +1,5 @@ import { SubscribeButton } from './buttons'; import { Description } from './Description'; +import { TagCloud } from './TagCloud'; -export { SubscribeButton }; -export { Description }; +export { SubscribeButton, Description, TagCloud };