Back button working properly

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,

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)

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 (
       <section className={ 'card card--small card--link ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
         <div className="card__inner">
-          <a href="#" onClick={() => navigate(primaryUrl)} className="card__link">
+          <Link onClick={() => navigate('/show', { uri })} className="card__link">
             <div className="card__title-identity">
               <h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
               <div className="card__subtitle">
@@ -94,12 +94,12 @@ class FileCardStream extends React.Component {
             <div className="card__content card__subtext card__subtext--two-lines">
                 <TruncatedText lines={2}>{description}</TruncatedText>
             </div>
-          </a>
+          </Link>
           {this.state.showNsfwHelp && this.state.hovered
             ? <div className='card-overlay'>
              <p>
                This content is Not Safe For Work.
-               To view adult content, please change your <Link className="button-text" href="?settings" label="Settings" />.
+               To view adult content, please change your <Link className="button-text" onClick={() => navigate('settings')} label="Settings" />.
              </p>
            </div>
             : null}

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)

ui/js/component/fileTileStream/view.jsx

@@ -86,26 +86,26 @@ class FileTileStream extends React.Component {
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
         <div className={"row-fluid card__inner file-tile__row"}>
           <div className="span3 file-tile__thumbnail-container">
-            <a href="#" onClick={() => navigate(`show=${uri}`)}>
+            <Link onClick={() => navigate('/show', { uri })}>
               {metadata && metadata.thumbnail ?
               <Thumbnail key={this.props.uri} className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + this.props.uri} />
               :
               <Thumbnail className="file-tile__thumbnail" alt={'Photo for ' + this.props.uri} />
               }
-              </a>
+            </Link>
           </div>
           <div className="span9">
             <div className="card__title-primary">
               { !this.props.hidePrice
                 ? <FilePrice uri={this.props.uri} />
                 : null}
-              <div className="meta"><a href="#" onClick={() => navigate(`show=${uri}`)}>{uri}</a></div>
+                <div className="meta"><Link onClick={() => navigate('/show', { uri })}>{uri}</Link></div>
               <h3>
-                <a href="#" onClick={() => navigate(`show=${uri}`)} title={title}>
+                <Link onClick={() => navigate('/show', { uri })} title={title}>
                   <TruncatedText lines={1}>
                     {title}
                   </TruncatedText>
-                </a>
+                </Link>
               </h3>
             </div>
             <div className="card__actions">
@@ -121,7 +121,7 @@ class FileTileStream extends React.Component {
           ? <div className='card-overlay'>
            <p>
              This content is Not Safe For Work.
-             To view adult content, please change your <Link className="button-text" href="#" onClick={() => navigate('settings')} label="Settings" />.
+             To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
            </p>
          </div>
           : null}

ui/js/component/header/view.jsx

@@ -14,22 +14,22 @@ export const Header = (props) => {
       <Link onClick={back} button="alt button--flat" icon="icon-arrow-left" />
     </div>
     <div className="header__item">
-      <Link onClick={() => navigate('discover')} button="alt button--flat" icon="icon-home" />
+      <Link onClick={() => navigate('/discover')} button="alt button--flat" icon="icon-home" />
     </div>
     <div className="header__item header__item--wunderbar">
       <WunderBar/>
     </div>
     <div className="header__item">
-      <Link onClick={() => navigate('wallet')}  button="text" icon="icon-bank" label={balance} ></Link>
+      <Link onClick={() => navigate('/wallet')}  button="text" icon="icon-bank" label={balance} ></Link>
     </div>
     <div className="header__item">
-      <Link onClick={() => navigate('publish')} button="primary button--flat" icon="icon-upload" label="Publish" />
+      <Link onClick={() => navigate('/publish')} button="primary button--flat" icon="icon-upload" label="Publish" />
     </div>
     <div className="header__item">
-      <Link onClick={() => navigate('downloaded')} button="alt button--flat" icon="icon-folder" />
+      <Link onClick={() => navigate('/downloaded')} button="alt button--flat" icon="icon-folder" />
     </div>
     <div className="header__item">
-      <Link onClick={() => navigate('settings')}  button="alt button--flat" icon="icon-gear" />
+      <Link onClick={() => navigate('/settings')}  button="alt button--flat" icon="icon-gear" />
     </div>
   </header>
 }

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(
-      <a href="#" onClick={() => navigate(link)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }>
+      <Link onClick={(event) => navigate(`/${link}`, event)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }>
         {subLinks[link]}
-      </a>
+      </Link>
     )
   }
 

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(<Provider store={store}><div>{ lbryio.enabled ? <AuthOverlay/> : '' }<App /><SnackBar /></div></Provider>, canvas)
   }
 

ui/js/page/fileListDownloaded/view.jsx

@@ -22,7 +22,7 @@ class FileListDownloaded extends React.Component {
     if (fetching) {
       content = <BusyMessage message="Loading" />
     } else if (!downloadedContent.length) {
-      content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="#" onClick={() => navigate('discover')} label="search for your first download" />!</span>
+      content = <span>You haven't downloaded anything from LBRY yet. Go <Link onClick={() => navigate('/discover')} label="search for your first download" />!</span>
     } else {
       content = <FileList fileInfos={downloadedContent} hidePrices={true} />
     }

ui/js/page/fileListPublished/view.jsx

@@ -43,7 +43,7 @@ class FileListPublished extends React.Component {
     if (fetching) {
       content = <BusyMessage message="Loading" />
     } else if (!publishedContent.length) {
-      content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="#" onClick={() => navigate('discover')} label="search for your first download" />!</span>
+      content = <span>You haven't downloaded anything from LBRY yet. Go <Link onClick={() => navigate('/discover')} label="search for your first download" />!</span>
     } else {
       content = <FileList fileInfos={publishedContent} hidePrices={true} />
     }

ui/js/page/help/view.jsx

@@ -77,7 +77,7 @@ var HelpPage = React.createClass({
           <div className="card__title-primary"><h3>Report a Bug</h3></div>
           <div className="card__content">
             <p>Did you find something wrong?</p>
-            <p><Link href="?report" label="Submit a Bug Report" icon="icon-bug" button="alt" /></p>
+            <p><Link onClick={() => navigate('report')} label="Submit a Bug Report" icon="icon-bug" button="alt" /></p>
             <div className="meta">Thanks! LBRY is made by its users.</div>
           </div>
         </section>

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({

ui/js/page/search/view.jsx

@@ -18,7 +18,7 @@ const SearchNoResults = (props) => {
   return <section>
     <span className="empty">
       No one has checked anything in for {query} yet.
-      <Link label="Be the first" href="#" onClick={() => navigate('publish')} />
+      <Link label="Be the first" onClick={() => navigate('/publish')} />
     </span>
   </section>;
 }

ui/js/page/showPage/view.jsx

@@ -53,7 +53,7 @@ const ShowPage = (props) => {
           </div>
           <div className="card__content">
             { uriLookupComplete ?
-              <p>This location is not yet in use. { ' ' }<Link href="#" onClick={() => navigate('publish')} label="Put something here" />.</p> :
+              <p>This location is not yet in use. { ' ' }<Link onClick={() => navigate('/publish')} label="Put something here" />.</p> :
                 <BusyMessage message="Loading magic decentralized data..." />
             }
           </div>

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