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">
-          <Button
+          {!!Object.keys(itemsSelected).length ? (
-            button="link"
+            <Button button="link" label={__('Delete')} onClick={this.removeSelected} />
-            label={allSelected ? __("Cancel") : __("Select All")}
+          ) : (
-            onClick={selectHandler} />
+            <span />
-          {!!Object.keys(itemsSelected).length && (
-            <Button
-              button="link"
-              label={__("Delete")}
-              onClick={this.removeSelected} />
           )}
+
+          <Button
+            button="link"
+            label={allSelected ? __('Cancel') : __('Select All')}
+            onClick={selectHandler}
+          />
         </div>
         {!!history.length && (
           <table className="card--section table table--stretch table--history">
@@ -109,8 +112,9 @@ class UserHistoryPage extends React.PureComponent<Props> {
                   lastViewed={item.lastViewed}
                   selected={!!itemsSelected[item.uri]}
                   onSelect={() => {
-                    this.onSelect(item.uri)
+                    this.onSelect(item.uri);
-                  }} />
+                  }}
+                />
               ))}
             </tbody>
           </table>

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
-            })}>
-          <td>
-            <FormField
-              checked={selected}
-              type="checkbox"
         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>
+        <td>{title}</td>
-            {moment(lastViewed).from(moment())}
-          </td>
-          <td>
-            {name}
-          </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);
     }
   }
 }