From 7546c7e65582ec4c980af7732a3a49947c8490b0 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sun, 25 Aug 2019 18:24:03 -0500
Subject: [PATCH] add languages and tags clouds to details drawer

---
 .../src/components/ListDetailsDrawer.tsx         | 16 +++++++++++++++-
 .../components/languageCloud/LanguageCloud.tsx   |  2 ++
 .../src/components/listsTable/ListsTable.tsx     |  2 +-
 .../src/components/tagCloud/TagCloud.tsx         |  2 ++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx b/src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx
index 203937a1e..e9228ada5 100644
--- a/src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx
+++ b/src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx
@@ -2,12 +2,18 @@ import { Drawer } from 'antd';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
+import { Language } from '../interfaces/Language';
 import { List } from '../interfaces/List';
+import { Tag } from '../interfaces/Tag';
 import { Description } from './Description';
+import { LanguageCloud } from './languageCloud';
 import { SubscribeButton } from './subscribeButton';
+import { TagCloud } from './tagCloud';
 
 interface Props {
   list: List;
+  languages: Language[];
+  tags: Tag[];
 };
 
 interface State {
@@ -29,9 +35,17 @@ export class ListDetailsDrawer extends React.Component<RouteComponentProps & Pro
   render() {
     return <Drawer
       visible={true}
+      width={350}
+      title={this.props.list.name}
+      destroyOnClose={true}
       onClose={() => this.props.history.push("/")}>
-      <h2>{this.props.list.name}</h2>
       <Description {...this.props.list} />
+      {this.props.list.languageIds
+        ? <LanguageCloud languages={this.props.languages.filter((l: Language) => this.props.list.languageIds.includes(l.id))} showLabel={true} />
+        : null}
+      {this.props.list.tagIds
+        ? <TagCloud tags={this.props.tags.filter((t: Tag) => this.props.list.tagIds.includes(t.id))} showLabel={true} />
+        : null}
       <SubscribeButton {...this.props.list} />
     </Drawer>
   }
diff --git a/src/FilterLists.Web.V2/src/components/languageCloud/LanguageCloud.tsx b/src/FilterLists.Web.V2/src/components/languageCloud/LanguageCloud.tsx
index 44c474942..d0d09f425 100644
--- a/src/FilterLists.Web.V2/src/components/languageCloud/LanguageCloud.tsx
+++ b/src/FilterLists.Web.V2/src/components/languageCloud/LanguageCloud.tsx
@@ -10,11 +10,13 @@ interface LanguageData {
 
 interface Props {
   languages: LanguageData[]
+  showLabel?: boolean
 };
 
 export const LanguageCloud = (props: Props): JSX.Element | null =>
   props.languages && props.languages.length
     ? <div className={styles.grow}>
+      {props.showLabel && <h3>{`Language${props.languages.length > 1 ? "s" : ""}:`}</h3>}
       {props.languages.map((l: LanguageData, i: number) =>
         <Tag key={i} title={l.name}>{l.iso6391}</Tag>)}
     </div>
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
index 780cfdc6e..6521ad30a 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
@@ -140,7 +140,7 @@ export class ListsTable extends React.Component<RouteComponentProps, State> {
         <Route path="/lists/:id" render={props => {
           const list = this.state.lists.find(l => l.id === +props.match.params.id);
           return list
-            ? <ListDetailsDrawer list={list as List} {...props} />
+            ? <ListDetailsDrawer list={list as List} {...props} {...this.state} />
             : <Redirect to={{ pathname: "/", }} />
         }} />
       </span>
diff --git a/src/FilterLists.Web.V2/src/components/tagCloud/TagCloud.tsx b/src/FilterLists.Web.V2/src/components/tagCloud/TagCloud.tsx
index 9c93523c7..48dbed300 100644
--- a/src/FilterLists.Web.V2/src/components/tagCloud/TagCloud.tsx
+++ b/src/FilterLists.Web.V2/src/components/tagCloud/TagCloud.tsx
@@ -10,11 +10,13 @@ interface TagData {
 
 interface Props {
   tags: TagData[]
+  showLabel?: boolean
 };
 
 export const TagCloud = (props: Props): JSX.Element | null =>
   props.tags && props.tags.length
     ? <div className={styles.grow}>
+      {props.showLabel && <h3>{`Tag${props.tags.length > 1 ? "s" : ""}:`}</h3>}
       {props.tags.map((t: TagData, i: number) =>
         <Tag key={i} title={t.description}>{t.name}</Tag>)}
     </div>