From bb4c6bf156fdd08db77126f9309642f64b78602e Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sat, 31 Aug 2019 11:33:21 -0500
Subject: [PATCH] extract ListsTable and ListDrawer below ListsTableHoc

---
 .../src/components/listsTable/ListDrawer.tsx  |  30 ++++
 .../src/components/listsTable/ListsTable.tsx  | 152 ++++++++----------
 .../components/listsTable/ListsTableHoc.tsx   |  19 +++
 .../src/components/listsTable/index.ts        |   4 +-
 4 files changed, 118 insertions(+), 87 deletions(-)
 create mode 100644 src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
 create mode 100644 src/FilterLists.Web.V2/src/components/listsTable/ListsTableHoc.tsx

diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
new file mode 100644
index 000000000..c71162dbc
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, RouteComponentProps, StaticContext } from 'react-router';
+
+import { Language } from '../../interfaces/Language';
+import { License } from '../../interfaces/License';
+import { List } from '../../interfaces/List';
+import { Tag } from '../../interfaces/Tag';
+import { ListInfoDrawer } from '../ListInfoDrawer';
+
+interface Props {
+    lists: List[];
+    languages: Language[];
+    licenses: License[];
+    tags: Tag[];
+}
+
+export const ListDrawer = (props: Props) => {
+    const renderDrawer = (rp: RouteComponentProps<any, StaticContext, any>) => {
+        const list = props.lists.find(l => l.id === +rp.match.params.id);
+        return list
+            ? <ListInfoDrawer
+                list={list as List}
+                languages={list.languageIds && props.languages.filter((l: Language) => list.languageIds.includes(l.id))}
+                license={list.licenseId ? props.licenses.find((l: License) => list.licenseId === l.id) : undefined}
+                tags={list.tagIds && props.tags.filter((t: Tag) => list.tagIds.includes(t.id))}
+                {...rp} />
+            : props.lists && props.lists.length && <Redirect to={{ pathname: "/", }} />
+    };
+    return <Route path="/lists/:id" render={renderDrawer} />
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
index 5ee5be212..37ad94a76 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
@@ -1,8 +1,8 @@
 import { Table } from 'antd';
 import React from 'react';
-import { Redirect, Route, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router';
 
-import { useLanguages, useLicenses, useLists, useTablePageSizer, useTags } from '../../hooks';
+import { useTablePageSizer } from '../../hooks';
 import { Language } from '../../interfaces/Language';
 import { License } from '../../interfaces/License';
 import { List } from '../../interfaces/List';
@@ -11,92 +11,74 @@ import { nameof } from '../../utils';
 import { Description } from '../Description';
 import { LanguageCloud } from '../languageCloud';
 import { ListInfoButton } from '../ListInfoButton';
-import { ListInfoDrawer } from '../ListInfoDrawer';
 import { TagCloud } from '../tagCloud';
 import { arraySorter } from './arraySorter';
 import styles from './ListsTable.module.css';
 
-export const ListsTable = (props: RouteComponentProps) => {
-  const lists = useLists();
-  const languages = useLanguages();
-  const licenses = useLicenses();
-  const tags = useTags();
-  const tablePageSize = useTablePageSizer();
+interface Props {
+    lists: List[];
+    languages: Language[];
+    licenses: License[];
+    tags: Tag[];
+}
 
-  const ListsTable = () =>
-    <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={(_text: string, record: List) => <ListInfoButton list={record} {...props} />} />
-      <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"
-        render={(text: string) => <div>{text}</div>} />
-      {tablePageSize.isNarrowWindow
-        ? null
-        : <Table.Column<List>
-          title="Description"
-          dataIndex={nameof<List>("description")}
-          className={styles.nogrow}
-          render={(_text: string, record: List) => <Description {...record} />} />}
-      {tablePageSize.isNarrowWindow
-        ? null
-        : <Table.Column<List>
-          title="Software"
-          dataIndex={nameof<List>("syntaxId")}
-          className={styles.nogrow}
-          render={(text: string) => <div>{text}</div>} />}
-      {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}
-          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}
-          render={(tagIds: number[]) => tagIds ? <TagCloud tags={tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
-    </Table>;
-
-  const ListDetailsDrawer = () =>
-    <Route path="/lists/:id" render={rp => {
-      const list = lists.find(l => l.id === +rp.match.params.id);
-      return list
-        ? <ListInfoDrawer
-          list={list as List}
-          languages={list.languageIds && languages.filter((l: Language) => list.languageIds.includes(l.id))}
-          license={list.licenseId ? licenses.find((l: License) => list.licenseId === l.id) : undefined}
-          tags={list.tagIds && tags.filter((t: Tag) => list.tagIds.includes(t.id))}
-          {...props} />
-        : lists && lists.length && <Redirect to={{ pathname: "/", }} />
-    }} />;
-
-  return (
-    <>
-      <ListsTable />
-      <ListDetailsDrawer />
-    </>
-  );
+export const ListsTable = (props: RouteComponentProps & Props) => {
+    const tablePageSize = useTablePageSizer();
+    return (
+        <Table<List>
+            dataSource={props.lists}
+            rowKey={record => record.id.toString()}
+            loading={props.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={(_text: string, record: List) => <ListInfoButton list={record} {...props} />} />
+            <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"
+                render={(text: string) => <div>{text}</div>} />
+            {tablePageSize.isNarrowWindow
+                ? null
+                : <Table.Column<List>
+                    title="Description"
+                    dataIndex={nameof<List>("description")}
+                    className={styles.nogrow}
+                    render={(_text: string, record: List) => <Description {...record} />} />}
+            {tablePageSize.isNarrowWindow
+                ? null
+                : <Table.Column<List>
+                    title="Software"
+                    dataIndex={nameof<List>("syntaxId")}
+                    className={styles.nogrow}
+                    render={(text: string) => <div>{text}</div>} />}
+            {tablePageSize.isNarrowWindow
+                ? null
+                : <Table.Column<List>
+                    title="Languages"
+                    dataIndex={nameof<List>("languageIds")}
+                    sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, props.languages)}
+                    width={125}
+                    className={styles.nogrow}
+                    render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={props.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, props.tags)}
+                    width={275}
+                    className={styles.nogrow}
+                    render={(tagIds: number[]) => tagIds ? <TagCloud tags={props.tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
+        </Table>
+    )
 }
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListsTableHoc.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListsTableHoc.tsx
new file mode 100644
index 000000000..8884df941
--- /dev/null
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListsTableHoc.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import { useLanguages, useLicenses, useLists, useTags } from '../../hooks';
+import { ListDrawer } from './ListDrawer';
+import { ListsTable } from './ListsTable';
+
+export const ListsTableHoc = (props: RouteComponentProps) => {
+  const lists = useLists();
+  const languages = useLanguages();
+  const licenses = useLicenses();
+  const tags = useTags();
+  return (
+    <>
+      <ListsTable lists={lists} languages={languages} licenses={licenses} tags={tags} {...props} />
+      <ListDrawer lists={lists} languages={languages} licenses={licenses} tags={tags} />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/index.ts b/src/FilterLists.Web.V2/src/components/listsTable/index.ts
index ad67ef839..595fade9b 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/index.ts
+++ b/src/FilterLists.Web.V2/src/components/listsTable/index.ts
@@ -1,3 +1,3 @@
-import { ListsTable } from './ListsTable';
+import { ListsTableHoc } from './ListsTableHoc';
 
-export { ListsTable }
\ No newline at end of file
+export { ListsTableHoc as ListsTable }
\ No newline at end of file