components refactor wip

ref #467

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"/>;

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

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;
+    }
+}

src/FilterLists.Web/ClientApp/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx

@@ -1,64 +1,25 @@
 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) {
         super(props);
     }
 
     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>;
 }

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>;
+    }
+}

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;
     }

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;
+    }
+}

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;
+    }
+}

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;
+    }
+}

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; }
+.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; }
+}
+
+/** **/

src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerAdditionalListsProps.ts

@@ -0,0 +1,4 @@
+interface IMaintainerAdditionalListsProps {
+    name: string;
+    additionalLists: IMaintainerAdditionalListsDto[];
+}

src/FilterLists.Web/ClientApp/interfaces/detailsExpander/maintainersInfoCard/IMaintainerLinkButtonGroupProps.ts

@@ -0,0 +1,6 @@
+interface IMaintainerLinkButtonGroupProps {
+    emailAddress: string;
+    homeUrl: string;
+    name: string;
+    twitterHandle: string;
+}

src/FilterLists.Web/ClientApp/interfaces/linkButtons/IEmailButtonProps.tsx

@@ -0,0 +1,4 @@
+interface IEmailButtonProps {
+    name: string;
+    emailAddress: string;
+}

src/FilterLists.Web/ClientApp/interfaces/linkButtons/ITwitterButtonProps.tsx

@@ -0,0 +1,4 @@
+interface ITwitterButtonProps {
+    name: string;
+    twitterHandle: string;
+}