add languages and tags clouds to details drawer

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

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>

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>

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>