From 7c4e3dc553a30a676c553b2c9cea5227e7166513 Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sun, 18 Feb 2018 15:01:31 -0600
Subject: [PATCH] cleanup modal logic

should fix #248
---
 .../ClientApp/components/ListDetailsModal.tsx | 133 ++++++++++--------
 1 file changed, 74 insertions(+), 59 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
index 5d14119fc..52cfcbac8 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
@@ -3,49 +3,47 @@ import "isomorphic-fetch";
 import * as ReactModal from "react-modal";
 
 export default class ListDetailsModal extends React.Component<any, any> {
-    private listId: any;
 
     constructor(props: any) {
         super(props);
-        this.state = { showModal: false, loading: true };
-        this.listId = props.listId;
-        this.handleOpenModal = this.handleOpenModal.bind(this);
-        this.handleCloseModal = this.handleCloseModal.bind(this);
+        this.state = {
+            isModalOpen: false,
+            listId: props.listId
+        };
+        this.openModal = this.openModal.bind(this);
+        this.closeModal = this.closeModal.bind(this);
     }
 
     componentWillReceiveProps(nextProps: any) {
-        this.setState({ showModal: false });
-        this.setState({ filterListDetails: null });
-        this.listId = nextProps.listId;
+        this.setState({
+            isModalOpen: false,
+            listId: nextProps.listId
+        });
     }
 
-    handleOpenModal() {
-        fetch(`https://api.filterlists.com/v1/lists/${this.listId}`)
+    openModal() {
+        fetch(`https://api.filterlists.com/v1/lists/${this.state.listId}`)
             .then(response => response.json() as Promise<IFilterListDetailsDto[]>)
-            .then(data => { this.setState({ filterListDetails: data, loading: false }); });
-        this.setState({ showModal: true });
+            .then(data => {
+                this.setState({
+                    filterListDetails: data,
+                    isModalOpen: true
+                });
+            });
     }
 
-    handleCloseModal() {
-        this.setState({ showModal: false });
+    closeModal() {
+        this.setState({ isModalOpen: false });
     }
 
     render() {
-        const contents = this.state.loading
-            ? null
-            : <ReactModal
-                  isOpen={this.state.showModal}
-                  onRequestClose={this.handleCloseModal}
-                  shouldCloseOnOverlayClick={true}>
-                  <FilterListDetails details={this.state.filterListDetails}/>
-                  <button onClick={this.handleCloseModal} className="btn btn-danger btn-block" id="close-modal">Close</button>
-              </ReactModal>;
-        return (
-            <div>
-                <button onClick={this.handleOpenModal} className="btn btn-primary btn-block">Details</button>
-                {contents}
-            </div>
-        );
+        return <div>
+                   <button onClick={this.openModal} className="btn btn-primary btn-block">Details</button>
+                   <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>
+                   </ReactModal>
+               </div>;
     }
 }
 
@@ -57,13 +55,13 @@ function FilterListDetails(props: any) {
                <DiscontinuedDate date={props.details.discontinuedDate}/>
                <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
                <ViewUrl url={props.details.viewUrl}/>
-               <HomeUrl url={props.details.homeUrl} />
-               <PolicyUrl url={props.details.policyUrl} />
-               <DonateUrl url={props.details.donateUrl} />
-               <IssuesUrl url={props.details.issuesUrl} />
-               <ForumUrl url={props.details.forumUrl} />
-               <SubmissionUrl url={props.details.submissionUrl} />
-               <EmailAddress email={props.details.emailAddress} />
+               <HomeUrl url={props.details.homeUrl}/>
+               <PolicyUrl url={props.details.policyUrl}/>
+               <DonateUrl url={props.details.donateUrl}/>
+               <IssuesUrl url={props.details.issuesUrl}/>
+               <ForumUrl url={props.details.forumUrl}/>
+               <SubmissionUrl url={props.details.submissionUrl}/>
+               <EmailAddress email={props.details.emailAddress}/>
            </div>;
 }
 
@@ -72,8 +70,11 @@ function Name(props: any) {
 }
 
 function Description(props: any) {
-    return props.description ? (props.url ? <blockquote cite={props.url}>{props.description}</blockquote> : <p>{
-        props.description}</p>) : null;
+    return props.description
+        ? (props.url
+            ? <blockquote cite={props.url}>{props.description}</blockquote>
+            : <p>{props.description}</p>)
+        : null;
 }
 
 function PublishedDate(props: any) {
@@ -99,45 +100,59 @@ function ViewUrl(props: any) {
 }
 
 function HomeUrl(props: any) {
-    return props.url ? <a href={props.url} className="btn btn-primary btn-block" title={"View the project's home page."}>
-                           Home
-                       </a> : null;
+    return props.url
+        ? <a href={props.url} className="btn btn-primary btn-block" title={"View the project's home page."}>
+              Home
+          </a>
+        : null;
 }
 
 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."}>
-                           Policy
-                       </a> : null;
+    return props.url
+        ? <a href={props.url} className="btn btn-primary btn-block" title={"View the policy for which rules this list includes."}>
+              Policy
+          </a>
+        : null;
 }
 
 function DonateUrl(props: any) {
-    return props.url ? <a href={props.url} className="btn btn-primary btn-block" title={"Donate to support the list."}>
-                           Donate
-                       </a> : null;
+    return props.url
+        ? <a href={props.url} className="btn btn-primary btn-block" title={"Donate to support the list."}>
+              Donate
+          </a>
+        : null;
 }
 
 function IssuesUrl(props: any) {
-    return props.url ? <a href={props.url} className="btn btn-primary btn-block" title={"View the GitHub Issues for this list."}>
-                           GitHub Issues
-                       </a> : null;
+    return props.url
+        ? <a href={props.url} className="btn btn-primary btn-block" title={"View the GitHub Issues for this list."}>
+              GitHub Issues
+          </a>
+        : null;
 }
 
 function ForumUrl(props: any) {
-    return props.url ? <a href={props.url} className="btn btn-primary btn-block" title={"View the forum for this list."}>
-                           Forum
-                       </a> : null;
+    return props.url
+        ? <a href={props.url} className="btn btn-primary btn-block" title={"View the forum for this list."}>
+              Forum
+          </a>
+        : null;
 }
 
 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."}>
-                           Submit New Rule
-                       </a> : null;
+    return props.url
+        ? <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;
 }
 
 function EmailAddress(props: any) {
-    return props.email ? <a href={`mailto:${props.email}`} className="btn btn-primary btn-block" title={"Email the list."}>
-                             Email
-                         </a> : null;
+    return props.email
+        ? <a href={`mailto:${props.email}`} className="btn btn-primary btn-block" title={"Email the list."}>
+              Email
+          </a>
+        : null;
 }
 
 interface IFilterListDetailsDto {