From 3253640f283d94f83a81ad1b3dfa4955528e87e5 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 26 Aug 2019 13:31:07 -0500
Subject: [PATCH] simple pagination, set title on drawer mount, ren details ->
 info

---
 ...stDetailsButton.tsx => ListInfoButton.tsx} |  8 +++----
 ...stDetailsDrawer.tsx => ListInfoDrawer.tsx} | 12 +++++++++--
 .../src/components/listsTable/ListsTable.tsx  | 21 +++++++------------
 3 files changed, 22 insertions(+), 19 deletions(-)
 rename src/FilterLists.Web.V2/src/components/{ListDetailsButton.tsx => ListInfoButton.tsx} (69%)
 rename src/FilterLists.Web.V2/src/components/{ListDetailsDrawer.tsx => ListInfoDrawer.tsx} (94%)

diff --git a/src/FilterLists.Web.V2/src/components/ListDetailsButton.tsx b/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
similarity index 69%
rename from src/FilterLists.Web.V2/src/components/ListDetailsButton.tsx
rename to src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
index df308e8bd..efa70a457 100644
--- a/src/FilterLists.Web.V2/src/components/ListDetailsButton.tsx
+++ b/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
@@ -8,12 +8,12 @@ interface Props {
   list: List;
 };
 
-export const ListDetailsButton = (props: RouteComponentProps & Props) =>
+export const ListInfoButton = (props: RouteComponentProps & Props) =>
   <Button
     type="primary"
     icon="info-circle"
     onClick={() => props.location.pathname === `/lists/${props.list.id}`
       ? props.history.push("/")
-      : props.history.push(`/lists/${props.list.id}`)}>
-    Details
-  </Button>;
\ No newline at end of file
+      : props.history.push(`/lists/${props.list.id}`)} >
+    Info
+    </Button>;
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx b/src/FilterLists.Web.V2/src/components/ListInfoDrawer.tsx
similarity index 94%
rename from src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx
rename to src/FilterLists.Web.V2/src/components/ListInfoDrawer.tsx
index 9a8fb3d43..58d7788d8 100644
--- a/src/FilterLists.Web.V2/src/components/ListDetailsDrawer.tsx
+++ b/src/FilterLists.Web.V2/src/components/ListInfoDrawer.tsx
@@ -22,7 +22,7 @@ interface State {
   baseDocumentTitle: string;
 }
 
-export class ListDetailsDrawer extends React.Component<RouteComponentProps & Props, State> {
+export class ListInfoDrawer extends React.Component<RouteComponentProps & Props, State> {
   constructor(props: any) {
     super(props);
     this.state = {
@@ -30,6 +30,10 @@ export class ListDetailsDrawer extends React.Component<RouteComponentProps & Pro
     };
   }
 
+  componentDidMount() {
+    this.updateTitle();
+  }
+
   render() {
     return <Drawer
       visible={true}
@@ -105,7 +109,11 @@ export class ListDetailsDrawer extends React.Component<RouteComponentProps & Pro
   }
 
   componentDidUpdate() {
-    document.title = this.props.list.name + " | " + this.state.baseDocumentTitle
+    this.updateTitle();
+  }
+
+  private updateTitle() {
+    document.title = this.props.list.name + " | " + this.state.baseDocumentTitle;
   }
 
   componentWillUnmount() {
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
index d2e873a76..e547a7b00 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
@@ -8,8 +8,8 @@ import { Tag } from '../../interfaces/Tag';
 import { nameof } from '../../utils';
 import { Description } from '../Description';
 import { LanguageCloud } from '../languageCloud';
-import { ListDetailsButton } from '../ListDetailsButton';
-import { ListDetailsDrawer } from '../ListDetailsDrawer';
+import { ListInfoButton } from '../ListInfoButton';
+import { ListInfoDrawer } from '../ListInfoDrawer';
 import { TagCloud } from '../tagCloud';
 import styles from './ListsTable.module.css';
 
@@ -18,7 +18,6 @@ interface State {
   languages: Language[];
   tags: Tag[];
   pageSize: number;
-  pageSizeOptions: string[];
   isNarrowWindow: boolean;
 }
 
@@ -30,7 +29,6 @@ export class ListsTable extends React.Component<RouteComponentProps, State> {
       languages: [],
       tags: [],
       pageSize: 0,
-      pageSizeOptions: [],
       isNarrowWindow: false
     };
     this.updatePageSize = this.updatePageSize.bind(this);
@@ -60,10 +58,8 @@ export class ListsTable extends React.Component<RouteComponentProps, State> {
   }
 
   private updatePageSize() {
-    const pageSize = Math.floor((window.innerHeight - 211.5) / 56);
     this.setState({
-      pageSize: pageSize,
-      pageSizeOptions: [pageSize, 200, 2000].sort((a, b) => a - b).map(String),
+      pageSize: Math.floor((window.innerHeight - 211.5) / 56),
       isNarrowWindow: window.innerWidth < 576 ? true : false
     });
   }
@@ -78,18 +74,17 @@ export class ListsTable extends React.Component<RouteComponentProps, State> {
           size="small"
           pagination={{
             size: "small",
+            simple: true,
             style: { float: "left" },
-            pageSize: this.state.pageSize,
-            showSizeChanger: true,
-            pageSizeOptions: this.state.pageSizeOptions
+            pageSize: this.state.pageSize
           }}
           scroll={{ x: this.state.isNarrowWindow ? undefined : 1200 }}>
           <Table.Column<List>
-            title="Details"
+            title="Info"
             dataIndex={nameof<List>("viewUrl")}
             className={styles.nogrow}
             fixed="left"
-            render={(_text: string, record: List) => <ListDetailsButton list={record} {...this.props} />} />
+            render={(_text: string, record: List) => <ListInfoButton list={record} {...this.props} />} />
           <Table.Column<List>
             title="Name"
             dataIndex={nameof<List>("name")}
@@ -141,7 +136,7 @@ export class ListsTable extends React.Component<RouteComponentProps, State> {
         <Route path="/lists/:id" render={props => {
           const list = this.state.lists.find(l => l.id === +props.match.params.id);
           return list
-            ? <ListDetailsDrawer list={list as List} {...props} {...this.state} />
+            ? <ListInfoDrawer list={list as List} {...props} {...this.state} />
             : this.state.lists && this.state.lists.length && <Redirect to={{ pathname: "/", }} />
         }} />
       </span>