From d2c97d346063d4fc058c7adcb1c105a80bf32086 Mon Sep 17 00:00:00 2001 From: 6ea86b96 <6ea86b96@gmail.com> Date: Sat, 6 May 2017 23:31:47 +0700 Subject: [PATCH] Back button working properly --- ui/js/actions/app.js | 50 ++++++++++++++----------- ui/js/component/fileCardStream/index.js | 2 +- ui/js/component/fileCardStream/view.jsx | 8 ++-- ui/js/component/fileTileStream/index.js | 2 +- ui/js/component/fileTileStream/view.jsx | 12 +++--- ui/js/component/header/view.jsx | 10 ++--- ui/js/component/subHeader/view.jsx | 5 ++- ui/js/main.js | 30 ++++++++++----- ui/js/page/fileListDownloaded/view.jsx | 2 +- ui/js/page/fileListPublished/view.jsx | 2 +- ui/js/page/help/view.jsx | 2 +- ui/js/page/publish/view.jsx | 2 +- ui/js/page/search/view.jsx | 2 +- ui/js/page/showPage/view.jsx | 2 +- ui/js/selectors/app.js | 2 +- 15 files changed, 76 insertions(+), 57 deletions(-) diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index d233166dc..1da8f7021 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -15,27 +15,43 @@ const app = require('electron').remote.app; const {download} = remote.require('electron-dl'); const fs = remote.require('fs'); -export function doNavigate(path) { +const queryStringFromParams = (params) => { + return Object + .keys(params) + .map(key => `${key}=${params[key]}`) + .join('&') +} + +export function doNavigate(path, params) { return function(dispatch, getState) { const state = getState() - const previousPath = selectCurrentPath(state) - const previousTitle = selectPageTitle(state) - history.pushState({}, previousTitle, previousPath); - - dispatch(doChangePath(path)) - const pageTitle = selectPageTitle(state) + let url = path + if (params) + url = `${url}?${queryStringFromParams(params)}` + + history.pushState(params, pageTitle, url) window.document.title = pageTitle + + dispatch(doChangePath(url)) } } export function doChangePath(path) { - return { - type: types.CHANGE_PATH, - data: { - path, - } + return function(dispatch, getState) { + dispatch({ + type: types.CHANGE_PATH, + data: { + path, + } + }) + } +} + +export function doHistoryBack() { + return function(dispatch, getState) { + history.back() } } @@ -57,16 +73,6 @@ export function doCloseModal() { } } -export function doHistoryBack() { - return function(dispatch, getState) { - if (window.history.length > 1) { - window.history.back(); - } else { - dispatch(doNavigate('discover')) - } - } -} - export function doUpdateDownloadProgress(percent) { return { type: types.UPGRADE_DOWNLOAD_PROGRESSED, diff --git a/ui/js/component/fileCardStream/index.js b/ui/js/component/fileCardStream/index.js index 1a183846f..35ef03cc9 100644 --- a/ui/js/component/fileCardStream/index.js +++ b/ui/js/component/fileCardStream/index.js @@ -44,7 +44,7 @@ const makeSelect = () => { } const perform = (dispatch) => ({ - navigate: (path) => dispatch(doNavigate(path)), + navigate: (path, params) => dispatch(doNavigate(path, params)), }) export default connect(makeSelect, perform)(FileCardStream) diff --git a/ui/js/component/fileCardStream/view.jsx b/ui/js/component/fileCardStream/view.jsx index 72284eb79..9e2e14083 100644 --- a/ui/js/component/fileCardStream/view.jsx +++ b/ui/js/component/fileCardStream/view.jsx @@ -67,7 +67,7 @@ class FileCardStream extends React.Component { const isConfirmed = !!metadata; const title = isConfirmed ? metadata.title : uri; const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; - const primaryUrl = 'show=' + uri; + const primaryUrl = '/show?uri=' + uri; let description = "" if (isConfirmed) { description = metadata.description @@ -80,7 +80,7 @@ class FileCardStream extends React.Component { return (
- navigate(primaryUrl)} className="card__link"> + navigate('/show', { uri })} className="card__link">
{title}
@@ -94,12 +94,12 @@ class FileCardStream extends React.Component {
{description}
- + {this.state.showNsfwHelp && this.state.hovered ?

This content is Not Safe For Work. - To view adult content, please change your . + To view adult content, please change your navigate('settings')} label="Settings" />.

: null} diff --git a/ui/js/component/fileTileStream/index.js b/ui/js/component/fileTileStream/index.js index 80807f125..7e49856ef 100644 --- a/ui/js/component/fileTileStream/index.js +++ b/ui/js/component/fileTileStream/index.js @@ -49,7 +49,7 @@ const makeSelect = () => { } const perform = (dispatch) => ({ - navigate: (path) => dispatch(doNavigate(path)) + navigate: (path, params) => dispatch(doNavigate(path, params)) }) export default connect(makeSelect, perform)(FileTileStream) diff --git a/ui/js/component/fileTileStream/view.jsx b/ui/js/component/fileTileStream/view.jsx index 6a80772eb..70738668a 100644 --- a/ui/js/component/fileTileStream/view.jsx +++ b/ui/js/component/fileTileStream/view.jsx @@ -86,26 +86,26 @@ class FileTileStream extends React.Component {
@@ -121,7 +121,7 @@ class FileTileStream extends React.Component { ?

This content is Not Safe For Work. - To view adult content, please change your navigate('settings')} label="Settings" />. + To view adult content, please change your navigate('/settings')} label="Settings" />.

: null} diff --git a/ui/js/component/header/view.jsx b/ui/js/component/header/view.jsx index e5ed26063..68328feb9 100644 --- a/ui/js/component/header/view.jsx +++ b/ui/js/component/header/view.jsx @@ -14,22 +14,22 @@ export const Header = (props) => {
- navigate('discover')} button="alt button--flat" icon="icon-home" /> + navigate('/discover')} button="alt button--flat" icon="icon-home" />
- navigate('wallet')} button="text" icon="icon-bank" label={balance} > + navigate('/wallet')} button="text" icon="icon-bank" label={balance} >
- navigate('publish')} button="primary button--flat" icon="icon-upload" label="Publish" /> + navigate('/publish')} button="primary button--flat" icon="icon-upload" label="Publish" />
- navigate('downloaded')} button="alt button--flat" icon="icon-folder" /> + navigate('/downloaded')} button="alt button--flat" icon="icon-folder" />
- navigate('settings')} button="alt button--flat" icon="icon-gear" /> + navigate('/settings')} button="alt button--flat" icon="icon-gear" />
} diff --git a/ui/js/component/subHeader/view.jsx b/ui/js/component/subHeader/view.jsx index 8daf63867..a2f015d7e 100644 --- a/ui/js/component/subHeader/view.jsx +++ b/ui/js/component/subHeader/view.jsx @@ -1,4 +1,5 @@ import React from 'react' +import Link from 'component/link' const SubHeader = (props) => { const { @@ -12,9 +13,9 @@ const SubHeader = (props) => { for(let link of Object.keys(subLinks)) { links.push( - navigate(link)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }> + navigate(`/${link}`, event)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }> {subLinks[link]} - + ) } diff --git a/ui/js/main.js b/ui/js/main.js index d7ed5f178..a8c01c2fc 100644 --- a/ui/js/main.js +++ b/ui/js/main.js @@ -27,18 +27,29 @@ window.addEventListener('contextmenu', (event) => { event.preventDefault(); }); -window.addEventListener('popstate', (event) => { - let pathname = document.location.pathname - if (pathname.match(/dist/)) - pathname = '/discover' +const parseQueryParams = (queryString) => { + if (queryString === '') return {}; + const parts = queryString + .split('?') + .pop() + .split('&') + .map(function(p) { return p.split('=') }) - app.store.dispatch(doChangePath(pathname)) -}) - -if (window.location.hash != '') { - window.history.pushState({}, "Discover", location.hash.substring(2)); + const params = {}; + parts.forEach(function(arr) { + params[arr[0]] = arr[1]; + }) + return params; } +window.addEventListener('popstate', (event) => { + const pathname = document.location.pathname + const queryString = document.location.search + if (pathname.match(/dist/)) return + + app.store.dispatch(doChangePath(`${pathname}${queryString}`)) +}) + const initialState = app.store.getState(); app.store.subscribe(runTriggers); runTriggers(); @@ -54,6 +65,7 @@ var init = function() { function onDaemonReady() { app.store.dispatch(doDaemonReady()) + window.history.pushState({}, "Discover", '/discover'); ReactDOM.render(
{ lbryio.enabled ? : '' }
, canvas) } diff --git a/ui/js/page/fileListDownloaded/view.jsx b/ui/js/page/fileListDownloaded/view.jsx index 0a0a39b00..7163160ff 100644 --- a/ui/js/page/fileListDownloaded/view.jsx +++ b/ui/js/page/fileListDownloaded/view.jsx @@ -22,7 +22,7 @@ class FileListDownloaded extends React.Component { if (fetching) { content = } else if (!downloadedContent.length) { - content = You haven't downloaded anything from LBRY yet. Go navigate('discover')} label="search for your first download" />! + content = You haven't downloaded anything from LBRY yet. Go navigate('/discover')} label="search for your first download" />! } else { content = } diff --git a/ui/js/page/fileListPublished/view.jsx b/ui/js/page/fileListPublished/view.jsx index fd4470ee1..0306c543c 100644 --- a/ui/js/page/fileListPublished/view.jsx +++ b/ui/js/page/fileListPublished/view.jsx @@ -43,7 +43,7 @@ class FileListPublished extends React.Component { if (fetching) { content = } else if (!publishedContent.length) { - content = You haven't downloaded anything from LBRY yet. Go navigate('discover')} label="search for your first download" />! + content = You haven't downloaded anything from LBRY yet. Go navigate('/discover')} label="search for your first download" />! } else { content = } diff --git a/ui/js/page/help/view.jsx b/ui/js/page/help/view.jsx index a6485b238..c57c4d1f0 100644 --- a/ui/js/page/help/view.jsx +++ b/ui/js/page/help/view.jsx @@ -77,7 +77,7 @@ var HelpPage = React.createClass({

Report a Bug

Did you find something wrong?

-

+

navigate('report')} label="Submit a Bug Report" icon="icon-bug" button="alt" />

Thanks! LBRY is made by its users.
diff --git a/ui/js/page/publish/view.jsx b/ui/js/page/publish/view.jsx index 23d7b8661..7a6e4806f 100644 --- a/ui/js/page/publish/view.jsx +++ b/ui/js/page/publish/view.jsx @@ -147,7 +147,7 @@ var PublishPage = React.createClass({ }); }, handlePublishStartedConfirmed: function() { - this.props.navigate('published') + this.props.navigate('/published') }, handlePublishError: function(error) { this.setState({ diff --git a/ui/js/page/search/view.jsx b/ui/js/page/search/view.jsx index a74db1d0a..7dc5028be 100644 --- a/ui/js/page/search/view.jsx +++ b/ui/js/page/search/view.jsx @@ -18,7 +18,7 @@ const SearchNoResults = (props) => { return
No one has checked anything in for {query} yet. - navigate('publish')} /> + navigate('/publish')} />
; } diff --git a/ui/js/page/showPage/view.jsx b/ui/js/page/showPage/view.jsx index f76a87792..24418b5bf 100644 --- a/ui/js/page/showPage/view.jsx +++ b/ui/js/page/showPage/view.jsx @@ -53,7 +53,7 @@ const ShowPage = (props) => {
{ uriLookupComplete ? -

This location is not yet in use. { ' ' } navigate('publish')} label="Put something here" />.

: +

This location is not yet in use. { ' ' } navigate('/publish')} label="Put something here" />.

: }
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js index c3932a695..50b0a4fba 100644 --- a/ui/js/selectors/app.js +++ b/ui/js/selectors/app.js @@ -22,7 +22,7 @@ export const selectCurrentPage = createSelector( (path, searchActivated) => { if (searchActivated) return 'search' - return path.replace(/^\//, '').split('=')[0] + return path.replace(/^\//, '').split('?')[0] } )