implement TagCloud column

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 (
       <Table<List>
-        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> {
         <Table.Column<List>
           title="Tags"
           dataIndex={nameof<List>("tagIds")}
-          render={(text: string) => <div>{text}</div>} />
+          render={(tagIds: number[]) =>
+            <TagCloud tags={this.state.tags.filter((t: Tag) => tagIds.includes(t.id))} />} />
         <Table.Column<List> title="Subscribe"
           dataIndex={nameof<List>("viewUrl")}
           width={123}

src/FilterLists.Web.V2/src/modules/allListsTable/Tag.ts

@@ -0,0 +1,6 @@
+export interface Tag {
+  id: number;
+  description: string;
+  filterListIds: number[];
+  name: string;
+};

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
+    ? <div>
+      {props.tags.map((t: TagData, i: number) =>
+        <Tag key={i} title={t.description}>{t.name}</Tag>)}
+    </div>
+    : null;
+};

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 };