wip

ref #467
collinbarrett · Sep 11, 2018 · 002e29b · 002e29b
1 parent 2552f5a
commit 002e29b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 83 deletions.
diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -1,10 +1,9 @@
 import * as React from "react";
 import "isomorphic-fetch";
 import * as moment from "moment";
-import SubscribeButton from "./SubscribeButton";
+import SubscribeButtonGroup from "./SubscribeButtonGroup";
 
 export default class ListDetails extends React.Component<any, any> {
-
     constructor(props: any) {
         super(props);
         this.state = {
@@ -76,10 +75,8 @@ function ListInfo(props: any) {
 
 function ListUrls(props: any) {
     return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end">
-               <SubscribeButton details={props.details}/>
+               <SubscribeButtonGroup name={props.details.name} url={props.details.viewUrl} urlMirror1={props.details.viewUrlMirror1} urlMirror2={props.details.viewUrlMirror2}/>
                <ViewUrl url={props.details.viewUrl} name={props.details.name}/>
-               <ViewUrlMirror url={props.details.viewUrlMirror1} name={props.details.name}/>
-               <ViewUrlMirror url={props.details.viewUrlMirror2} name={props.details.name}/>
                <HomeUrl url={props.details.homeUrl} name={props.details.name}/>
                <PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
                <DonateUrl url={props.details.donateUrl} name={props.details.name}/>
@@ -174,8 +171,8 @@ function ViewUrl(props: any) {
     return props.url.indexOf("https://") === -1
         ? ViewUrlNotSecure()
         : props.url.indexOf("web.archive.org") === -1
-            ? ViewUrlPrimary()
-            : ViewUrlWayback();
+        ? ViewUrlPrimary()
+        : ViewUrlWayback();
 
     function ViewUrlPrimary() {
         return <a href={props.url}
@@ -205,8 +202,8 @@ function ViewUrl(props: any) {
 function ViewUrlMirror(props: any) {
     return props.url
         ? props.url.indexOf("https://") === -1
-            ? ViewUrlNotSecure()
-            : viewUrlSecondary()
+        ? ViewUrlNotSecure()
+        : viewUrlSecondary()
         : null;
 
     function viewUrlSecondary() {

diff --git a/src/FilterLists.Web/ClientApp/components/SubscribeButton.tsx b/src/FilterLists.Web/ClientApp/components/SubscribeButton.tsx
@@ -1,90 +1,53 @@
 import * as React from "react";
 
-export default class SubscribeButton extends React.Component<any, any> {
-
-    constructor(props: ISubscribeUrlDto) {
+export default class SubscribeButton extends React.Component<ISubscribeButtonProps, any> {
+    constructor(props: ISubscribeButtonProps) {
         super(props);
+        this.state = {
+            buttonClassName: props.isOriginal ? "btn-primary" : "btn-secondary",
+            titlePrefix: ""
+        };
     }
 
-    render() {
-        return <div className="btn-group-vertical" role="group">
-                   <button id="btnGroupDropSubscribe" type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                       Subscribe
-                   </button>
-            <div className="dropdown-menu" aria-labelledby="btnGroupDropSubscribe">
-                       <SubscribeUrl details={this.props.details} />
-                <SubscribeUrlMirror details={this.props.details} index={1} />
-                <SubscribeUrlMirror details={this.props.details} index={2} />
-                   </div>
-               </div>;
-    }
-}
-
-function SubscribeUrl(props: any) {
-    return props.details.viewUrl.indexOf("https://") === -1
-        ? SubscribeUrlNotSecure()
-        : props.details.viewUrl.indexOf("web.archive.org") === -1
-            ? SubscribeUrlPrimary()
-            : SubscribeUrlWayback();
-
-    function SubscribeUrlPrimary() {
-        return <a href={`abp:subscribe?location=${encodeURIComponent(props.details.viewUrl)}&amp;title=${encodeURIComponent(props.details.name)}`}
-                  className="btn btn-primary btn-block fl-btn-details-action"
-                  title={`Subscribe to list with browser extension supporting \"abp:\" protocol (e.g. uBlock Origin, AdBlock Plus).`}>
-                   Subscribe
-               </a>;
+    componentDidMount() {
+        if (this.props.url) {
+            this.setStateWayback();
+            this.setStateInsecure();
+        }
     }
 
-    function SubscribeUrlWayback() {
-        return <a href={`abp:subscribe?location=${encodeURIComponent(props.details.viewUrl)}&amp;title=${encodeURIComponent(props.details.name)}`}
-                  className="btn btn-secondary btn-block fl-btn-details-action"
-                  title={`Archive.org Mirror (Original Offline) - Subscribe to list with browser extension supporting \"abp:\" protocol (e.g. uBlock Origin, AdBlock Plus).`}>
-                   Subscribe
-               </a>;
+    setStateWayback() {
+        if (this.props.url.indexOf("web.archive.org") !== -1) {
+            this.setState({
+                buttonClassName: "btn-secondary"
+            });
+        }
     }
 
-    function SubscribeUrlNotSecure() {
-        return <a href={`abp:subscribe?location=${encodeURIComponent(props.details.viewUrl)}&amp;title=${encodeURIComponent(props.details.name)}`}
-                  className="btn btn-danger btn-block fl-btn-details-action"
-                  title={`Not Secure - Subscribe to list with browser extension supporting \"abp:\" protocol (e.g. uBlock Origin, AdBlock Plus).`}>
-                   Subscribe
-               </a>;
+    setStateInsecure() {
+        if (this.props.url.indexOf("https://") === -1) {
+            this.setState({
+                buttonClassName: "btn-danger",
+                titlePrefix: "Not Secure - "
+            });
+        }
     }
-};
 
-function SubscribeUrlMirror(props: any, index: number) {
-    return index === 1
-        ? props.details.viewUrlMirror1
-            ? props.details.viewUrlMirror1.indexOf("https://") === -1
-                ? SubscribeUrlNotSecure(props.details.viewUrlMirror1)
-                : SubscribeUrlSecondary(props.details.viewUrlMirror1)
-            : null
-        : props.details.viewUrlMirror2
-            ? props.details.viewUrlMirror2.indexOf("https://") === -1
-                ? SubscribeUrlNotSecure(props.details.viewUrlMirror2)
-                : SubscribeUrlSecondary(props.details.viewUrlMirror2)
+    render() {
+        const href = `abp:subscribe?location=${encodeURIComponent(this.props.url)}&amp;title=${encodeURIComponent(this.props.name)}`;
+        const title = `${this.state.titlePrefix}Subscribe to list with a browser extension supporting the \"abp:\" protocol (e.g. uBlock Origin, AdBlock Plus).`;
+        const className = `btn ${this.state.buttonClassName} btn-block fl-btn-details-action`;
+        return this.props.url
+            ? <a href={href} title={title} className={className}>
+                  {this.props.text}
+              </a>
             : null;
-
-    function SubscribeUrlSecondary(url: any) {
-        return <a href={`abp:subscribe?location=${encodeURIComponent(url)}&amp;title=${encodeURIComponent(props.details.name)}`}
-                  className="btn btn-secondary btn-block fl-btn-details-action"
-                  title={`Mirror - Subscribe to list with browser extension supporting \"abp:\" protocol (e.g. uBlock Origin, AdBlock Plus).`}>
-                   Mirror
-               </a>;
     }
+}
 
-    function SubscribeUrlNotSecure(url: any) {
-        return <a href={`abp:subscribe?location=${encodeURIComponent(url)}&amp;title=${encodeURIComponent(props.details.name)}`}
-                  className="btn btn-danger btn-block fl-btn-details-action"
-                  title={`Mirror - Not Secure - Subscribe to list with browser extension supporting \"abp:\" protocol (e.g. uBlock Origin, AdBlock Plus).`}>
-                   Mirror
-               </a>;
-    }
-};
-
-interface ISubscribeUrlDto {
+interface ISubscribeButtonProps {
     name: string;
-    viewUrl: string;
-    viewUrlMirror1: string;
-    viewUrlMirror2: string;
+    url: string;
+    text: string;
+    isOriginal: boolean;
 }
diff --git a/src/FilterLists.Web/ClientApp/components/SubscribeButtonGroup.tsx b/src/FilterLists.Web/ClientApp/components/SubscribeButtonGroup.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import SubscribeButton from "./SubscribeButton";
+
+export default class SubscribeButtonGroup extends React.Component<ISubscribeButtonGroupProps, any> {
+    constructor(props: ISubscribeButtonGroupProps) {
+        super(props);
+    }
+
+    render() {
+        return this.props.urlMirror1
+            ? (<div className="btn-group-vertical fl-btn-details-action" role="group">
+                   <button id="btnGroupDropSubscribe" type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                       Subscribe
+                   </button>
+                   <div className="dropdown-menu" aria-labelledby="btnGroupDropSubscribe">
+                       <SubscribeButton name={this.props.name} url={this.props.url} text="Original" isOriginal={true}/>
+                       <SubscribeButton name={this.props.name} url={this.props.urlMirror1} text="Mirror 1" isOriginal={false}/>
+                       <SubscribeButton name={this.props.name} url={this.props.urlMirror2} text="Mirror 2" isOriginal={false}/>
+                   </div>
+               </div>)
+            : <SubscribeButton name={this.props.name} url={this.props.url} text="Subscribe" isOriginal={true}/>;
+    }
+}
+
+interface ISubscribeButtonGroupProps {
+    name: string;
+    url: string;
+    urlMirror1: string;
+    urlMirror2: string;
+}