add basic maintainer info to drawer

ref #941

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

@@ -6,6 +6,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { Language } from '../interfaces/Language';
 import { License } from '../interfaces/License';
 import { List } from '../interfaces/List';
+import { Maintainer } from '../interfaces/Maintainer';
 import { Software } from '../interfaces/Software';
 import { Syntax } from '../interfaces/Syntax';
 import { Tag } from '../interfaces/Tag';
@@ -13,6 +14,7 @@ import { Description } from './Description';
 import { LanguageCloud } from './languageCloud';
 import { LicenseTag } from './LicenseTag';
 import { LinkButton } from './LinkButton';
+import { Maintainers } from './Maintainers';
 import { PublishedDate } from './PublishedDate';
 import { SoftwareCloud } from './softwareCloud';
 import { SubscribeButtons } from './SubscribeButtons';
@@ -23,6 +25,7 @@ interface Props {
   list: List;
   languages: Language[];
   license: License | undefined;
+  maintainers: Maintainer[];
   software: Software[];
   syntax: Syntax | undefined;
   tags: Tag[];
@@ -65,6 +68,7 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
         software={props.software}
         showLabel={true} />
       <PublishedDate publishedDate={props.list.publishedDate} />
+      <Maintainers maintainers={props.maintainers} />
       <Divider />
       <ButtonGroup style={{ display: "inherit" }}>
         <SubscribeButtons

src/FilterLists.Web/src/components/Maintainers.tsx

@@ -0,0 +1,48 @@
+import { Card, Icon } from 'antd';
+import React from 'react';
+
+import { Maintainer } from '../interfaces/Maintainer';
+
+interface Props {
+  maintainers: Maintainer[];
+};
+
+export const Maintainers = (props: Props) =>
+  props.maintainers && props.maintainers.length
+    ? <>
+      <h3>Maintainer{props.maintainers.length > 1 ? "s" : ""}:</h3>
+      {props.maintainers.map((m: Maintainer, index: number) =>
+        <MaintainerComponent key={index} maintainer={m} />)}
+    </>
+    : null;
+
+interface MaintainerComponentProps {
+  maintainer: Maintainer;
+}
+
+const MaintainerComponent = (props: MaintainerComponentProps) =>
+  <Card
+    title={props.maintainer.name}
+    actions={[
+      props.maintainer.homeUrl &&
+      <a href={props.maintainer.homeUrl}
+        title={`View ${props.maintainer.name}'s homepage.`}
+        target="_blank"
+        rel="noopener noreferrer">
+        <Icon type="home" key="home" />
+      </a>,
+      props.maintainer.emailAddress &&
+      <a href={`mailto:${props.maintainer.emailAddress}`}
+        title={`Email ${props.maintainer.name}.`}
+        target="_blank"
+        rel="noopener noreferrer">
+        <Icon type="mail" key="mail" />
+      </a>,
+      props.maintainer.twitterHandle &&
+      <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
+        title={`${props.maintainer.twitterHandle} on Twitter`}
+        target="_blank"
+        rel="noopener noreferrer">
+        <Icon type="twitter" key="twitter" />
+      </a>
+    ]} />;

src/FilterLists.Web/src/components/listsTable/ListDrawer.tsx

@@ -4,6 +4,7 @@ import { Redirect, Route, RouteComponentProps, StaticContext } from 'react-route
 import { Language } from '../../interfaces/Language';
 import { License } from '../../interfaces/License';
 import { List } from '../../interfaces/List';
+import { Maintainer } from '../../interfaces/Maintainer';
 import { Software } from '../../interfaces/Software';
 import { Syntax } from '../../interfaces/Syntax';
 import { Tag } from '../../interfaces/Tag';
@@ -13,6 +14,7 @@ interface Props {
   lists: List[];
   languages: Language[];
   licenses: License[];
+  maintainers: Maintainer[];
   software: Software[];
   syntaxes: Syntax[];
   tags: Tag[];
@@ -26,6 +28,7 @@ export const ListDrawer = (props: Props) => {
         list={list as List}
         languages={list.languageIds && props.languages.filter((l: Language) => list.languageIds.includes(l.id))}
         license={list.licenseId ? props.licenses.find((l: License) => list.licenseId === l.id) : props.licenses.find((l: License) => l.id === 5)}
+        maintainers={list.maintainerIds && props.maintainers.filter((m: Maintainer) => list.maintainerIds.includes(m.id))}
         software={list.syntaxId ? props.software.filter((s: Software) => s.syntaxIds.includes(list.syntaxId)) : []}
         syntax={list.syntaxId ? props.syntaxes.find(s => s.id === list.syntaxId) : undefined}
         tags={list.tagIds && props.tags.filter((t: Tag) => list.tagIds.includes(t.id))}

src/FilterLists.Web/src/components/listsTable/ListsTableHoc.tsx

@@ -27,6 +27,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
         lists={lists}
         languages={languages}
         licenses={licenses}
+        maintainers={maintainers}
         software={software}
         syntaxes={syntaxes}
         tags={tags} />