attempt to disable back/forward buttons

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

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,

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"),
 });

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")}

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";

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);

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
+);