From f66263609d3d09ca1c1746dc6c3c931827df9aac Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Fri, 16 Feb 2018 20:47:54 -0600
Subject: [PATCH] modal works! (rough, needs cleanup)

---
 .../ClientApp/components/Home.tsx             | 33 +-----------
 .../ClientApp/components/ListDetailsModal.tsx | 51 +++++++++++++++----
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 3d0486ed3..69a2d7c26 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -41,44 +41,15 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
                        {
                            Header: "Details",
                            accessor: "id",
-                           Cell: (d: any) => <ListDetailsModal/>,
-                           style: { textAlign: "center" },
-                           width: 100
-                       },
-                       {
-                           Header: "View",
-                           accessor: "viewUrl",
-                           Cell: (d: any) => <a href={d.value} className="btn btn-primary btn-block"
-                               title={"View the raw list. Many are quite large, so be cautious if on metered bandwidth."}>
-                               View</a>,
-                           style: { textAlign: "center" },
-                           width: 100
-                       },
-                       {
-                           Header: "Subscribe",
-                           accessor: "viewUrl",
-                           Cell: (d: any) => <a href={`abp:subscribe?location=${encodeURIComponent(d.value)}&amp;title=${encodeURIComponent(d.row.name)}`}
-                               className="btn btn-primary btn-block"
-                               title={"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}>
-                               Subscribe</a>,
+                           Cell: (d: any) => <ListDetailsModal listId={d.value}/>,
                            style: { textAlign: "center" },
                            width: 100
                        }
-                   ]}
-                   SubComponent={(row: any) => {
-                       return <div style={{ padding: "20px" }}>
-                                  <em>
-                                      {row.original.description}
-                                  </em>
-                              </div>;
-
-                   }}/>;
+                   ]}/>;
     }
 }
 
 interface IFilterList {
     id: number;
     name: string;
-    description: string;
-    viewUrl: string;
 }
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
index 359b2ea90..dd7948f67 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
@@ -3,18 +3,21 @@ import "isomorphic-fetch";
 import * as ReactModal from "react-modal";
 
 export default class ListDetailsModal extends React.Component<any, any> {
+    private readonly listId: any;
+
     constructor(props: any) {
         super(props);
-        this.state = {
-            showModal: false
-        };
-
+        this.state = { showModal: false, loading: true };
+        this.listId = props.listId;
         this.handleOpenModal = this.handleOpenModal.bind(this);
         this.handleCloseModal = this.handleCloseModal.bind(this);
     }
 
     handleOpenModal() {
         this.setState({ showModal: true });
+        fetch(`https://api.filterlists.com/v1/lists/${this.listId}`)
+            .then(response => response.json() as Promise<IFilterListDetails[]>)
+            .then(data => { this.setState({ filterListdetails: data, loading: false }); });
     }
 
     handleCloseModal() {
@@ -22,16 +25,42 @@ export default class ListDetailsModal extends React.Component<any, any> {
     }
 
     render() {
+        const contents = this.state.loading
+            ? null
+            : <ReactModal
+                  isOpen={this.state.showModal}
+                  contentLabel="onRequestClose Example"
+                  onRequestClose={this.handleCloseModal}
+                  shouldCloseOnOverlayClick={false}>
+                  <h1>{this.state.filterListdetails.name}</h1>
+                  <p>{this.state.filterListdetails.description}</p>
+                  <a href={this.state.filterListdetails.viewUrl} className="btn btn-primary btn-block"
+                     title={"View the raw list. Many are quite large, so be cautious if on metered bandwidth."}>
+                      View
+                  </a>
+                  <a href={`abp:subscribe?location=${encodeURIComponent(this.state.filterListdetails.viewUrl)
+                      }&amp;title=${encodeURIComponent(this.state.filterListdetails.name)}`}
+                     className="btn btn-primary btn-block"
+                     title={
+"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}>
+                      Subscribe
+                  </a>
+                  <button onClick={this.handleCloseModal} className="btn btn-primary btn-block">Close</button>
+              </ReactModal>;
         return (
             <div>
-                <button onClick={this.handleOpenModal}>Trigger Modal</button>
-                <ReactModal
-                    isOpen={this.state.showModal}
-                    contentLabel="Minimal Modal Example"
-                >
-                    <button onClick={this.handleCloseModal}>Close Modal</button>
-                </ReactModal>
+                <button onClick={this.handleOpenModal} className="btn btn-primary btn-block">Details</button>
+                {contents}
             </div>
         );
     }
+
+}
+
+interface IFilterListDetails {
+    id: number;
+    name: string;
+    description: string;
+    descriptionSourceUrl: string;
+    viewUrl: string;
 }
\ No newline at end of file