add basic maintainer info to details modal

src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx

@@ -39,9 +39,11 @@ export default class ListDetailsModal extends React.Component<any, any> {
     render() {
         return <div>
                    <button onClick={this.openModal} className="btn btn-primary btn-block">Details</button>
-                   <ReactModal isOpen={this.state.isModalOpen} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true}>
+                   <ReactModal isOpen={this.state.isModalOpen} onRequestClose={this.closeModal}
+                       shouldCloseOnOverlayClick={true}>
                        <FilterListDetails details={this.state.filterListDetails}/>
-                       <button onClick={this.closeModal} className="btn btn-danger btn-block" id="close-modal">Close</button>
+                       <button onClick={this.closeModal}
+                           className="btn btn-danger btn-block" id="close-modal">Close</button>
                    </ReactModal>
                </div>;
     }
@@ -50,8 +52,8 @@ export default class ListDetailsModal extends React.Component<any, any> {
 function FilterListDetails(props: any) {
     return <div>
                <Name name={props.details.name}/>
-               <Description description={props.details.description} url={props.details.descriptionSourceUrl} />
-               <Languages languages={props.details.languages} />
+               <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
+               <Languages languages={props.details.languages}/>
                <PublishedDate date={props.details.publishedDate}/>
                <DiscontinuedDate date={props.details.discontinuedDate}/>
                <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
@@ -63,6 +65,7 @@ function FilterListDetails(props: any) {
                <ForumUrl url={props.details.forumUrl}/>
                <SubmissionUrl url={props.details.submissionUrl}/>
                <EmailAddress email={props.details.emailAddress}/>
+               <Maintainers maintainers={props.details.maintainers}/>
            </div>;
 }
 
@@ -81,8 +84,14 @@ function Description(props: any) {
 function Languages(props: any) {
     return props.languages.length > 0
         ? props.languages.length > 1
-            ? <p>Languages: {props.languages.join(", ")}</p>
-            : <p>Language: {props.languages.join(", ")}</p>
+        ? <div>
+              <h2>Languages</h2>
+              <p>{props.languages.join(", ")}</p>
+          </div>
+        : <div>
+              <h2>Language</h2>
+              <p>{props.languages.join(", ")}</p>
+          </div>
         : null;
 }
 
@@ -118,7 +127,8 @@ function HomeUrl(props: any) {
 
 function PolicyUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={"View the policy for which rules this list includes."}>
+        ? <a href={props.url} className="btn btn-primary btn-block"
+            title={"View the policy for which rules this list includes."}>
               Policy
           </a>
         : null;
@@ -150,7 +160,8 @@ function ForumUrl(props: any) {
 
 function SubmissionUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={"Submit a new rule to be included in this list."}>
+        ? <a href={props.url} className="btn btn-primary btn-block"
+            title={"Submit a new rule to be included in this list."}>
               Submit New Rule
           </a>
         : null;
@@ -164,6 +175,42 @@ function EmailAddress(props: any) {
         : null;
 }
 
+function Maintainers(props: any) {
+    return props.maintainers.length > 0
+        ? <div className="panel panel-default">
+              <h2>Maintainers</h2>
+              {props.maintainers.map(
+                  (maintainer: any) => <Maintainer maintainer={maintainer} key={maintainer.id.toString()}/>)}
+          </div>
+        : null;
+}
+
+function Maintainer(props: any) {
+    return <div className="panel panel-default">
+               <h3>{props.maintainer.name}</h3>
+               {props.maintainer.homeUrl
+                   ? <p>
+                        <a href={props.maintainer.homeUrl} className="btn btn-primary btn-block"
+                            title={"View this maintainer's home page."}>Home</a>
+                     </p>
+                   : null}
+               {props.maintainer.emailAddress
+                   ? <p>
+                        <a href={`mailto:${props.maintainer.emailAddress}`}
+                            className="btn btn-primary btn-block"
+                            title={"Email this maintainer."}>Email</a>
+                     </p>
+                   : null}
+               {props.maintainer.twitterHandle
+                   ? <p>
+                        <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
+                            className="btn btn-primary btn-block"
+                            title={"View this maintainer's Twitter page."}>Twitter</a>
+                     </p>
+                   : null}
+           </div>;
+}
+
 interface IFilterListDetailsDto {
     description: string;
     descriptionSourceUrl: string;
@@ -174,9 +221,24 @@ interface IFilterListDetailsDto {
     homeUrl: string;
     issuesUrl: string;
     languages: string[];
+    maintainers: IListMaintainerDto[];
     name: string;
     policyUrl: string;
     publishedDate: string;
     submissionUrl: string;
     viewUrl: string;
+}
+
+interface IListMaintainerDto {
+    id: number;
+    emailAddress: string;
+    homeUrl: string;
+    name: string;
+    twitterHandle: string;
+    additionalLists: IMaintainerAdditionalListsDto[];
+}
+
+interface IMaintainerAdditionalListsDto {
+    id: number;
+    name: string;
 }