From 4108e7fdcf15a5ceaa0e9b9b7fffdd4abf56a125 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 4 Sep 2018 13:18:11 -0400
Subject: [PATCH] fix select/unselect

---
 .../common/form-components/form-field.jsx     |  7 ++-
 .../common/form-components/form-row.jsx       |  4 +-
 src/renderer/component/userHistory/view.jsx   | 50 ++++++++++++-------
 .../component/userHistoryItem/view.jsx        | 12 +++--
 src/renderer/constants/content.js             |  2 +-
 src/renderer/scss/component/_form-field.scss  |  4 ++
 src/renderer/scss/component/_table.scss       | 10 ++--
 7 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 52c1003dc..e2e1960d0 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -24,6 +24,9 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   firstInList?: boolean, // at the top of a list, no padding top
+  inputProps: {
+    disabled?: boolean,
+  },
 };
 
 export class FormField extends React.PureComponent<Props> {
@@ -76,8 +79,8 @@ export class FormField extends React.PureComponent<Props> {
         );
       } else if (type === 'textarea') {
         input = <textarea type={type} id={name} {...inputProps} />;
-      // } else if (type === 'checkbox') {
-      //   input = <Toggle id={name} {...inputProps} />;
+      } else if (type === 'checkbox') {
+        input = <Toggle id={name} {...inputProps} />;
       } else {
         input = <input type={type} id={name} {...inputProps} />;
       }
diff --git a/src/renderer/component/common/form-components/form-row.jsx b/src/renderer/component/common/form-components/form-row.jsx
index 79f1b5cd0..e0d0959e1 100644
--- a/src/renderer/component/common/form-components/form-row.jsx
+++ b/src/renderer/component/common/form-components/form-row.jsx
@@ -9,6 +9,7 @@ type Props = {
   verticallyCentered?: boolean,
   stretch?: boolean,
   alignRight?: boolean,
+  centered?: boolean,
 };
 
 export class FormRow extends React.PureComponent<Props> {
@@ -17,7 +18,7 @@ export class FormRow extends React.PureComponent<Props> {
   };
 
   render() {
-    const { children, padded, verticallyCentered, stretch, alignRight } = this.props;
+    const { children, padded, verticallyCentered, stretch, alignRight, centered } = this.props;
     return (
       <div
         className={classnames('form-row', {
@@ -25,6 +26,7 @@ export class FormRow extends React.PureComponent<Props> {
           'form-row--vertically-centered': verticallyCentered,
           'form-row--stretch': stretch,
           'form-row--right': alignRight,
+          'form-row--centered': centered,
         })}
       >
         {children}
diff --git a/src/renderer/component/userHistory/view.jsx b/src/renderer/component/userHistory/view.jsx
index 9c50a59ec..ae8f4b532 100644
--- a/src/renderer/component/userHistory/view.jsx
+++ b/src/renderer/component/userHistory/view.jsx
@@ -1,7 +1,5 @@
 // @flow
-import React from 'react';
-import FileCard from 'component/fileCard';
-import Page from 'component/page';
+import * as React from 'react';
 import Button from 'component/button';
 import { FormField, FormRow } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
@@ -16,11 +14,16 @@ type Props = {
   history: Array<HistoryItem>,
   page: number,
   pageCount: number,
-  navigate: string => void,
+  navigate: (string, {}) => void,
+  clearHistoryUri: string => void,
   params: { page: number },
 };
 
-class UserHistoryPage extends React.PureComponent<Props> {
+type State = {
+  itemsSelected: {},
+};
+
+class UserHistoryPage extends React.PureComponent<Props, State> {
   constructor() {
     super();
 
@@ -28,9 +31,24 @@ class UserHistoryPage extends React.PureComponent<Props> {
       itemsSelected: {},
     };
 
-    this.selectAll = this.selectAll.bind(this);
-    this.unselectAll = this.unselectAll.bind(this);
-    this.removeSelected = this.removeSelected.bind(this);
+    (this: any).selectAll = this.selectAll.bind(this);
+    (this: any).unselectAll = this.unselectAll.bind(this);
+    (this: any).removeSelected = this.removeSelected.bind(this);
+  }
+
+  onSelect(uri: string) {
+    const { itemsSelected } = this.state;
+
+    const newItemsSelected = { ...itemsSelected };
+    if (itemsSelected[uri]) {
+      delete newItemsSelected[uri];
+    } else {
+      newItemsSelected[uri] = true;
+    }
+
+    this.setState({
+      itemsSelected: { ...newItemsSelected },
+    });
   }
 
   changePage(pageNumber: number) {
@@ -52,12 +70,6 @@ class UserHistoryPage extends React.PureComponent<Props> {
     }
   }
 
-  onSelect(uri: string) {
-    this.setState({
-      itemsSelected: { ...this.state.itemsSelected, [uri]: !this.state.itemsSelected[uri] },
-    });
-  }
-
   selectAll() {
     const { history } = this.props;
     const newSelectedState = {};
@@ -82,7 +94,7 @@ class UserHistoryPage extends React.PureComponent<Props> {
   }
 
   render() {
-    const { history, page, pageCount, navigate } = this.props;
+    const { history, page, pageCount } = this.props;
     const { itemsSelected } = this.state;
 
     const allSelected = Object.keys(itemsSelected).length === history.length;
@@ -90,10 +102,12 @@ class UserHistoryPage extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         <div className="card__actions card__actions--between">
-          {!!Object.keys(itemsSelected).length ? (
+          {Object.keys(itemsSelected).length ? (
             <Button button="link" label={__('Delete')} onClick={this.removeSelected} />
           ) : (
-            <span />
+            <span>
+              {/* Using an empty span so spacing stays the same if the button isn't rendered */}
+            </span>
           )}
 
           <Button
@@ -120,7 +134,7 @@ class UserHistoryPage extends React.PureComponent<Props> {
           </table>
         )}
         {pageCount > 1 && (
-          <FormRow verticallyCentered centered>
+          <FormRow padded verticallyCentered centered>
             <ReactPaginate
               pageCount={pageCount}
               pageRangeDisplayed={2}
diff --git a/src/renderer/component/userHistoryItem/view.jsx b/src/renderer/component/userHistoryItem/view.jsx
index 7b84b603f..de35a919b 100644
--- a/src/renderer/component/userHistoryItem/view.jsx
+++ b/src/renderer/component/userHistoryItem/view.jsx
@@ -3,13 +3,15 @@ import React from 'react';
 import type { Claim } from 'types/claim';
 import moment from 'moment';
 import classnames from 'classnames';
-import { FormRow, FormField } from 'component/common/form';
 import Button from 'component/button';
 
 type Props = {
   lastViewed: number,
   uri: string,
-  claim: ?{},
+  claim: ?Claim,
+  selected: boolean,
+  onSelect: () => void,
+  resolveUri: string => void,
 };
 
 class UserHistoryItem extends React.PureComponent<Props> {
@@ -27,7 +29,7 @@ class UserHistoryItem extends React.PureComponent<Props> {
     let name;
     let title;
     let uri;
-    if (claim) {
+    if (claim && claim.value && claim.value.stream) {
       ({ name } = claim);
       ({ title } = claim.value.stream.metadata);
       uri = claim.permanent_url;
@@ -44,16 +46,16 @@ class UserHistoryItem extends React.PureComponent<Props> {
           <input checked={selected} type="checkbox" onClick={onSelect} />
         </td>
         <td>{moment(lastViewed).from(moment())}</td>
+        <td>{title}</td>
         <td>
           <Button
             tourniquet
             button="link"
-            label={`lbry://${name}`}
+            label={name ? `lbry://${name}` : `lbry://...`}
             navigate="/show"
             navigateParams={{ uri }}
           />
         </td>
-        <td>{title}</td>
       </tr>
     );
   }
diff --git a/src/renderer/constants/content.js b/src/renderer/constants/content.js
index 31a776af2..a41bcd9c5 100644
--- a/src/renderer/constants/content.js
+++ b/src/renderer/constants/content.js
@@ -1 +1 @@
-export const HISTORY_ITEMS_PER_PAGE = 30;
+export const HISTORY_ITEMS_PER_PAGE = 50;
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index 15fbe14e5..a79dbc13d 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -19,6 +19,10 @@
     align-items: center;
   }
 
+  &.form-row--centered {
+    justify-content: center;
+  }
+
   &.form-row--stretch {
     flex: 1;
   }
diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss
index d794987de..38e02bd3a 100644
--- a/src/renderer/scss/component/_table.scss
+++ b/src/renderer/scss/component/_table.scss
@@ -133,15 +133,15 @@ table.table--history {
       width: 7.5%;
     }
     td:nth-of-type(2) {
-      width: 20%;
+      width: 17.5%;
     }
     td:nth-of-type(3) {
-      width: 30%;
-      padding-right: 10px;
+      width: 40%;
+      max-width: 30vw;
+      padding-right: $spacing-vertical * 2/3;
     }
     td:nth-of-type(4) {
-      width: 42.5%;
-      max-width: 30vw;
+      width: 30%;
     }
 
     td:nth-of-type(3),