From 57e50eff930586cf1e329aa27a591652785f30d6 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Tue, 9 Oct 2018 19:39:49 -0500
Subject: [PATCH] add Subscribe column filterable by viewUrl

closes #311
---
 .../ClientApp/modules/home/Home.tsx           |  5 ++--
 .../home/components/listsTable/ListsTable.tsx | 15 ++++++++++--
 .../listsTable/columns/DetailsButton.tsx      |  7 +++---
 .../listsTable/columns/SubscribeButton.tsx    | 24 +++++++++++++++++++
 .../components/listsTable/columns/index.ts    |  2 ++
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/SubscribeButton.tsx

diff --git a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx
index 6119da76d..1a723502d 100644
--- a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx
@@ -9,7 +9,8 @@ const columnVisibilityDefaults: IColumnVisibility[] = [
     { column: "Updated", visible: false },
     { column: "Rules", visible: false },
     { column: "License", visible: false },
-    { column: "Maintainers", visible: false }
+    { column: "Maintainers", visible: false },
+    { column: "Subscribe", visible: false }
 ];
 
 interface IProps {
@@ -42,7 +43,7 @@ export class Home extends React.Component<IProps, IState> {
         this.setMobileColumnVisibility();
         this.updatePageSize();
     };
-    
+
     setMobileColumnVisibility() {
         if (window.innerWidth < 768) {
             this.state.columnVisibility.forEach((c: IColumnVisibility) => {
diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx
index 1813f4016..1e3adb526 100644
--- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx
@@ -4,8 +4,18 @@ import "../../../../utils/loader.css";
 import ReactTable from "react-table";
 import "react-table/react-table.css";
 import "./listsTable.css";
-import { DetailsButton, Languages, License, Maintainers, Name, RuleCount, Software, Tags, UpdatedDate } from
-    "./columns";
+import {
+    DetailsButton,
+    Languages,
+    License,
+    Maintainers,
+    Name,
+    RuleCount,
+    Software,
+    SubscribeButton,
+    Tags,
+    UpdatedDate
+} from "./columns";
 import { IListDetails } from "../../components/detailsExpander";
 import { DetailsExpander } from "../../components";
 
@@ -36,6 +46,7 @@ export const ListsTable = (props: IProps) =>
               RuleCount(props.columnVisibility),
               License(props.columnVisibility, props.licenses),
               Maintainers(props.columnVisibility, props.maintainers),
+              SubscribeButton(props.columnVisibility),
               DetailsButton
           ]}
           defaultSorted={[{ id: "name" }]}
diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/DetailsButton.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/DetailsButton.tsx
index f26db3364..7c7955fb6 100644
--- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/DetailsButton.tsx
+++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/DetailsButton.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Column, RowRenderProps } from "react-table";
+import "../../linkButtons/button.css";
 
 export const DetailsButton = {
     Header: <span title="Learn more about the FilterList.">Details</span>,
@@ -8,17 +9,17 @@ export const DetailsButton = {
     expander: true,
     Expander: ({ isExpanded, row }: RowRenderProps) => Expander({ isExpanded, row }),
     style: { textAlign: "center" },
-    width: 90
+    width: 110
 } as Column;
 
 const Expander = (props: RowRenderProps) =>
     <div>
         {props.isExpanded
-             ? <button className="btn btn-primary btn-block active"
+             ? <button className="btn btn-primary btn-block active fl-btn-link"
                        title={`Collapse details about ${props.row.name}.`}>
                    Details
                </button>
-             : <button className="btn btn-primary btn-block"
+             : <button className="btn btn-primary btn-block fl-btn-link"
                        title={`Learn more about ${props.row.name}.`}>
                    Details
                </button>}
diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/SubscribeButton.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/SubscribeButton.tsx
new file mode 100644
index 000000000..2df9408e2
--- /dev/null
+++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/SubscribeButton.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Column, Filter } from "react-table";
+import { IColumnVisibility } from "../../../interfaces";
+import { SubscribeButtonGroup } from "../../linkButtons";
+
+export const SubscribeButton = (columnVisibility: IColumnVisibility[]) => ({
+    Header: <span title={`Subscribe to the list with a browser extension supporting the "abp:" protocol (e.g. uBlock Origin, Adblock Plus)`}>
+                Subscribe
+            </span>,
+    accessor: "viewUrl",
+    filterable: true,
+    filterMethod: (f: Filter, r: any[]) => filterMethod(f, r),
+    sortMethod: (a: string, b: string) => sortMethod(a, b),
+    Cell: (c: any) => <SubscribeButtonGroup name={c.row.name} url={c.value} urlMirrors={c.row.viewUrlMirrors}/>,
+    style: { textAlign: "center" },
+    width: 110,
+    show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Subscribe")[0].visible
+} as Column);
+
+const filterMethod = (f: Filter, r: any[]): boolean =>
+    r[f.id as any].toUpperCase().includes(f.value.toUpperCase());
+
+const sortMethod = (a: string, b: string) =>
+    a.toLowerCase() > b.toLowerCase() ? 1 : -1;
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts
index 8e73ae5b6..050780af2 100644
--- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts
+++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/columns/index.ts
@@ -5,6 +5,7 @@ import { Maintainers } from "./Maintainers";
 import { Name } from "./Name";
 import { RuleCount } from "./RuleCount";
 import { Software } from "./Software";
+import { SubscribeButton } from "./SubscribeButton";
 import { Syntax } from "./Syntax";
 import { Tags } from "./Tags";
 import { UpdatedDate } from "./UpdatedDate";
@@ -17,6 +18,7 @@ export {
     Name,
     RuleCount,
     Software,
+    SubscribeButton,
     Syntax,
     Tags,
     UpdatedDate