From 86b4f8e82c51d641d55c8711a4ad883d58835ace Mon Sep 17 00:00:00 2001
From: Baltazar Gomez <btzr.io@gmail.com>
Date: Mon, 7 Aug 2017 22:10:42 -0600
Subject: [PATCH 1/5] add forward button

add forward history

diseable conditionals

fix last  commit

update CHANGELOG.md
---
 CHANGELOG.md                    |  3 ++-
 ui/js/actions/app.js            |  8 ++++++++
 ui/js/component/header/index.js |  3 ++-
 ui/js/component/header/view.jsx | 17 +++++++++++++++--
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e06149cfe..5bdc2e57b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,9 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ### Added
   * Added a new component, `FormFieldPrice` which is now used in Publish and Settings
   * Added wallet backup guide reference
+  * Added feature: forward history
   *
-
+  
 ### Changed
   * Updated to daemon [0.15](https://github.com/lbryio/lbry/releases). Most relevant changes for app are improved announcing of content and a fix for the daemon getting stuck running.
   * Some form field refactoring as we progress towards form sanity.
diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js
index 44964b0ba..4c5c31ded 100644
--- a/ui/js/actions/app.js
+++ b/ui/js/actions/app.js
@@ -84,6 +84,14 @@ export function doHistoryBack() {
   };
 }
 
+export function doHistoryForward() {
+  return function(dispatch, getState) {
+    if (!history.state) return;
+
+    history.forward();
+  };
+}
+
 export function doHistoryPush(currentState, title, relativeUrl) {
   return function(dispatch, getState) {
     title += " - LBRY";
diff --git a/ui/js/component/header/index.js b/ui/js/component/header/index.js
index eda8923d3..cd5242512 100644
--- a/ui/js/component/header/index.js
+++ b/ui/js/component/header/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { formatCredits } from "utils";
 import { connect } from "react-redux";
 import { selectBalance } from "selectors/wallet";
-import { doNavigate, doHistoryBack } from "actions/app";
+import { doNavigate, doHistoryBack, doHistoryForward } from "actions/app";
 import Header from "./view";
 
 const select = state => ({
@@ -13,6 +13,7 @@ const select = state => ({
 const perform = dispatch => ({
   navigate: path => dispatch(doNavigate(path)),
   back: () => dispatch(doHistoryBack()),
+  forward: () => dispatch(doHistoryForward()),
 });
 
 export default connect(select, perform)(Header);
diff --git a/ui/js/component/header/view.jsx b/ui/js/component/header/view.jsx
index 76758b210..ec1e6ff98 100644
--- a/ui/js/component/header/view.jsx
+++ b/ui/js/component/header/view.jsx
@@ -3,12 +3,25 @@ import Link from "component/link";
 import WunderBar from "component/wunderbar";
 
 export const Header = props => {
-  const { balance, back, navigate, publish } = props;
+  const { balance, back, forward, navigate, publish } = props;
 
   return (
     <header id="header">
       <div className="header__item">
-        <Link onClick={back} button="alt button--flat" icon="icon-arrow-left" title={__("Back")} />
+        <Link
+          onClick={back}
+          button="alt button--flat"
+          icon="icon-arrow-left"
+          title={__("Back")}
+        />
+      </div>
+      <div className="header__item">
+        <Link
+          onClick={forward}
+          button="alt button--flat"
+          icon="icon-arrow-right"
+          title={__("Forward")}
+        />
       </div>
       <div className="header__item">
         <Link

From 22fbf13715c3ebf1959147b29a1c5794190e5e81 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Tue, 15 Aug 2017 19:29:55 -0400
Subject: [PATCH 2/5] attempt to disable back/forward buttons

---
 CHANGELOG.md                    |  1 -
 ui/js/actions/app.js            | 26 +++++++++++++++++---------
 ui/js/component/header/index.js |  3 +++
 ui/js/component/header/view.jsx | 14 ++++++++++++--
 ui/js/constants/action_types.js |  5 ++---
 ui/js/reducers/app.js           | 11 ++++++++++-
 ui/js/selectors/app.js          | 10 ++++++++++
 7 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5bdc2e57b..4b250ed39 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,6 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
   
 ### Changed
-  * Updated to daemon [0.15](https://github.com/lbryio/lbry/releases). Most relevant changes for app are improved announcing of content and a fix for the daemon getting stuck running.
   * Some form field refactoring as we progress towards form sanity.
   * When an "Open" button is clicked on a show page, if the file fails to open, the app will try to open the file's folder.
   * Removed confusing placeholder text from email input
diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js
index 4c5c31ded..0f086392c 100644
--- a/ui/js/actions/app.js
+++ b/ui/js/actions/app.js
@@ -1,6 +1,8 @@
 import * as types from "constants/action_types";
 import lbry from "lbry";
 import {
+  selectIsBackDisabled,
+  selectIsForwardDisabled,
   selectUpdateUrl,
   selectUpgradeDownloadPath,
   selectUpgradeDownloadItem,
@@ -31,7 +33,7 @@ export function doNavigate(path, params = {}, options = {}) {
 
     const state = getState();
     const pageTitle = selectPageTitle(state);
-    dispatch(doHistoryPush({ params }, pageTitle, url));
+    dispatch(doHistoryPush({ params, is_last_page: true }, pageTitle, url));
   };
 }
 
@@ -77,18 +79,19 @@ export function doChangePath(path, options = {}) {
 
 export function doHistoryBack() {
   return function(dispatch, getState) {
-    if (!history.state) return;
-    if (history.state.index === 0) return;
-
-    history.back();
+    if (!selectIsBackDisabled(getState())) {
+      history.back();
+      dispatch({ type: types.HISTORY_NAVIGATE });
+    }
   };
 }
 
 export function doHistoryForward() {
   return function(dispatch, getState) {
-    if (!history.state) return;
-
-    history.forward();
+    if (!selectIsForwardDisabled(getState())) {
+      history.forward();
+      dispatch({ type: types.HISTORY_NAVIGATE });
+    }
   };
 }
 
@@ -96,6 +99,7 @@ export function doHistoryPush(currentState, title, relativeUrl) {
   return function(dispatch, getState) {
     title += " - LBRY";
     history.pushState(currentState, title, `#${relativeUrl}`);
+    dispatch({ type: types.HISTORY_NAVIGATE });
   };
 }
 
@@ -274,7 +278,11 @@ export function doDaemonReady() {
   return function(dispatch, getState) {
     const path = window.location.hash || "#/discover";
     const params = parseQueryParams(path.split("?")[1] || "");
-    history.replaceState({ params, index: 0 }, document.title, `${path}`);
+    history.replaceState(
+      { params, is_first_page: true },
+      document.title,
+      `${path}`
+    );
     dispatch(doAuthenticate());
     dispatch({
       type: types.DAEMON_READY,
diff --git a/ui/js/component/header/index.js b/ui/js/component/header/index.js
index cd5242512..8c8c1f96a 100644
--- a/ui/js/component/header/index.js
+++ b/ui/js/component/header/index.js
@@ -1,11 +1,14 @@
 import React from "react";
 import { formatCredits } from "utils";
 import { connect } from "react-redux";
+import { selectIsBackDisabled, selectIsForwardDisabled } from "selectors/app";
 import { selectBalance } from "selectors/wallet";
 import { doNavigate, doHistoryBack, doHistoryForward } from "actions/app";
 import Header from "./view";
 
 const select = state => ({
+  isBackDisabled: selectIsBackDisabled(state),
+  isForwardDisabled: selectIsForwardDisabled(state),
   balance: formatCredits(selectBalance(state), 1),
   publish: __("Publish"),
 });
diff --git a/ui/js/component/header/view.jsx b/ui/js/component/header/view.jsx
index ec1e6ff98..8fdbc4a65 100644
--- a/ui/js/component/header/view.jsx
+++ b/ui/js/component/header/view.jsx
@@ -3,13 +3,22 @@ import Link from "component/link";
 import WunderBar from "component/wunderbar";
 
 export const Header = props => {
-  const { balance, back, forward, navigate, publish } = props;
-
+  const {
+    balance,
+    back,
+    forward,
+    isBackDisabled,
+    isForwardDisabled,
+    navigate,
+    publish,
+  } = props;
+  console.log(props);
   return (
     <header id="header">
       <div className="header__item">
         <Link
           onClick={back}
+          disabled={isBackDisabled}
           button="alt button--flat"
           icon="icon-arrow-left"
           title={__("Back")}
@@ -18,6 +27,7 @@ export const Header = props => {
       <div className="header__item">
         <Link
           onClick={forward}
+          disabled={isForwardDisabled}
           button="alt button--flat"
           icon="icon-arrow-right"
           title={__("Forward")}
diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js
index 71d6d8072..78d12d2cf 100644
--- a/ui/js/constants/action_types.js
+++ b/ui/js/constants/action_types.js
@@ -1,7 +1,7 @@
 export const CHANGE_PATH = "CHANGE_PATH";
 export const OPEN_MODAL = "OPEN_MODAL";
 export const CLOSE_MODAL = "CLOSE_MODAL";
-export const HISTORY_BACK = "HISTORY_BACK";
+export const HISTORY_NAVIGATE = "HISTORY_NAVIGATE";
 export const SHOW_SNACKBAR = "SHOW_SNACKBAR";
 export const REMOVE_SNACKBAR_SNACK = "REMOVE_SNACKBAR_SNACK";
 export const WINDOW_FOCUSED = "WINDOW_FOCUSED";
@@ -112,5 +112,4 @@ export const CLAIM_REWARD_STARTED = "CLAIM_REWARD_STARTED";
 export const CLAIM_REWARD_SUCCESS = "CLAIM_REWARD_SUCCESS";
 export const CLAIM_REWARD_FAILURE = "CLAIM_REWARD_FAILURE";
 export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR";
-export const FETCH_REWARD_CONTENT_COMPLETED =
-  "FETCH_REWARD_CONTENT_COMPLETED";
+export const FETCH_REWARD_CONTENT_COMPLETED = "FETCH_REWARD_CONTENT_COMPLETED";
diff --git a/ui/js/reducers/app.js b/ui/js/reducers/app.js
index 497915e89..ef5a866cc 100644
--- a/ui/js/reducers/app.js
+++ b/ui/js/reducers/app.js
@@ -1,6 +1,5 @@
 import * as types from "constants/action_types";
 import * as modalTypes from "constants/modal_types";
-import lbry from "lbry";
 
 const currentPath = () => {
   const hash = document.location.hash;
@@ -15,6 +14,8 @@ const win = remote.BrowserWindow.getFocusedWindow();
 const reducers = {};
 const defaultState = {
   isLoaded: false,
+  isBackDisabled: true,
+  isForwardDisabled: true,
   currentPath: currentPath(),
   pathAfterAuth: "/discover",
   platform: process.platform,
@@ -47,6 +48,7 @@ reducers[types.DAEMON_VERSION_MISMATCH] = function(state, action) {
 reducers[types.CHANGE_PATH] = function(state, action) {
   return Object.assign({}, state, {
     currentPath: action.data.path,
+    isForwardDisabled: !action.data.isBack,
   });
 };
 
@@ -163,6 +165,13 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) {
   });
 };
 
+reducers[types.HISTORY_NAVIGATE] = (state, action) => {
+  return Object.assign({}, state, {
+    isBackDisabled: !history.state || history.state.is_first_page === true,
+    isForwardDisabled: !history.state,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index c605f20fd..552908874 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -216,3 +216,13 @@ export const selectPathAfterAuth = createSelector(
   _selectState,
   state => state.pathAfterAuth
 );
+
+export const selectIsBackDisabled = createSelector(
+  _selectState,
+  state => state.isBackDisabled
+);
+
+export const selectIsForwardDisabled = createSelector(
+  _selectState,
+  state => state.isForwardDisabled
+);

From 5df497182e06cd2e9c6f1b07b54831dafdf4e685 Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Wed, 16 Aug 2017 18:58:18 +0700
Subject: [PATCH 3/5] Working on history fix

---
 ui/js/actions/app.js            | 15 +++++++++------
 ui/js/component/header/view.jsx |  1 -
 ui/js/reducers/app.js           |  8 +++++---
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js
index 0f086392c..a96a9d96c 100644
--- a/ui/js/actions/app.js
+++ b/ui/js/actions/app.js
@@ -33,7 +33,10 @@ export function doNavigate(path, params = {}, options = {}) {
 
     const state = getState();
     const pageTitle = selectPageTitle(state);
-    dispatch(doHistoryPush({ params, is_last_page: true }, pageTitle, url));
+    const historyState = history.state;
+    dispatch(
+      doHistoryPush({ params, page: historyState.page + 1 }, pageTitle, url)
+    );
   };
 }
 
@@ -88,10 +91,10 @@ export function doHistoryBack() {
 
 export function doHistoryForward() {
   return function(dispatch, getState) {
-    if (!selectIsForwardDisabled(getState())) {
-      history.forward();
-      dispatch({ type: types.HISTORY_NAVIGATE });
-    }
+    // if (!selectIsForwardDisabled(getState())) {
+    history.forward();
+    dispatch({ type: types.HISTORY_NAVIGATE });
+    // }
   };
 }
 
@@ -279,7 +282,7 @@ export function doDaemonReady() {
     const path = window.location.hash || "#/discover";
     const params = parseQueryParams(path.split("?")[1] || "");
     history.replaceState(
-      { params, is_first_page: true },
+      { params, is_first_page: true, page: 1 },
       document.title,
       `${path}`
     );
diff --git a/ui/js/component/header/view.jsx b/ui/js/component/header/view.jsx
index 8fdbc4a65..81b70d703 100644
--- a/ui/js/component/header/view.jsx
+++ b/ui/js/component/header/view.jsx
@@ -12,7 +12,6 @@ export const Header = props => {
     navigate,
     publish,
   } = props;
-  console.log(props);
   return (
     <header id="header">
       <div className="header__item">
diff --git a/ui/js/reducers/app.js b/ui/js/reducers/app.js
index ef5a866cc..bca90028c 100644
--- a/ui/js/reducers/app.js
+++ b/ui/js/reducers/app.js
@@ -48,7 +48,6 @@ reducers[types.DAEMON_VERSION_MISMATCH] = function(state, action) {
 reducers[types.CHANGE_PATH] = function(state, action) {
   return Object.assign({}, state, {
     currentPath: action.data.path,
-    isForwardDisabled: !action.data.isBack,
   });
 };
 
@@ -166,9 +165,12 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) {
 };
 
 reducers[types.HISTORY_NAVIGATE] = (state, action) => {
+  console.log(history.state);
+  console.log(history.length);
+  console.log(history.state.page === history.length);
   return Object.assign({}, state, {
-    isBackDisabled: !history.state || history.state.is_first_page === true,
-    isForwardDisabled: !history.state,
+    isBackDisabled: history.state.page === 1,
+    isForwardDisabled: history.state.page > history.length,
   });
 };
 

From 9d02df54468ba969166603711625351de5750ff3 Mon Sep 17 00:00:00 2001
From: Baltazar Gomez <btzr.io@gmail.com>
Date: Wed, 16 Aug 2017 15:24:04 -0600
Subject: [PATCH 4/5] prevent duplicated history / get history length

implement custom history

fix history back / forward actions

fix react error

fix back / forward actions -> use doChangePath

revert history state

return page index / location from history stack

implement custom history -> react/redux style

remove util/createHistory.js

 tidy up / simplify

fix comments
---
 ui/js/actions/app.js   | 50 ++++++++++++++++++++++++++++++--------
 ui/js/reducers/app.js  | 55 ++++++++++++++++++++++++++++++++++++++----
 ui/js/selectors/app.js | 22 +++++++++++++++++
 3 files changed, 112 insertions(+), 15 deletions(-)

diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js
index a96a9d96c..e70e9767f 100644
--- a/ui/js/actions/app.js
+++ b/ui/js/actions/app.js
@@ -1,8 +1,6 @@
 import * as types from "constants/action_types";
 import lbry from "lbry";
 import {
-  selectIsBackDisabled,
-  selectIsForwardDisabled,
   selectUpdateUrl,
   selectUpgradeDownloadPath,
   selectUpgradeDownloadItem,
@@ -10,6 +8,8 @@ import {
   selectPageTitle,
   selectCurrentPage,
   selectCurrentParams,
+  selectHistoryBack,
+  selectHistoryForward,
 } from "selectors/app";
 import { doSearch } from "actions/search";
 import { doFetchDaemonSettings } from "actions/settings";
@@ -34,6 +34,7 @@ export function doNavigate(path, params = {}, options = {}) {
     const state = getState();
     const pageTitle = selectPageTitle(state);
     const historyState = history.state;
+
     dispatch(
       doHistoryPush({ params, page: historyState.page + 1 }, pageTitle, url)
     );
@@ -82,19 +83,35 @@ export function doChangePath(path, options = {}) {
 
 export function doHistoryBack() {
   return function(dispatch, getState) {
-    if (!selectIsBackDisabled(getState())) {
-      history.back();
-      dispatch({ type: types.HISTORY_NAVIGATE });
+    // Get back history from stack
+    const back = selectHistoryBack(getState());
+
+    if (back) {
+      // Set location
+      dispatch(doChangePath(back.location));
+
+      dispatch({
+        type: types.HISTORY_NAVIGATE,
+        data: { page: back },
+      });
     }
   };
 }
 
 export function doHistoryForward() {
   return function(dispatch, getState) {
-    // if (!selectIsForwardDisabled(getState())) {
-    history.forward();
-    dispatch({ type: types.HISTORY_NAVIGATE });
-    // }
+    // Get forward history from stack
+    const forward = selectHistoryForward(getState());
+
+    if (forward) {
+      // Set location
+      dispatch(doChangePath(forward.location));
+
+      dispatch({
+        type: types.HISTORY_NAVIGATE,
+        data: { page: forward },
+      });
+    }
   };
 }
 
@@ -102,7 +119,12 @@ export function doHistoryPush(currentState, title, relativeUrl) {
   return function(dispatch, getState) {
     title += " - LBRY";
     history.pushState(currentState, title, `#${relativeUrl}`);
-    dispatch({ type: types.HISTORY_NAVIGATE });
+    dispatch({
+      type: types.HISTORY_NAVIGATE,
+      data: {
+        location: relativeUrl,
+      },
+    });
   };
 }
 
@@ -281,6 +303,13 @@ export function doDaemonReady() {
   return function(dispatch, getState) {
     const path = window.location.hash || "#/discover";
     const params = parseQueryParams(path.split("?")[1] || "");
+
+    // Get first page
+    const page = {
+      index: 0,
+      location: path.replace(/^#/, ""),
+    };
+
     history.replaceState(
       { params, is_first_page: true, page: 1 },
       document.title,
@@ -289,6 +318,7 @@ export function doDaemonReady() {
     dispatch(doAuthenticate());
     dispatch({
       type: types.DAEMON_READY,
+      data: { page },
     });
     dispatch(doFetchDaemonSettings());
     dispatch(doFileList());
diff --git a/ui/js/reducers/app.js b/ui/js/reducers/app.js
index bca90028c..d9e529d0f 100644
--- a/ui/js/reducers/app.js
+++ b/ui/js/reducers/app.js
@@ -24,11 +24,17 @@ const defaultState = {
   daemonReady: false,
   hasSignature: false,
   badgeNumber: 0,
+  history: { index: 0, stack: [] },
 };
 
 reducers[types.DAEMON_READY] = function(state, action) {
+  const { history } = state;
+  const { page } = action.data;
+  history.stack.push(page);
+
   return Object.assign({}, state, {
     daemonReady: true,
+    history,
   });
 };
 
@@ -165,12 +171,51 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) {
 };
 
 reducers[types.HISTORY_NAVIGATE] = (state, action) => {
-  console.log(history.state);
-  console.log(history.length);
-  console.log(history.state.page === history.length);
+  let page = false;
+  let location = false;
+
+  // Get history from state
+  const { history } = state;
+
+  if (action.data.page) {
+    // Get page
+    page = action.data.page;
+  } else if (action.data.location) {
+    // Get new location
+    location = action.data.location;
+  }
+
+  // Add new location to stack
+  if (location) {
+    const lastItem = history.stack.length - 1;
+
+    // Check for duplicated
+    let is_duplicate = lastItem > -1
+      ? history.stack[lastItem].location === location
+      : false;
+
+    if (!is_duplicate) {
+      // Create new page
+      page = {
+        index: history.stack.length,
+        location,
+      };
+
+      // Update index
+      history.index = history.stack.length;
+
+      // Add to stack
+      history.stack.push(page);
+    }
+  } else if (page) {
+    // Update index
+    history.index = page.index;
+  }
+
   return Object.assign({}, state, {
-    isBackDisabled: history.state.page === 1,
-    isForwardDisabled: history.state.page > history.length,
+    history,
+    isBackDisabled: history.index === 0, // First page
+    isForwardDisabled: history.index === history.stack.length - 1, // Last page
   });
 };
 
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index 552908874..80e66466d 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -226,3 +226,25 @@ export const selectIsForwardDisabled = createSelector(
   _selectState,
   state => state.isForwardDisabled
 );
+
+export const selectHistoryBack = createSelector(_selectState, state => {
+  const { history } = state;
+  const index = history.index - 1;
+
+  // Check if page exists
+  if (index > -1) {
+    // Get back history
+    return history.stack[index];
+  }
+});
+
+export const selectHistoryForward = createSelector(_selectState, state => {
+  const { history } = state;
+  const index = history.index + 1;
+
+  // Check if page exists
+  if (index <= history.stack.length) {
+    // Get forward history
+    return history.stack[index];
+  }
+});

From 079eca8790beb8891a9393778c7664fd41240068 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 16 Aug 2017 22:53:37 -0600
Subject: [PATCH 5/5] update disable opacity -> 0.5

---
 ui/scss/_gui.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/scss/_gui.scss b/ui/scss/_gui.scss
index af2e7ebad..b8d9ec040 100644
--- a/ui/scss/_gui.scss
+++ b/ui/scss/_gui.scss
@@ -105,7 +105,7 @@ p
 
 .disabled {
   pointer-events: none;
-  opacity: 0.7;
+  opacity: 0.5;
 }
 
 .truncated-text {