From 3cf55967cef8c34fa26b4c30eb728607884ac17d Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Wed, 7 Aug 2019 15:14:01 -0500
Subject: [PATCH] implement TagCloud column

---
 src/FilterLists.Web.V2/package-lock.json      | Bin 542414 -> 541902 bytes
 .../modules/allListsTable/AllListsTable.tsx   |  33 ++++++++++++------
 .../src/modules/allListsTable/Tag.ts          |   6 ++++
 .../src/shared/TagCloud.tsx                   |  20 +++++++++++
 src/FilterLists.Web.V2/src/shared/index.ts    |   4 +--
 5 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 src/FilterLists.Web.V2/src/modules/allListsTable/Tag.ts
 create mode 100644 src/FilterLists.Web.V2/src/shared/TagCloud.tsx

diff --git a/src/FilterLists.Web.V2/package-lock.json b/src/FilterLists.Web.V2/package-lock.json
index c6c1284cc9249255342a3c76d7c9c5956fbdb3c0..e0870e3995c5362c48ab202aa61b9c1aa346d724 100644
GIT binary patch
delta 271
zcmX@tt9Y(cv7v>rg{g&k3yW3wbO|LU+39lJOq|;r!dci@rb|S#$WPCYV&R^CA)4hT
zn7dt;jcEoqMCINLmJidondG)B2s3Fjf>_h%MY0G@pDn`F2vKoCgo$PPK29d~>H0Y=
zL14A}b6Dnq)o#Ba&ScL4QYSavSAppnSigZFljZhRicE<d(|2ew$xrv;XX2gykC~lg
zd%PCYZziysEEXn#?JIPdu7Zq_pMI~3QGWVAUM8jKay(3I+t0PJZ~$En@`<b%6W4Uv
nZWc!nmv8$0$!ucNq?kpgJ1l2mZQs+)0>mJiZTp^XcA?z>*0oSW

delta 86
zcmX@tsd%nev7v>rg{g&k3yW3w^bNvHw$tUfnK-v6gtM@*K={5<EWFbvM6=ukbGJ*g
gG40WtCdDi|-C-#UYx|x~79a-EY}@yAvJ3470M%L@WB>pF

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