add license to drawer

src/FilterLists.Web.V2/src/components/LicenseTag.tsx

@@ -0,0 +1,26 @@
+import { Tag } from 'antd';
+import * as React from 'react';
+
+import { License } from '../interfaces/License';
+
+interface Props {
+  license: License;
+  showLabel?: boolean
+};
+
+export const LicenseTag = (props: Props): JSX.Element | null =>
+  props.license && props.license.name
+    ? <div>
+      {props.showLabel && <h3>License:</h3>}
+      <Tag>
+        <TagContents {...props} />
+      </Tag>
+    </div>
+    : null;
+
+const TagContents = (props: Props): JSX.Element =>
+  props.license.descriptionUrl
+    ? <a href={props.license.descriptionUrl} target="_blank" rel="noopener noreferrer">
+      {props.license.name}
+    </a>
+    : <span>{props.license.name}</span>

src/FilterLists.Web.V2/src/components/ListInfoDrawer.tsx

@@ -4,10 +4,12 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
 import { Language } from '../interfaces/Language';
+import { License } from '../interfaces/License';
 import { List } from '../interfaces/List';
 import { Tag } from '../interfaces/Tag';
 import { Description } from './Description';
 import { LanguageCloud } from './languageCloud';
+import { LicenseTag } from './LicenseTag';
 import { LinkButton } from './LinkButton';
 import { SubscribeButton } from './SubscribeButton';
 import { TagCloud } from './tagCloud';
@@ -15,6 +17,7 @@ import { TagCloud } from './tagCloud';
 interface Props {
   list: List;
   languages: Language[];
+  license?: License;
   tags: Tag[];
 };
 
@@ -45,10 +48,13 @@ export class ListInfoDrawer extends React.Component<RouteComponentProps & Props,
       onClose={() => this.props.history.push("/")}>
       <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} />
+        ? <LanguageCloud languages={this.props.languages} showLabel={true} />
         : null}
       {this.props.list.tagIds
-        ? <TagCloud tags={this.props.tags.filter((t: Tag) => this.props.list.tagIds.includes(t.id))} showLabel={true} />
+        ? <TagCloud tags={this.props.tags} showLabel={true} />
+        : null}
+      {this.props.license
+        ? <LicenseTag license={this.props.license as License} showLabel={true} />
         : null}
       {this.props.list.publishedDate
         ? <div>

src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx

@@ -59,10 +59,10 @@ export class ListsTable extends React.Component<RouteComponentProps, State> {
       .then(json => (json as Tag[]).sort((a, b) => a.name.localeCompare(b.name)))
       .then(tags => { this.setState({ tags: tags }); })
 
-    // fetch("/api/v1/licenses")
-    //   .then(response => response.json())
-    //   .then(json => (json as License[]).sort((a, b) => a.name.localeCompare(b.name)))
-    //   .then(licenses => { this.setState({ licenses: licenses }); })
+    fetch("/api/v1/licenses")
+      .then(response => response.json())
+      .then(json => (json as License[]).sort((a, b) => a.name.localeCompare(b.name)))
+      .then(licenses => { this.setState({ licenses: licenses }); })
   }
 
   private updatePageSize() {
@@ -144,7 +144,12 @@ 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
-            ? <ListInfoDrawer list={list as List} {...props} {...this.state} />
+            ? <ListInfoDrawer
+              list={list as List}
+              languages={list.languageIds && this.state.languages.filter((l: Language) => list.languageIds.includes(l.id))}
+              license={list.licenseId ? this.state.licenses.find((l: License) => list.licenseId === l.id) : undefined}
+              tags={list.tagIds && this.state.tags.filter((t: Tag) => list.tagIds.includes(t.id))}
+              {...this.props} />
             : this.state.lists && this.state.lists.length && <Redirect to={{ pathname: "/", }} />
         }} />
       </span>

src/FilterLists.Web.V2/src/components/tagCloud/TagCloud.tsx

@@ -1,15 +1,11 @@
 import { Tag } from 'antd';
 import React from 'react';
 
+import { Tag as TagInterface } from '../../interfaces/Tag';
 import styles from './TagCloud.module.css';
 
-interface TagData {
-  description: string;
-  name: string;
-};
-
 interface Props {
-  tags: TagData[]
+  tags: TagInterface[]
   showLabel?: boolean
 };
 
@@ -17,7 +13,7 @@ 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) =>
+      {props.tags.map((t: TagInterface, i: number) =>
         <Tag key={i} title={t.description}>{t.name}</Tag>)}
     </div>
     : null;