src/renderer/component/userHistory/view.jsx

@@ -26,7 +26,7 @@ class UserHistoryPage extends React.PureComponent<Props> {
 
     this.state = {
       itemsSelected: {},
-    }
+    };
 
     this.selectAll = this.selectAll.bind(this);
     this.unselectAll = this.unselectAll.bind(this);
@@ -53,23 +53,22 @@ class UserHistoryPage extends React.PureComponent<Props> {
   }
 
   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() {
@@ -77,6 +76,9 @@ class UserHistoryPage extends React.PureComponent<Props> {
     const { itemsSelected } = this.state;
 
     Object.keys(itemsSelected).forEach(uri => clearHistoryUri(uri));
+    this.setState({
+      itemsSelected: {},
+    });
   }
 
   render() {
@@ -87,17 +89,18 @@ class UserHistoryPage extends React.PureComponent<Props> {
     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")}
+            label={allSelected ? __('Cancel') : __('Select All')}
-            onClick={selectHandler} />
+            onClick={selectHandler}
-          {!!Object.keys(itemsSelected).length && (
+          />
-            <Button
-              button="link"
-              label={__("Delete")}
-              onClick={this.removeSelected} />
-          )}
         </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 && (
+        {pageCount > 1 && (
-            <FormRow verticallyCentered centered>
+          <FormRow verticallyCentered centered>
-              <ReactPaginate
+            <ReactPaginate
-                pageCount={pageCount}
+              pageCount={pageCount}
-                pageRangeDisplayed={2}
+              pageRangeDisplayed={2}
-                previousLabel="‹"
+              previousLabel="‹"
-                nextLabel="›"
+              nextLabel="›"
-                activeClassName="pagination__item--selected"
+              activeClassName="pagination__item--selected"
-                pageClassName="pagination__item"
+              pageClassName="pagination__item"
-                previousClassName="pagination__item pagination__item--previous"
+              previousClassName="pagination__item pagination__item--previous"
-                nextClassName="pagination__item pagination__item--next"
+              nextClassName="pagination__item pagination__item--next"
-                breakClassName="pagination__item pagination__item--break"
+              breakClassName="pagination__item pagination__item--break"
-                marginPagesDisplayed={2}
+              marginPagesDisplayed={2}
-                onPageChange={e => this.changePage(e.selected)}
+              onPageChange={e => this.changePage(e.selected)}
-                forcePage={page}
+              forcePage={page}
-                initialPage={page}
+              initialPage={page}
-                containerClassName="pagination"
+              containerClassName="pagination"
-              />
+            />
 
-              <FormField
+            <FormField
-                className="paginate-channel"
+              className="paginate-channel"
-                onKeyUp={e => this.paginate(e)}
+              onKeyUp={e => this.paginate(e)}
-                prefix={__('Go to page:')}
+              prefix={__('Go to page:')}
-                type="text"
+              type="text"
-              />
+            />
-            </FormRow>
+          </FormRow>
-          )}
+        )}
       </React.Fragment>
     );
   }

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) => ({
+const select = (state, props) => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
+  claim: makeSelectClaimForUri(props.uri)(state),
-})
+});
 
-export default connect(null, perform)(UserHistoryItem);
+const perform = dispatch => ({
+  resolveUri: uri => dispatch(doResolveUri(uri)),
+});
+
+export default connect(
+  select,
+  perform
+)(UserHistoryItem);

src/renderer/component/userHistoryItem/view.jsx

@@ -4,11 +4,12 @@ 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> {
@@ -16,8 +17,7 @@ class UserHistoryItem extends React.PureComponent<Props> {
     const { claim, uri, resolveUri } = this.props;
 
     if (!claim) {
-      console.log("fetch claim")
+      resolveUri(uri);
-      resolveUri(uri)
     }
   }
 
@@ -25,29 +25,38 @@ class UserHistoryItem extends React.PureComponent<Props> {
     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({
+      <tr
-              "history__selected": selected
+        onClick={onSelect}
-            })}>
+        className={classnames({
-          <td>
+          history__selected: selected,
-            <FormField
+        })}
-              checked={selected}
+      >
-              type="checkbox"
+        <td>
-              onClick={onSelect}
+          <input checked={selected} type="checkbox" onClick={onSelect} />
-              />
+        </td>
-          </td>
+        <td>{moment(lastViewed).from(moment())}</td>
-          <td>
+        <td>
-            {moment(lastViewed).from(moment())}
+          <Button
-          </td>
+            tourniquet
-          <td>
+            button="link"
-            {name}
+            label={`lbry://${name}`}
-          </td>
+            navigate="/show"
+            navigateParams={{ uri }}
+          />
+        </td>
+        <td>{title}</td>
       </tr>
     );
   }
 }
+
 export default UserHistoryItem;

src/renderer/page/file/view.jsx

@@ -85,7 +85,7 @@ 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);
     }

src/renderer/scss/component/_table.scss

@@ -109,7 +109,7 @@ table.table--transactions {
 }
 
 table.table--history {
-  margin-top: 0;
+  margin-top: $spacing-vertical * 1/3;
 
   tbody {
     tr {
@@ -124,13 +124,31 @@ table.table--history {
       }
     }
 
+    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*/
+      width: 20%;
-      max-width: 20vw;
+    }
+    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);
     }
   }
 }