From 077632f184f5832ff465dbf7ed7b3564ccb1740c Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Tue, 11 Sep 2018 17:48:08 -0500
Subject: [PATCH] components refactor wip

ref #467
---
 .../ClientApp/components/Home.tsx             |  6 +-
 .../detailsExpander/DetailsExpander.tsx       | 22 +++---
 .../MaintainerAdditionalLists.tsx             | 21 ++++++
 .../MaintainerInfoCard.tsx                    | 69 ++++---------------
 .../MaintainerLinkButtonGroup.tsx             | 18 +++++
 .../MaintainersInfoCard.tsx                   |  3 +-
 .../components/linkButtons/EmailButton.tsx    | 17 +++++
 .../components/linkButtons/HomeButton.tsx     | 17 +++++
 .../components/linkButtons/TwitterButton.tsx  | 17 +++++
 src/FilterLists.Web/ClientApp/css/site.css    | 25 ++++++-
 .../IMaintainerAdditionalListsProps.ts        |  4 ++
 .../IMaintainerLinkButtonGroupProps.ts        |  6 ++
 .../linkButtons/IEmailButtonProps.tsx         |  4 ++
 .../linkButtons/ITwitterButtonProps.tsx       |  4 ++
 14 files changed, 163 insertions(+), 70 deletions(-)
 create mode 100644 src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerAdditionalLists.tsx
 create mode 100644 src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerLinkButtonGroup.tsx
 create mode 100644 src/FilterLists.Web/ClientApp/components/linkButtons/EmailButton.tsx
 create mode 100644 src/FilterLists.Web/ClientApp/components/linkButtons/HomeButton.tsx
 create mode 100644 src/FilterLists.Web/ClientApp/components/linkButtons/TwitterButton.tsx
 create mode 100644 src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerAdditionalListsProps.ts
 create mode 100644 src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerLinkButtonGroupProps.ts
 create mode 100644 src/FilterLists.Web/ClientApp/interfaces/linkButtons/IEmailButtonProps.tsx
 create mode 100644 src/FilterLists.Web/ClientApp/interfaces/linkButtons/ITwitterButtonProps.tsx

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 34f1045ea9..557ce2626e 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -3,8 +3,8 @@ import { RouteComponentProps } from "react-router";
 import "isomorphic-fetch";
 import ReactTable from "react-table"
 import "react-table/react-table.css"
-import ListDetailsExpander from "./listDetailsExpander/DetailsExpander";
 import * as moment from "moment";
+import DetailsExpander from "./detailsExpander/DetailsExpander";
 
 interface IHomeState {
     lists: IListDto[];
@@ -166,7 +166,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                            Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
                                (e: any) => <span className="badge" style={{
                                    backgroundColor: `#${e.colorHex}`,
-                                   color: ListDetailsExpander.getContrast(`${e.colorHex}`)
+                                   color: DetailsExpander.getContrast(`${e.colorHex}`)
                                }} title={e.description}>{e.name}</span>)}</div>,
                            width: 200,
                            headerClassName: "d-none d-md-block",
@@ -247,7 +247,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                    ]}
                    SubComponent={(row: any) => {
                        return (
-                           <ListDetailsExpander listId={row.original.id}/>
+                           <DetailsExpander listId={row.original.id}/>
                        );
                    }}
                    className="-striped -highlight"/>;
diff --git a/src/FilterLists.Web/ClientApp/components/detailsExpander/DetailsExpander.tsx b/src/FilterLists.Web/ClientApp/components/detailsExpander/DetailsExpander.tsx
index bb0d0bcee5..1fd7171c7c 100644
--- a/src/FilterLists.Web/ClientApp/components/detailsExpander/DetailsExpander.tsx
+++ b/src/FilterLists.Web/ClientApp/components/detailsExpander/DetailsExpander.tsx
@@ -1,46 +1,48 @@
 import * as React from "react";
 import "isomorphic-fetch";
 import InfoCard from "./InfoCard";
-import MaintainerInfoCard from "./MaintainersInfoCard";
 import LinkButtonGroup from "./LinkButtonGroup";
+import MaintainersInfoCard from "./maintainersInfoCard/MaintainersInfoCard";
 
 export default class DetailsExpander extends React.Component<IDetailsExpanderProps, any> {
     constructor(props: IDetailsExpanderProps) {
         super(props);
         this.state = {
-            responseLoaded: false,
-            listId: props.listId
+            responseReceived: false
         };
+    }
+
+    componentDidMount() {
         this.fetchData();
     }
 
     fetchData() {
-        fetch(`https://filterlists.com/api/v1/lists/${this.state.listId}`)
+        fetch(`https://filterlists.com/api/v1/lists/${this.props.listId}`)
             .then(response => response.json() as Promise<IFilterListDetailsDto[]>)
             .then(data => {
                 this.setState({
                     filterListDetails: data,
-                    responseLoaded: true
+                    responseReceived: true
                 });
             });
     }
 
     render() {
-        return this.state.responseLoaded
+        return this.state.responseReceived
             ? <div className="card border-primary">
                   <div className="card-body p-2">
                       <div className="container m-0">
                           <div className="row">
-                            <InfoCard details={this.state.filterListDetails} />
-                            <LinkButtonGroup details={this.state.filterListDetails} />
+                              <InfoCard {...this.state.filterListDetails}/>
+                              <LinkButtonGroup {...this.state.filterListDetails}/>
                           </div>
                           <div className="row">
-                            <MaintainerInfoCard maintainers={this.state.filterListDetails.maintainers} />
+                              <MaintainersInfoCard {...this.state.filterListDetails.maintainers}/>
                           </div>
                       </div>
                   </div>
               </div>
-            : <div>Loading...</div>;
+            : <div className="loading">Loading</div>;
     }
 
     //https://stackoverflow.com/a/11868398/2343739
diff --git a/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerAdditionalLists.tsx b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerAdditionalLists.tsx
new file mode 100644
index 0000000000..677eadf5e6
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerAdditionalLists.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export default class MaintainerAdditionalLists extends React.Component<IMaintainerAdditionalListsProps, any> {
+    constructor(props: IMaintainerAdditionalListsProps) {
+        super(props);
+    }
+
+    render() {
+        return this.props.additionalLists.length > 0
+            ? <div className="col-9">
+                  <div>
+                      <h4>More by {this.props.name}:</h4>
+                      <ul>
+                          {this.props.additionalLists.map((list: IMaintainerAdditionalListsDto) =>
+                              <li>{list.name}</li>)}
+                      </ul>
+                  </div>
+              </div>
+            : null;
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx
index b963cea20c..6294e680bf 100644
--- a/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx
+++ b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx
@@ -1,4 +1,6 @@
 import * as React from "react";
+import MaintainerAdditionalLists from "./MaintainerAdditionalLists";
+import MaintainerLinkButtonGroup from "./MaintainerLinkButtonGroup";
 
 export default class MaintainerInfoCard extends React.Component<IListMaintainerDto, any> {
     constructor(props: IListMaintainerDto) {
@@ -6,59 +8,18 @@ export default class MaintainerInfoCard extends React.Component<IListMaintainerD
     }
 
     render() {
-        return <div className="card">
-                   <div className="card-body">
-                       <h3 className="card-header">Maintained by {this.props.name}</h3>
-                       <div className="container pt-1">
-                           <div className="row">
-                               <MaintainerAdditionalLists maintainer={this.props}/>
-                               <MaintainerUrls maintainer={this.props}/>
-                           </div>
-                       </div>
-                   </div>
-               </div>;
+        return this.props.name
+            ? <div className="card">
+                  <div className="card-body">
+                      <h3 className="card-header">Maintained by {this.props.name}</h3>
+                      <div className="container pt-1">
+                          <div className="row">
+                              <MaintainerAdditionalLists {...this.props}/>
+                              <MaintainerLinkButtonGroup {...this.props}/>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+            : null;
     }
-}
-
-function MaintainerAdditionalLists(props: any) {
-    return <div className="col-9">
-               {props.maintainer.additionalLists.length > 0
-                   ? <div>
-                         <h4>More by {props.maintainer.name}:</h4>
-                         <ul>
-                             {props.maintainer.additionalLists.map(
-                                 (list: any) => <MaintainerAdditionalList list={list} key={list.id.toString()}/>)}
-                         </ul>
-                     </div>
-                   : null}
-           </div>;
-}
-
-function MaintainerAdditionalList(props: any) {
-    return <li>{props.list.name}</li>;
-}
-
-function MaintainerUrls(props: any) {
-    return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end" role="group">
-               {props.maintainer.homeUrl
-                   ? <a href={props.maintainer.homeUrl} className="btn btn-primary fl-btn-details-action"
-                        title={`View the home page of ${props.maintainer.name}.`}>
-                         Home
-                     </a>
-                   : null}
-               {props.maintainer.emailAddress
-                   ? <a href={`mailto:${props.maintainer.emailAddress}`}
-                        className="btn btn-primary fl-btn-details-action"
-                        title={`Email ${props.maintainer.name}.`}>
-                         Email
-                     </a>
-                   : null}
-               {props.maintainer.twitterHandle
-                   ? <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
-                        className="btn btn-primary fl-btn-details-action"
-                        title={`View the Twitter page of ${props.maintainer.name}.`}>
-                         Twitter
-                     </a>
-                   : null}
-           </div>;
 }
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerLinkButtonGroup.tsx b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerLinkButtonGroup.tsx
new file mode 100644
index 0000000000..e8b553344e
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerLinkButtonGroup.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import HomeButton from "../../linkButtons/HomeButton";
+import EmailButton from "../../linkButtons/EmailButton";
+import TwitterButton from "../../linkButtons/TwitterButton";
+
+export default class MaintainerLinkButtonGroup extends React.Component<IMaintainerLinkButtonGroupProps, any> {
+    constructor(props: IMaintainerLinkButtonGroupProps) {
+        super(props);
+    }
+
+    render() {
+        return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end" role="group">
+                   <HomeButton url={this.props.homeUrl} {...this.props}/>
+                   <EmailButton {...this.props}/>
+                   <TwitterButton {...this.props}/>
+               </div>;
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx
index f7b57c043a..74419153fe 100644
--- a/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx
+++ b/src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx
@@ -9,8 +9,7 @@ export default class MaintainersInfoCard extends React.Component<IListMaintainer
     render() {
         return this.props.length > 0
             ? <div className="w-100">
-                  {this.props.map((maintainer: IListMaintainerDto) =>
-                      <MaintainerInfoCard {...maintainer}/>)}
+                  {this.props.map((maintainer: IListMaintainerDto) => <MaintainerInfoCard {...maintainer}/>)}
               </div>
             : null;
     }
diff --git a/src/FilterLists.Web/ClientApp/components/linkButtons/EmailButton.tsx b/src/FilterLists.Web/ClientApp/components/linkButtons/EmailButton.tsx
new file mode 100644
index 0000000000..38abfe8de2
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/components/linkButtons/EmailButton.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export default class EmailButton extends React.Component<IEmailButtonProps, any> {
+    constructor(props: IEmailButtonProps) {
+        super(props);
+    }
+
+    render() {
+        return this.props.emailAddress
+            ? <a href={`mailto:${this.props.emailAddress}`}
+                 className="btn btn-primary fl-btn-details-action"
+                 title={`Email ${this.props.name}.`}>
+                  Email
+              </a>
+            : null;
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/linkButtons/HomeButton.tsx b/src/FilterLists.Web/ClientApp/components/linkButtons/HomeButton.tsx
new file mode 100644
index 0000000000..f69e5387d4
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/components/linkButtons/HomeButton.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export default class HomeButton extends React.Component<IUrlButtonProps, any> {
+    constructor(props: IUrlButtonProps) {
+        super(props);
+    }
+
+    render() {
+        return this.props.url
+            ? <a href={this.props.url}
+                 className="btn btn-primary fl-btn-details-action"
+                 title={`View ${this.props.name}'s homepage.`}>
+                  Home
+              </a>
+            : null;
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/linkButtons/TwitterButton.tsx b/src/FilterLists.Web/ClientApp/components/linkButtons/TwitterButton.tsx
new file mode 100644
index 0000000000..efb2bfc61e
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/components/linkButtons/TwitterButton.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export default class TwitterButton extends React.Component<ITwitterButtonProps, any> {
+    constructor(props: ITwitterButtonProps) {
+        super(props);
+    }
+
+    render() {
+        return this.props.twitterHandle
+            ? <a href={`https://twitter.com/${this.props.twitterHandle}`}
+                 className="btn btn-primary fl-btn-details-action"
+                 title={`View ${this.props.name}'s Twitter.`}>
+                  Twitter
+              </a>
+            : null;
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index 7c74e73645..3ba3936014 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -19,4 +19,27 @@ div.rt-tbody, div.rt-thead.-filters, div.rt-thead.-header { min-width: 320px !im
     max-width: 90px;
 }
 
-.fl-description { margin: 0 0 .5rem; }
\ No newline at end of file
+.fl-description { margin: 0 0 .5rem; }
+
+
+/** https://codepen.io/thetallweeks/pen/yybGra **/
+
+.loading:after {
+    -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+    animation: ellipsis steps(4, end) 900ms infinite;
+    content: "\2026";
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: bottom;
+    width: 0;
+}
+
+@keyframes ellipsis {
+    to { width: 1.25em; }
+}
+
+@-webkit-keyframes ellipsis {
+    to { width: 1.25em; }
+}
+
+/** **/
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerAdditionalListsProps.ts b/src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerAdditionalListsProps.ts
new file mode 100644
index 0000000000..56c48ee2ed
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerAdditionalListsProps.ts
@@ -0,0 +1,4 @@
+interface IMaintainerAdditionalListsProps {
+    name: string;
+    additionalLists: IMaintainerAdditionalListsDto[];
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerLinkButtonGroupProps.ts b/src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerLinkButtonGroupProps.ts
new file mode 100644
index 0000000000..79ade3f300
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerLinkButtonGroupProps.ts
@@ -0,0 +1,6 @@
+interface IMaintainerLinkButtonGroupProps {
+    emailAddress: string;
+    homeUrl: string;
+    name: string;
+    twitterHandle: string;
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/interfaces/linkButtons/IEmailButtonProps.tsx b/src/FilterLists.Web/ClientApp/interfaces/linkButtons/IEmailButtonProps.tsx
new file mode 100644
index 0000000000..5df9593d46
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/interfaces/linkButtons/IEmailButtonProps.tsx
@@ -0,0 +1,4 @@
+interface IEmailButtonProps {
+    name: string;
+    emailAddress: string;
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/interfaces/linkButtons/ITwitterButtonProps.tsx b/src/FilterLists.Web/ClientApp/interfaces/linkButtons/ITwitterButtonProps.tsx
new file mode 100644
index 0000000000..97d2c784f4
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/interfaces/linkButtons/ITwitterButtonProps.tsx
@@ -0,0 +1,4 @@
+interface ITwitterButtonProps {
+    name: string;
+    twitterHandle: string;
+}
\ No newline at end of file