From 6caeae5d911f543c90100a9665720953855474b1 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Tue, 3 Sep 2019 15:23:05 -0500
Subject: [PATCH] show count of lists matching each filter option

closes #556, closes #551
---
 .../src/components/listsTable/ListsTable.tsx  | 256 +++++++++---------
 1 file changed, 134 insertions(+), 122 deletions(-)

diff --git a/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx
index 1e84e9f51..fc3ddce9d 100644
--- a/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx
@@ -1,5 +1,6 @@
 import { Table, Tag } from 'antd';
-import React from 'react';
+import { PaginationConfig, SorterResult, TableCurrentDataSource } from 'antd/lib/table';
+import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 
 import { useSearchColumnFilter, useTablePageSizer } from '../../hooks';
@@ -18,128 +19,139 @@ import { arraySorter } from './arraySorter';
 import styles from './ListsTable.module.css';
 
 interface Props {
-    lists: List[];
-    languages: Language[];
-    licenses: License[];
-    software: Software[];
-    tags: TagInterface[];
+  lists: List[];
+  languages: Language[];
+  licenses: License[];
+  software: Software[];
+  tags: TagInterface[];
 };
 
 export const ListsTable = (props: RouteComponentProps & Props) => {
-    const { lists, languages, licenses, software, tags, ...routeComponentProps } = props;
-    const tablePageSize = useTablePageSizer();
-    const searchNameColumn = useSearchColumnFilter<List>(nameof<List>("name"));
-    const searchDescriptionColumn = useSearchColumnFilter<List>(nameof<List>("description"));
-    return (
-        <Table<List>
-            dataSource={lists}
-            rowKey={record => record.id.toString()}
-            loading={lists.length ? false : true}
-            size="small"
-            pagination={{
-                size: "small",
-                simple: true,
-                style: { float: "left" },
-                pageSize: tablePageSize.pageSize
-            }}
-            scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1200 }}>
-            <Table.Column<List>
-                title="Info"
-                dataIndex={nameof<List>("id")}
-                className={styles.nogrow}
-                fixed="left"
-                render={(_id: number, list: List) =>
-                    <ListInfoButton listName={list.name} {...routeComponentProps} />} />
-            <Table.Column<List>
-                title="Name"
-                dataIndex={nameof<List>("name")}
-                sorter={(a, b) => a.name.localeCompare(b.name)}
-                defaultSortOrder={"ascend"}
-                width={tablePageSize.isNarrowWindow ? undefined : 200}
-                className={styles.nogrow}
-                fixed="left"
-                filterDropdown={searchNameColumn.filterDropdown}
-                filterIcon={searchNameColumn.filterIcon}
-                onFilter={searchNameColumn.onFilter}
-                render={(name: string) =>
-                    <div>{name}</div>} />
-            {tablePageSize.isNarrowWindow
-                ? null
-                : <Table.Column<List>
-                    title="Description"
-                    dataIndex={nameof<List>("description")}
-                    className={styles.nogrow}
-                    filterDropdown={searchDescriptionColumn.filterDropdown}
-                    filterIcon={searchDescriptionColumn.filterIcon}
-                    onFilter={searchDescriptionColumn.onFilter}
-                    render={(description: string, list: List) =>
-                        <Description
-                            description={description}
-                            descriptionSourceUrl={list.descriptionSourceUrl} />} />}
-            {tablePageSize.isNarrowWindow
-                ? null
-                : <Table.Column<List>
-                    title="Software"
-                    dataIndex={nameof<List>("syntaxId")}
-                    sorter={(a, b) => {
-                        const getSoftwareIds = (l: List) => software.filter((s: Software) => s.syntaxIds.includes(l.syntaxId)).map(s => s.id);
-                        return arraySorter(getSoftwareIds(a), getSoftwareIds(b), software);
-                    }}
-                    width={143}
-                    className={styles.nogrow}
-                    filters={software.map(s => ({
-                        text: <>
-                            <SoftwareIcon id={s.id} />&nbsp;
-                            {s.name}
-                        </>,
-                        value: s.name
-                    }))}
-                    onFilter={(value, record) => software.filter((s: Software) => s.name === value).flatMap(s => s.syntaxIds).includes(record.syntaxId)}
-                    render={(syntaxId: number) =>
-                        syntaxId
-                            ? <SoftwareCloud software={software.filter((s: Software) => s.syntaxIds.includes(syntaxId))} />
-                            : null} />}
-            {tablePageSize.isNarrowWindow
-                ? null
-                : <Table.Column<List>
-                    title="Languages"
-                    dataIndex={nameof<List>("languageIds")}
-                    sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, languages)}
-                    width={125}
-                    className={styles.nogrow}
-                    filters={languages.map(l => ({
-                        text: <>
-                            <Tag title={l.name}>{l.iso6391}</Tag>&nbsp;
-                            {l.name}
-                        </>,
-                        value: l.id.toString()
-                    }))}
-                    onFilter={(value, record) => record.languageIds
-                        ? record.languageIds.includes(+value)
-                        : false}
-                    render={(languageIds: number[]) =>
-                        languageIds
-                            ? <LanguageCloud languages={languages.filter((l: Language) => languageIds.includes(l.id))} />
-                            : null} />}
-            {tablePageSize.isNarrowWindow
-                ? null
-                : <Table.Column<List>
-                    title="Tags"
-                    dataIndex={nameof<List>("tagIds")}
-                    sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
-                    width={275}
-                    className={styles.nogrow}
-                    filters={tags.map(t => ({
-                        text: <Tag title={t.description}>{t.name}</Tag>,
-                        value: t.id.toString()
-                    }))}
-                    onFilter={(value, record) => record.tagIds
-                        ? record.tagIds.includes(+value)
-                        : false}
-                    render={(tagIds: number[]) =>
-                        tagIds
-                            ? <TagCloud tags={tags.filter((t: TagInterface) => tagIds.includes(t.id))} />
-                            : null} />}
-        </Table>
-    );
+  const { lists, languages, licenses, software, tags, ...routeComponentProps } = props;
+  const tablePageSize = useTablePageSizer();
+  const searchNameColumn = useSearchColumnFilter<List>(nameof<List>("name"));
+  const searchDescriptionColumn = useSearchColumnFilter<List>(nameof<List>("description"));
+  const [visibleLists, setVisibleLists] = useState<List[]>(lists);
+  useEffect(() => {
+    setVisibleLists(lists);
+  }, [lists]);
+  return (
+    <Table<List>
+      dataSource={lists}
+      rowKey={record => record.id.toString()}
+      loading={lists.length ? false : true}
+      size="small"
+      pagination={{
+        size: "small",
+        simple: true,
+        style: { float: "left" },
+        pageSize: tablePageSize.pageSize
+      }}
+      scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1200 }}
+      onChange={(_pagination: PaginationConfig, _filters: Record<keyof List, string[]>, _sorter: SorterResult<List>, extra: TableCurrentDataSource<List>) =>
+        setVisibleLists(extra.currentDataSource)}>
+      <Table.Column<List>
+        title="Info"
+        dataIndex={nameof<List>("id")}
+        className={styles.nogrow}
+        fixed="left"
+        render={(_id: number, list: List) =>
+          <ListInfoButton listName={list.name} {...routeComponentProps} />} />
+      <Table.Column<List>
+        title="Name"
+        dataIndex={nameof<List>("name")}
+        sorter={(a, b) => a.name.localeCompare(b.name)}
+        defaultSortOrder={"ascend"}
+        width={tablePageSize.isNarrowWindow ? undefined : 200}
+        className={styles.nogrow}
+        fixed="left"
+        filterDropdown={searchNameColumn.filterDropdown}
+        filterIcon={searchNameColumn.filterIcon}
+        onFilter={searchNameColumn.onFilter}
+        render={(name: string) =>
+          <div>{name}</div>} />
+      {tablePageSize.isNarrowWindow
+        ? null
+        : <Table.Column<List>
+          title="Description"
+          dataIndex={nameof<List>("description")}
+          className={styles.nogrow}
+          filterDropdown={searchDescriptionColumn.filterDropdown}
+          filterIcon={searchDescriptionColumn.filterIcon}
+          onFilter={searchDescriptionColumn.onFilter}
+          render={(description: string, list: List) =>
+            <Description
+              description={description}
+              descriptionSourceUrl={list.descriptionSourceUrl} />} />}
+      {tablePageSize.isNarrowWindow
+        ? null
+        : <Table.Column<List>
+          title="Software"
+          dataIndex={nameof<List>("syntaxId")}
+          sorter={(a, b) => {
+            const getSoftwareIds = (l: List) => software.filter((s: Software) => s.syntaxIds.includes(l.syntaxId)).map(s => s.id);
+            return arraySorter(getSoftwareIds(a), getSoftwareIds(b), software);
+          }}
+          width={143}
+          className={styles.nogrow}
+          filters={software.map(s => ({
+            text: <>
+              <SoftwareIcon id={s.id} />&nbsp;
+              {s.name}&nbsp;
+              ({visibleLists.filter(l => s.syntaxIds && s.syntaxIds.includes(l.syntaxId)).length})
+              </>,
+            value: s.name
+          }))}
+          onFilter={(value, record) => software.filter((s: Software) => s.name === value).flatMap(s => s.syntaxIds).includes(record.syntaxId)}
+          render={(syntaxId: number) =>
+            syntaxId
+              ? <SoftwareCloud software={software.filter((s: Software) => s.syntaxIds.includes(syntaxId))} />
+              : null} />}
+      {tablePageSize.isNarrowWindow
+        ? null
+        : <Table.Column<List>
+          title="Languages"
+          dataIndex={nameof<List>("languageIds")}
+          sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, languages)}
+          width={125}
+          className={styles.nogrow}
+          filters={languages.map(l => ({
+            text: <>
+              <Tag title={l.name}>{l.iso6391}</Tag>&nbsp;
+              {l.name}&nbsp;
+              ({visibleLists.filter(li => li.languageIds && li.languageIds.includes(l.id)).length})
+            </>,
+            value: l.id.toString()
+          }))}
+          onFilter={(value, record) => record.languageIds
+            ? record.languageIds.includes(+value)
+            : false}
+          render={(languageIds: number[]) =>
+            languageIds
+              ? <LanguageCloud languages={languages.filter((l: Language) => languageIds.includes(l.id))} />
+              : null} />}
+      {tablePageSize.isNarrowWindow
+        ? null
+        : <Table.Column<List>
+          title="Tags"
+          dataIndex={nameof<List>("tagIds")}
+          sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
+          width={275}
+          className={styles.nogrow}
+          filters={tags.map(t => ({
+            text: <>
+              <Tag title={t.description}>{t.name}</Tag>&nbsp;
+              ({visibleLists.filter(l => l.tagIds && l.tagIds.includes(t.id)).length})
+            </>,
+            value: t.id.toString()
+          }))}
+          onFilter={(value, record) => record.tagIds
+            ? record.tagIds.includes(+value)
+            : false}
+          render={(tagIds: number[]) =>
+            tagIds
+              ? <TagCloud tags={tags.filter((t: TagInterface) => tagIds.includes(t.id))} />
+              : null} />}
+    </Table>
+  );
 };
\ No newline at end of file