From 26b5edd7077029fae518a35f9c30691040dc7c34 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 3 Sep 2018 15:46:45 -0500
Subject: [PATCH 1/4] wip

---
 .../ClientApp/components/Home.tsx             | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index bcf58ed49..a17e3f2cd 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -122,6 +122,35 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                            headerClassName: "d-none d-md-block",
                            className: "d-none d-md-block"
                        },
+                       {
+                           Header: "Software",
+                           accessor: "software",
+                           filterable: true,
+                           filterMethod: (filter: any, row: any) => {
+                               if (filter.value === "all") {
+                                   return true;
+                               }
+                               if (filter.value === "true") {
+                                   return row[filter.id] >= 21;
+                               }
+                               return row[filter.id] < 21;
+                           },
+                           Filter: ({ filter, onChange }) =>
+                               <select
+                                   onChange={event => onChange(event.target.value)}
+                                   style={{ width: "100%" }}
+                                   value={filter ? filter.value : "all"}>
+                                   <option value="all">Show All</option>
+                                   <option value="true">Can Drink</option>
+                                   <option value="false">Can't Drink</option>
+                               </select>,
+                           Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
+                               (e: any) => <span className="badge badge-info">{e}</span>)}</div>,
+                           style: { whiteSpace: "inherit" },
+                           width: 150,
+                           headerClassName: "d-none d-md-block",
+                           className: "d-none d-md-block"
+                       },
                        {
                            Header: "Updated",
                            accessor: "updatedDate",
@@ -172,6 +201,7 @@ interface IListDto {
     id: number;
     name: string;
     languages: IListLanguageDto[];
+    software: string[];
     tags: IListTagDto[];
     updatedDate: string;
 }

From c106f676f55d75126c6ea6f97310ef6ba2229761 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 3 Sep 2018 16:02:40 -0500
Subject: [PATCH 2/4] update interfaces

---
 src/FilterLists.Web/ClientApp/components/Home.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index a17e3f2cd..4b5b58a21 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -197,11 +197,16 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
     }
 }
 
+interface ISoftwareDto {
+    id: number;
+    name: string;
+}
+
 interface IListDto {
     id: number;
     name: string;
     languages: IListLanguageDto[];
-    software: string[];
+    softwareIds: number[];
     tags: IListTagDto[];
     updatedDate: string;
 }

From e8d2cf3f734797872fbddd189e0a997024343c29 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 3 Sep 2018 16:17:45 -0500
Subject: [PATCH 3/4] wip

---
 .../ClientApp/components/Home.tsx             | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 4b5b58a21..4568530f9 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -11,6 +11,8 @@ interface IHomeState {
     loadingLists: boolean;
     ruleCount: number;
     loadingRuleCount: boolean;
+    software: ISoftwareDto[];
+    loadingSoftware: boolean;
     pageSize: number;
 }
 
@@ -22,13 +24,15 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
             loadingLists: true,
             ruleCount: 0,
             loadingRuleCount: true,
+            software: [],
+            loadingSoftware: true,
             pageSize: 20
         };
         this.updatePageSize = this.updatePageSize.bind(this);
     }
 
     render() {
-        const contents = this.state.loadingLists || this.state.loadingRuleCount
+        const contents = this.state.loadingLists || this.state.loadingRuleCount || this.state.loadingSoftware
             ? <p>
                   <em>Loading...</em>
               </p>
@@ -59,6 +63,14 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                     loadingRuleCount: false
                 });
             });
+        fetch("https://filterlists.com/api/v1/software")
+            .then(response => response.json() as Promise<ISoftwareDto[]>)
+            .then(data => {
+                this.setState({
+                    software: data,
+                    loadingSoftware: false
+                });
+            });
     }
 
     updatePageSize() {
@@ -116,7 +128,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                                .includes(filter.value.toUpperCase()),
                            sortMethod: (a: any, b: any) => a.join().toUpperCase() > b.join().toUpperCase() ? 1 : -1,
                            Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
-                               (e: any) => <span className="badge badge-secondary" title={e.name}>{e.iso6391}</span>)}</div>,
+                               (e: any) => <span className="badge badge-secondary" title={e.name}>{e.iso6391}</span>)
+                           }</div>,
                            style: { whiteSpace: "inherit" },
                            width: 60,
                            headerClassName: "d-none d-md-block",
@@ -140,9 +153,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                                    onChange={event => onChange(event.target.value)}
                                    style={{ width: "100%" }}
                                    value={filter ? filter.value : "all"}>
-                                   <option value="all">Show All</option>
-                                   <option value="true">Can Drink</option>
-                                   <option value="false">Can't Drink</option>
+                                   {state.software.map((e: any) => <option value={e.id}>{e.name}</option>)}
                                </select>,
                            Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
                                (e: any) => <span className="badge badge-info">{e}</span>)}</div>,

From 06ec00832ad3c28575f0a67fe730549a1d7aa424 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 3 Sep 2018 17:28:38 -0500
Subject: [PATCH 4/4] add sort by software

---
 .../ClientApp/components/Home.tsx             | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index 4568530f9..ee267c288 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -103,6 +103,29 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                            sortMethod: (a: any, b: any) => a.toUpperCase() > b.toUpperCase() ? 1 : -1,
                            Cell: (cell: any) => <h2 className="mb-0">{cell.value}</h2>
                        },
+                       {
+                           Header: "Software",
+                           accessor: "softwareIds",
+                           filterable: true,
+                           filterMethod: (filter: any, row: any) => {
+                               if (filter.value === "any") {
+                                   return true;
+                               }
+                               return row[filter.id].join(",").split(",").includes(filter.value);
+                           },
+                           Filter: ({ filter, onChange }) =>
+                               <select
+                                   onChange={event => onChange(event.target.value)}
+                                   style={{ width: "100%" }}
+                                   value={filter ? filter.value : "all"}>
+                                   <option value="any">Any</option>
+                                   {state.software.map((e: any) => <option value={e.id}>{e.name}</option>)}
+                               </select>,
+                           Cell: () => null,
+                           width: 100,
+                           headerClassName: "d-none d-md-block",
+                           className: "d-none d-md-block"
+                       },
                        {
                            Header: "Tags",
                            accessor: "tags",
@@ -135,33 +158,6 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                            headerClassName: "d-none d-md-block",
                            className: "d-none d-md-block"
                        },
-                       {
-                           Header: "Software",
-                           accessor: "software",
-                           filterable: true,
-                           filterMethod: (filter: any, row: any) => {
-                               if (filter.value === "all") {
-                                   return true;
-                               }
-                               if (filter.value === "true") {
-                                   return row[filter.id] >= 21;
-                               }
-                               return row[filter.id] < 21;
-                           },
-                           Filter: ({ filter, onChange }) =>
-                               <select
-                                   onChange={event => onChange(event.target.value)}
-                                   style={{ width: "100%" }}
-                                   value={filter ? filter.value : "all"}>
-                                   {state.software.map((e: any) => <option value={e.id}>{e.name}</option>)}
-                               </select>,
-                           Cell: (cell: any) => <div className="fl-tag-container">{cell.value.map(
-                               (e: any) => <span className="badge badge-info">{e}</span>)}</div>,
-                           style: { whiteSpace: "inherit" },
-                           width: 150,
-                           headerClassName: "d-none d-md-block",
-                           className: "d-none d-md-block"
-                       },
                        {
                            Header: "Updated",
                            accessor: "updatedDate",