From a782f817f11989d526f05208119543b1566222e3 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 30 Aug 2018 23:45:49 -0400
Subject: [PATCH] style history table

---
 src/renderer/component/userHistory/view.jsx   | 112 +++++++++---------
 .../component/userHistoryItem/index.js        |  17 ++-
 .../component/userHistoryItem/view.jsx        |  51 ++++----
 src/renderer/page/file/view.jsx               |   4 +-
 src/renderer/scss/component/_table.scss       |  32 +++--
 5 files changed, 127 insertions(+), 89 deletions(-)

diff --git a/src/renderer/component/userHistory/view.jsx b/src/renderer/component/userHistory/view.jsx
index 0216e0b05..9c50a59ec 100644
--- a/src/renderer/component/userHistory/view.jsx
+++ b/src/renderer/component/userHistory/view.jsx
@@ -23,16 +23,16 @@ type Props = {
 class UserHistoryPage extends React.PureComponent<Props> {
   constructor() {
     super();
-    
+
     this.state = {
       itemsSelected: {},
-    }
-    
+    };
+
     this.selectAll = this.selectAll.bind(this);
     this.unselectAll = this.unselectAll.bind(this);
     this.removeSelected = this.removeSelected.bind(this);
   }
-  
+
   changePage(pageNumber: number) {
     const { params } = this.props;
     const newParams = { ...params, page: pageNumber };
@@ -51,53 +51,56 @@ class UserHistoryPage extends React.PureComponent<Props> {
       this.changePage(pageFromInput);
     }
   }
-  
+
   onSelect(uri: string) {
-    console.log("onSelect", uri)
     this.setState({
-      itemsSelected: { ...this.state.itemsSelected, [uri]: !this.state.itemsSelected[uri] }
-    })
+      itemsSelected: { ...this.state.itemsSelected, [uri]: !this.state.itemsSelected[uri] },
+    });
   }
-  
+
   selectAll() {
     const { history } = this.props;
     const newSelectedState = {};
-    history.forEach(({uri}) => newSelectedState[uri] = true);
+    history.forEach(({ uri }) => (newSelectedState[uri] = true));
     this.setState({ itemsSelected: newSelectedState });
   }
-  
+
   unselectAll() {
     this.setState({
-      itemsSelected: {}
-    })
+      itemsSelected: {},
+    });
   }
-  
+
   removeSelected() {
     const { clearHistoryUri } = this.props;
     const { itemsSelected } = this.state;
-    
+
     Object.keys(itemsSelected).forEach(uri => clearHistoryUri(uri));
+    this.setState({
+      itemsSelected: {},
+    });
   }
 
   render() {
     const { history, page, pageCount, navigate } = this.props;
     const { itemsSelected } = this.state;
-    
+
     const allSelected = Object.keys(itemsSelected).length === history.length;
     const selectHandler = allSelected ? this.unselectAll : this.selectAll;
     return (
       <React.Fragment>
-        <div>
+        <div className="card__actions card__actions--between">
+          {!!Object.keys(itemsSelected).length ? (
+            <Button button="link" label={__('Delete')} onClick={this.removeSelected} />
+          ) : (
+            <span />
+          )}
+
           <Button
             button="link"
-            label={allSelected ? __("Cancel") : __("Select All")}
-            onClick={selectHandler} />
-          {!!Object.keys(itemsSelected).length && (
-            <Button
-              button="link"
-              label={__("Delete")}
-              onClick={this.removeSelected} />
-          )}
+            label={allSelected ? __('Cancel') : __('Select All')}
+            onClick={selectHandler}
+          />
         </div>
         {!!history.length && (
           <table className="card--section table table--stretch table--history">
@@ -109,39 +112,40 @@ class UserHistoryPage extends React.PureComponent<Props> {
                   lastViewed={item.lastViewed}
                   selected={!!itemsSelected[item.uri]}
                   onSelect={() => {
-                    this.onSelect(item.uri)
-                  }} />
-                ))}
+                    this.onSelect(item.uri);
+                  }}
+                />
+              ))}
             </tbody>
           </table>
         )}
-          {pageCount > 1 && (
-            <FormRow verticallyCentered centered>
-              <ReactPaginate
-                pageCount={pageCount}
-                pageRangeDisplayed={2}
-                previousLabel="‹"
-                nextLabel="›"
-                activeClassName="pagination__item--selected"
-                pageClassName="pagination__item"
-                previousClassName="pagination__item pagination__item--previous"
-                nextClassName="pagination__item pagination__item--next"
-                breakClassName="pagination__item pagination__item--break"
-                marginPagesDisplayed={2}
-                onPageChange={e => this.changePage(e.selected)}
-                forcePage={page}
-                initialPage={page}
-                containerClassName="pagination"
-              />
+        {pageCount > 1 && (
+          <FormRow verticallyCentered centered>
+            <ReactPaginate
+              pageCount={pageCount}
+              pageRangeDisplayed={2}
+              previousLabel="‹"
+              nextLabel="›"
+              activeClassName="pagination__item--selected"
+              pageClassName="pagination__item"
+              previousClassName="pagination__item pagination__item--previous"
+              nextClassName="pagination__item pagination__item--next"
+              breakClassName="pagination__item pagination__item--break"
+              marginPagesDisplayed={2}
+              onPageChange={e => this.changePage(e.selected)}
+              forcePage={page}
+              initialPage={page}
+              containerClassName="pagination"
+            />
 
-              <FormField
-                className="paginate-channel"
-                onKeyUp={e => this.paginate(e)}
-                prefix={__('Go to page:')}
-                type="text"
-              />
-            </FormRow>
-          )}
+            <FormField
+              className="paginate-channel"
+              onKeyUp={e => this.paginate(e)}
+              prefix={__('Go to page:')}
+              type="text"
+            />
+          </FormRow>
+        )}
       </React.Fragment>
     );
   }
diff --git a/src/renderer/component/userHistoryItem/index.js b/src/renderer/component/userHistoryItem/index.js
index 57e515d1d..a2a00ac58 100644
--- a/src/renderer/component/userHistoryItem/index.js
+++ b/src/renderer/component/userHistoryItem/index.js
@@ -1,9 +1,16 @@
 import { connect } from 'react-redux';
-import { doResolveUri } from 'lbry-redux';
+import { doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
 import UserHistoryItem from './view';
 
-const perform = (dispatch) => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-})
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+});
 
-export default connect(null, perform)(UserHistoryItem);
\ No newline at end of file
+const perform = dispatch => ({
+  resolveUri: uri => dispatch(doResolveUri(uri)),
+});
+
+export default connect(
+  select,
+  perform
+)(UserHistoryItem);
diff --git a/src/renderer/component/userHistoryItem/view.jsx b/src/renderer/component/userHistoryItem/view.jsx
index 6c95fc6ed..7b84b603f 100644
--- a/src/renderer/component/userHistoryItem/view.jsx
+++ b/src/renderer/component/userHistoryItem/view.jsx
@@ -4,50 +4,59 @@ 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: ?{},
 };
 
 class UserHistoryItem extends React.PureComponent<Props> {
   componentDidMount() {
     const { claim, uri, resolveUri } = this.props;
-    
+
     if (!claim) {
-      console.log("fetch claim")
-      resolveUri(uri)
+      resolveUri(uri);
     }
   }
 
   render() {
     const { lastViewed, selected, onSelect, claim } = this.props;
-    
+
     let name;
+    let title;
+    let uri;
     if (claim) {
       ({ name } = claim);
+      ({ title } = claim.value.stream.metadata);
+      uri = claim.permanent_url;
     }
 
     return (
-        <tr className={classnames({
-              "history__selected": selected
-            })}>
-          <td>
-            <FormField
-              checked={selected}
-              type="checkbox"
-              onClick={onSelect}
-              />
-          </td>
-          <td>
-            {moment(lastViewed).from(moment())}
-          </td>
-          <td>
-            {name}
-          </td>
+      <tr
+        onClick={onSelect}
+        className={classnames({
+          history__selected: selected,
+        })}
+      >
+        <td>
+          <input checked={selected} type="checkbox" onClick={onSelect} />
+        </td>
+        <td>{moment(lastViewed).from(moment())}</td>
+        <td>
+          <Button
+            tourniquet
+            button="link"
+            label={`lbry://${name}`}
+            navigate="/show"
+            navigateParams={{ uri }}
+          />
+        </td>
+        <td>{title}</td>
       </tr>
     );
   }
 }
+
 export default UserHistoryItem;
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index f0f579fbe..abfa9180a 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -85,11 +85,11 @@ class FilePage extends React.Component<Props> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    const { fetchFileInfo, uri } = this.props;
+    const { fetchFileInfo, uri, setViewed } = this.props;
     if (nextProps.fileInfo === undefined) {
       fetchFileInfo(uri);
     }
-    
+
     if (uri !== nextProps.uri) {
       setViewed(nextProps.uri);
     }
diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss
index 8fde5832b..d794987de 100644
--- a/src/renderer/scss/component/_table.scss
+++ b/src/renderer/scss/component/_table.scss
@@ -109,28 +109,46 @@ table.table--transactions {
 }
 
 table.table--history {
-  margin-top: 0;
-  
+  margin-top: $spacing-vertical * 1/3;
+
   tbody {
     tr {
       &:nth-child(even),
       &:nth-child(odd) {
         background-color: var(--table-item-even);
-        
+
         &.history__selected {
           color: red;
           background-color: var(--table-item-odd);
         }
       }
     }
-    
+
+    td {
+      cursor: default;
+      padding: $spacing-vertical * 1/3 0;
+    }
+
+    td:nth-of-type(1) {
+      width: 7.5%;
+    }
     td:nth-of-type(2) {
-      /*Tourniquets text over 20VW*/
-      max-width: 20vw;
+      width: 20%;
+    }
+    td:nth-of-type(3) {
+      width: 30%;
+      padding-right: 10px;
+    }
+    td:nth-of-type(4) {
+      width: 42.5%;
+      max-width: 30vw;
+    }
+
+    td:nth-of-type(3),
+    td:nth-of-type(4) {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      color: var(--color-help);
     }
   }
 }