From 44afc4acebff7ccf646c56dd86e910d9c14133ef Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sat, 31 Aug 2019 10:09:03 -0500
Subject: [PATCH] separate ListsTable and ListDetailsDrawer and wrap in
 Fragment

---
 .../src/components/listsTable/ListsTable.tsx  | 142 +++++++++---------
 1 file changed, 74 insertions(+), 68 deletions(-)

diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
index c15325d5b..5ee5be212 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
@@ -23,74 +23,80 @@ export const ListsTable = (props: RouteComponentProps) => {
   const tags = useTags();
   const tablePageSize = useTablePageSizer();
 
+  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 (
-    <span>
-      <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>
-      <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: "/", }} />
-      }} />
-    </span>
+    <>
+      <ListsTable />
+      <ListDetailsDrawer />
+    </>
   );
 }
\ No newline at end of file