diff --git a/CHANGELOG.md b/CHANGELOG.md index e06149cfe..4b250ed39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,10 +10,10 @@ 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. * 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 44964b0ba..e70e9767f 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -8,6 +8,8 @@ import { selectPageTitle, selectCurrentPage, selectCurrentParams, + selectHistoryBack, + selectHistoryForward, } from "selectors/app"; import { doSearch } from "actions/search"; import { doFetchDaemonSettings } from "actions/settings"; @@ -31,7 +33,11 @@ export function doNavigate(path, params = {}, options = {}) { const state = getState(); const pageTitle = selectPageTitle(state); - dispatch(doHistoryPush({ params }, pageTitle, url)); + const historyState = history.state; + + dispatch( + doHistoryPush({ params, page: historyState.page + 1 }, pageTitle, url) + ); }; } @@ -77,10 +83,35 @@ export function doChangePath(path, options = {}) { export function doHistoryBack() { return function(dispatch, getState) { - if (!history.state) return; - if (history.state.index === 0) return; + // Get back history from stack + const back = selectHistoryBack(getState()); - history.back(); + if (back) { + // Set location + dispatch(doChangePath(back.location)); + + dispatch({ + type: types.HISTORY_NAVIGATE, + data: { page: back }, + }); + } + }; +} + +export function doHistoryForward() { + return function(dispatch, getState) { + // 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 }, + }); + } }; } @@ -88,6 +119,12 @@ export function doHistoryPush(currentState, title, relativeUrl) { return function(dispatch, getState) { title += " - LBRY"; history.pushState(currentState, title, `#${relativeUrl}`); + dispatch({ + type: types.HISTORY_NAVIGATE, + data: { + location: relativeUrl, + }, + }); }; } @@ -266,10 +303,22 @@ 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}`); + + // Get first page + const page = { + index: 0, + location: path.replace(/^#/, ""), + }; + + history.replaceState( + { params, is_first_page: true, page: 1 }, + document.title, + `${path}` + ); dispatch(doAuthenticate()); dispatch({ type: types.DAEMON_READY, + data: { page }, }); dispatch(doFetchDaemonSettings()); dispatch(doFileList()); diff --git a/ui/js/component/header/index.js b/ui/js/component/header/index.js index eda8923d3..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 } from "actions/app"; +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"), }); @@ -13,6 +16,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..81b70d703 100644 --- a/ui/js/component/header/view.jsx +++ b/ui/js/component/header/view.jsx @@ -3,12 +3,34 @@ import Link from "component/link"; import WunderBar from "component/wunderbar"; export const Header = props => { - const { balance, back, navigate, publish } = props; - + const { + balance, + back, + forward, + isBackDisabled, + isForwardDisabled, + navigate, + publish, + } = props; return (