src/renderer/component/router/view.jsx

@@ -18,6 +18,7 @@ import InvitePage from 'page/invite';
 import BackupPage from 'page/backup';
 import SubscriptionsPage from 'page/subscriptions';
 import SearchPage from 'page/search';
+import UserHistoryPage from 'page/userHistory';
 
 const route = (props, page, routesMap) => {
   const component = routesMap[page];
@@ -53,6 +54,7 @@ const Router = props => {
     wallet: <WalletPage params={params} />,
     subscriptions: <SubscriptionsPage params={params} />,
     search: <SearchPage {...params} />,
+    user_history: <UserHistoryPage {...params} />,
   });
 };
 

src/renderer/page/userHistory/index.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { selectHistoryPageCount, makeSelectHistoryForPage } from 'redux/selectors/content';
+import { doNavigate } from 'redux/actions/navigation';
+import { selectCurrentParams, makeSelectCurrentParam } from 'lbry-redux';
+import UserHistoryPage from './view';
+
+const select = state => {
+  const paramPage = makeSelectCurrentParam('page')(state) || 0;
+  return {
+    pageCount: selectHistoryPageCount(state),
+    page: paramPage,
+    params: selectCurrentParams(state),
+    history: makeSelectHistoryForPage(paramPage)(state),
+  };
+};
+
+const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
+});
+
+export default connect(
+  select,
+  perform
+)(UserHistoryPage);

src/renderer/page/userHistory/view.jsx

@@ -0,0 +1,91 @@
+// @flow
+import React from 'react';
+import FileCard from 'component/fileCard';
+import Page from 'component/page';
+import Button from 'component/button';
+import { FormField, FormRow } from 'component/common/form';
+import ReactPaginate from 'react-paginate';
+
+type HistoryItem = {
+  uri: string,
+  lastViewed: number,
+};
+
+type Props = {
+  history: Array<HistoryItem>,
+  page: number,
+  pageCount: number,
+  navigate: string => void,
+  params: { page: number },
+};
+
+class UserHistoryPage extends React.PureComponent<Props> {
+  changePage(pageNumber: number) {
+    const { params } = this.props;
+    const newParams = { ...params, page: pageNumber };
+    this.props.navigate('/user_history', newParams);
+  }
+
+  paginate(e: SyntheticKeyboardEvent<*>) {
+    const pageFromInput = Number(e.currentTarget.value);
+    if (
+      pageFromInput &&
+      e.keyCode === 13 &&
+      !Number.isNaN(pageFromInput) &&
+      pageFromInput > 0 &&
+      pageFromInput <= this.props.pageCount
+    ) {
+      this.changePage(pageFromInput);
+    }
+  }
+
+  render() {
+    const { history, page, pageCount, navigate } = this.props;
+
+    return (
+      <Page>
+        <div className="card__list">
+          {history && history.length ? (
+            <React.Fragment>
+              {history.map(item => <FileCard key={item.uri} uri={item.uri} />)}
+              {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>
+              )}
+            </React.Fragment>
+          ) : (
+            <p className="card__subtitle">
+              {__('You have no saved history. Go')}{' '}
+              <Button button="link" label={__('explore')} onClick={() => navigate('/discover')} />{' '}
+              {__('the content available on LBRY!')}
+            </p>
+          )}
+        </div>
+      </Page>
+    );
+  }
+}
+export default UserHistoryPage;

src/renderer/redux/actions/content.js

@@ -523,8 +523,17 @@ export function doClearContentHistoryUri(uri: string) {
   };
 }
 
-export function doSetContentHistoryAll() {
+export function doClearContentHistoryAll() {
   return dispatch => {
     dispatch({ type: ACTIONS.CLEAR_CONTENT_HISTORY_ALL });
   };
 }
+
+export function doSetHistoryPage(page) {
+  return dispatch => {
+    dispatch({
+      type: ACTIONS.SET_CONTENT_HISTORY_PAGE,
+      data: { page },
+    });
+  };
+}

src/renderer/redux/selectors/content.js

@@ -42,10 +42,15 @@ export const makeSelectContentPositionForUri = uri =>
     return state.positions[id] ? state.positions[id][outpoint] : null;
   });
 
-export const makeSelectHistoryForPage = (page = 1) =>
-  createSelector(selectState, state =>
-    state.history.slice((page - 1) * HISTORY_ITEMS_PER_PAGE, HISTORY_ITEMS_PER_PAGE)
-  );
+export const selectHistoryPageCount = createSelector(selectState, state =>
+  Math.ceil(state.history.length / HISTORY_ITEMS_PER_PAGE)
+);
+
+export const makeSelectHistoryForPage = page =>
+  createSelector(selectState, state => {
+    const left = page * HISTORY_ITEMS_PER_PAGE;
+    return state.history.slice(left, left + HISTORY_ITEMS_PER_PAGE);
+  });
 
 export const makeSelectHistoryForUri = uri =>
   createSelector(selectState, state => state.history.find(i => i.uri === uri));