add Subscribe column filterable by viewUrl

closes #311

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) => {

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" }]}

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

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;

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