clean up tip and search navigation

app/package.json

@@ -20,7 +20,7 @@
     "electron-rebuild": "^1.5.11"
   },
   "lbrySettings": {
-    "lbrynetDaemonVersion": "0.16.0rc8",
+    "lbrynetDaemonVersion": "0.16.0rc9",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip"
   },
   "license": "MIT"

ui/js/actions/claims.js

@@ -4,14 +4,6 @@ import { doOpenModal, doShowSnackBar } from "actions/app";
 import * as types from "constants/action_types";
 import * as modals from "constants/modal_types";
 
-export function doShowTipBox() {
-  return { type: types.SHOW_TIP_BOX };
-}
-
-export function doHideTipBox() {
-  return { type: types.HIDE_TIP_BOX };
-}
-
 export function doSendSupport(amount, claim_id) {
   return function(dispatch, getState) {
     const state = getState();
@@ -30,7 +22,6 @@ export function doSendSupport(amount, claim_id) {
         dispatch({
           type: types.SUPPORT_TRANSACTION_COMPLETED,
         });
-        dispatch(doHideTipBox);
         dispatch(
           doShowSnackBar({
             message: __(`You sent ${amount} LBC as support, Mahalo!`),

ui/js/actions/navigation.js

@@ -1,5 +1,6 @@
 import * as types from "constants/action_types";
 import {
+  computePageFromPath,
   selectPageTitle,
   selectCurrentPage,
   selectCurrentParams,
@@ -20,9 +21,17 @@ export function doNavigate(path, params = {}, options = {}) {
       url += "?" + toQueryString(params);
     }
 
-    dispatch(doChangePath(url, options));
+    const state = getState(),
+      currentPage = selectCurrentPage(state),
+      nextPage = computePageFromPath(path),
+      scrollY = options.scrollY;
 
-    const pageTitle = selectPageTitle(getState()) + " - LBRY";
+    if (currentPage != nextPage) {
+      //I wasn't seeing it scroll to the proper position without this -- possibly because the page isn't fully rendered? Not sure - Jeremy
+      setTimeout(() => {
+        window.scrollTo(0, scrollY ? scrollY : 0);
+      }, 100);
+    }
 
     dispatch({
       type: types.HISTORY_NAVIGATE,
@@ -45,31 +54,6 @@ export function doAuthNavigate(pathAfterAuth = null, params = {}) {
   };
 }
 
-export function doChangePath(path, options = {}) {
-  return function(dispatch, getState) {
-    dispatch({
-      type: types.CHANGE_PATH,
-      data: {
-        path,
-      },
-    });
-
-    const state = getState();
-    const scrollY = options.scrollY;
-
-    //I wasn't seeing it scroll to the proper position without this -- possibly because the page isn't fully rendered? Not sure - Jeremy
-    setTimeout(() => {
-      window.scrollTo(0, scrollY ? scrollY : 0);
-    }, 100);
-
-    const currentPage = selectCurrentPage(state);
-    if (currentPage === "search") {
-      const params = selectCurrentParams(state);
-      dispatch(doSearch(params.query));
-    }
-  };
-}
-
 export function doHistoryTraverse(dispatch, state, modifier) {
   const stack = selectHistoryStack(state),
     index = selectHistoryIndex(state) + modifier;

ui/js/component/fileActions/index.js

@@ -1,15 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
-import { selectPlatform } from "selectors/app";
 import { makeSelectFileInfoForUri } from "selectors/file_info";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
 import { doOpenModal } from "actions/app";
 import { doFetchAvailability } from "actions/availability";
-import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info";
+import { doOpenFileInShell } from "actions/file_info";
 import { makeSelectClaimIsMine } from "selectors/claims";
-import { doPurchaseUri, doLoadVideo, doStartDownload } from "actions/content";
+import { doPurchaseUri, doStartDownload } from "actions/content";
 import { doNavigate } from "actions/navigation";
-import { doShowTipBox } from "actions/claims";
 import FileActions from "./view";
 
 const select = (state, props) => ({
@@ -21,12 +19,11 @@ const select = (state, props) => ({
 
 const perform = dispatch => ({
   checkAvailability: uri => dispatch(doFetchAvailability(uri)),
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
   openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   startDownload: uri => dispatch(doPurchaseUri(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
-  editClaim: claimId => dispatch(doNavigate("/publish", { id: claimId })),
-  showTipBox: () => dispatch(doShowTipBox()),
 });
 
 export default connect(select, perform)(FileActions);

ui/js/component/fileActions/view.jsx

@@ -5,19 +5,10 @@ import * as modals from "constants/modal_types";
 
 class FileActions extends React.PureComponent {
   render() {
-    const {
+    const { fileInfo, uri, openModal, claimIsMine } = this.props;
-      fileInfo,
-      uri,
-      openModal,
-      claimIsMine,
-      editClaim,
-      checkAvailability,
-    } = this.props;
 
     const claimId = fileInfo ? fileInfo.claim_id : null,
-      metadata = fileInfo ? fileInfo.metadata : null,
+      showDelete = fileInfo && Object.keys(fileInfo).length > 0;
-      showMenu = fileInfo && Object.keys(fileInfo).length > 0,
-      title = metadata ? metadata.title : uri;
 
     return (
       <section className="card__actions">
@@ -26,22 +17,25 @@ class FileActions extends React.PureComponent {
             button="text"
             icon="icon-edit"
             label={__("Edit")}
-            onClick={() => editClaim(claimId)}
+            navigate="/publish"
+            navigateParams={{ id: claimId }}
           />}
         <FileDownloadLink uri={uri} />
         <Link
           button="text"
           icon="icon-gift"
           label={__("Support")}
-          onClick={this.props.showTipBox}
+          navigate="/show"
-        />
+          navigateParams={{ uri, tab: "tip" }}
-        <Link
-          button="text"
-          icon="icon-trash"
-          label={__("Remove")}
-          className="card__action--right"
-          onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
         />
+        {showDelete &&
+          <Link
+            button="text"
+            icon="icon-trash"
+            label={__("Remove")}
+            className="card__action--right"
+            onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
+          />}
       </section>
     );
   }

ui/js/component/fileListSearch/view.jsx

@@ -49,7 +49,17 @@ const FileListSearchResults = props => {
 
 class FileListSearch extends React.PureComponent {
   componentWillMount() {
-    this.props.search(this.props.query);
+    this.doSearch(this.props);
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.query != this.props.query) {
+      this.doSearch(props);
+    }
+  }
+
+  doSearch(props) {
+    this.props.search(props.query);
   }
 
   render() {

ui/js/component/link/index.js

@@ -4,7 +4,7 @@ import { doNavigate } from "actions/navigation";
 import Link from "./view";
 
 const perform = dispatch => ({
-  doNavigate: path => dispatch(doNavigate(path)),
+  doNavigate: (path, params) => dispatch(doNavigate(path, params)),
 });
 
 export default connect(null, perform)(Link);

ui/js/component/link/view.jsx

@@ -12,6 +12,7 @@ const Link = props => {
     disabled,
     children,
     navigate,
+    navigateParams,
     doNavigate,
   } = props;
 
@@ -23,7 +24,7 @@ const Link = props => {
 
   const onClick = !props.onClick && navigate
     ? () => {
-        doNavigate(navigate);
+        doNavigate(navigate, navigateParams || {});
       }
     : props.onClick;
 

ui/js/component/tipLink/index.js

@@ -1,13 +1,12 @@
 import React from "react";
 import { connect } from "react-redux";
-import { doSendSupport, doHideTipBox } from "actions/claims";
+import { doSendSupport } from "actions/claims";
 import TipLink from "./view";
 
 const select = state => ({});
 
 const perform = dispatch => ({
   sendSupport: (amount, claim_id) => dispatch(doSendSupport(amount, claim_id)),
-  hideTipBox: () => dispatch(doHideTipBox()),
 });
 
 export default connect(select, perform)(TipLink);

ui/js/component/tipLink/view.jsx

@@ -17,10 +17,6 @@ class TipLink extends React.PureComponent {
     this.props.sendSupport(amount, claim_id);
   }
 
-  handleSupportCancelButtonClicked() {
-    this.props.hideTipBox();
-  }
-
   handleSupportPriceChange(event) {
     this.setState({
       tipAmount: Number(event.target.value),
@@ -28,6 +24,8 @@ class TipLink extends React.PureComponent {
   }
 
   render() {
+    const { uri } = this.props;
+
     return (
       <div className="card__content">
         <div className="card__title-primary">
@@ -59,7 +57,8 @@ class TipLink extends React.PureComponent {
           <Link
             label={__("Cancel")}
             button="alt"
-            onClick={this.handleSupportCancelButtonClicked.bind(this)}
+            navigate="/show"
+            navigateParams={{ uri }}
           />
         </div>
       </div>

ui/js/constants/action_types.js

@@ -9,7 +9,6 @@ export const DAEMON_VERSION_MISMATCH = "DAEMON_VERSION_MISMATCH";
 export const VOLUME_CHANGED = "VOLUME_CHANGED";
 
 // Navigation
-export const CHANGE_PATH = "CHANGE_PATH";
 export const CHANGE_AFTER_AUTH_PATH = "CHANGE_AFTER_AUTH_PATH";
 export const WINDOW_SCROLLED = "WINDOW_SCROLLED";
 export const HISTORY_NAVIGATE = "HISTORY_NAVIGATE";

ui/js/page/file/index.js

@@ -9,11 +9,11 @@ import {
   makeSelectClaimForUri,
   makeSelectContentTypeForUri,
   makeSelectMetadataForUri,
-  selectShowTipBox,
 } from "selectors/claims";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
 import { selectShowNsfw } from "selectors/settings";
 import FilePage from "./view";
+import { makeSelectCurrentParam } from "../../selectors/navigation";
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
@@ -21,7 +21,7 @@ const select = (state, props) => ({
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
   metadata: makeSelectMetadataForUri(props.uri)(state),
   obscureNsfw: !selectShowNsfw(state),
-  showTipBox: selectShowTipBox(state),
+  tab: makeSelectCurrentParam("tab")(state),
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
 });

ui/js/page/file/view.jsx

@@ -14,7 +14,6 @@ import DateTime from "component/dateTime";
 
 const FormatItem = props => {
   const {
-    publishedDate,
     contentType,
     claim: { height },
     metadata: { language, license },
@@ -43,13 +42,6 @@ const FormatItem = props => {
 };
 
 class FilePage extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showTipBox: false,
-    };
-  }
-
   componentDidMount() {
     this.fetchFileInfo(this.props);
     this.fetchCostInfo(this.props);
@@ -77,11 +69,13 @@ class FilePage extends React.PureComponent {
       fileInfo,
       metadata,
       contentType,
+      tab,
       uri,
       rewardedContentClaimIds,
-      showTipBox,
     } = this.props;
 
+    const showTipBox = tab == "tip";
+
     if (!claim || !metadata) {
       return (
         <span className="empty">{__("Empty claim or metadata info.")}</span>
@@ -163,7 +157,7 @@ class FilePage extends React.PureComponent {
                 />
               </div>
             : ""}
-          {showTipBox ? <TipLink claim_id={claim.claim_id} /> : ""}
+          {showTipBox ? <TipLink claim_id={claim.claim_id} uri={uri} /> : ""}
           {!showTipBox &&
             <div className="card__content">
               <Link

ui/js/reducers/claims.js

@@ -2,12 +2,8 @@ import * as types from "constants/action_types";
 
 const reducers = {};
 
-const buildSupportTransaction = () => ({
-  tipBoxShown: false,
-});
-
 const defaultState = {
-  supportTransaction: buildSupportTransaction(),
+  supportTransaction: {},
 };
 
 reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
@@ -232,7 +228,6 @@ reducers[types.SUPPORT_TRANSACTION_FAILED] = function(state, action) {
   const newSupportTransaction = Object.assign({}, state.supportTransaction, {
     sendingSupport: false,
     error: action.data.error,
-    tipBoxShown: true,
   });
 
   return Object.assign({}, state, {

ui/js/reducers/navigation.js

@@ -24,12 +24,6 @@ reducers[types.DAEMON_READY] = function(state, action) {
   });
 };
 
-reducers[types.CHANGE_PATH] = function(state, action) {
-  return Object.assign({}, state, {
-    currentPath: action.data.path,
-  });
-};
-
 reducers[types.CHANGE_AFTER_AUTH_PATH] = function(state, action) {
   return Object.assign({}, state, {
     pathAfterAuth: action.data.path,
@@ -38,15 +32,16 @@ reducers[types.CHANGE_AFTER_AUTH_PATH] = function(state, action) {
 
 reducers[types.HISTORY_NAVIGATE] = (state, action) => {
   const { stack, index } = state;
-
-  let newState = {};
-
   const path = action.data.url;
 
-  // Check for duplicated
+  let newState = {
+    currentPath: path,
+  };
+
   if (action.data.index >= 0) {
     newState.index = action.data.index;
   } else if (!stack[index] || stack[index].path !== path) {
+    // ^ Check for duplicated
     newState.stack = [...stack.slice(0, index + 1), { path, scrollY: 0 }];
     newState.index = newState.stack.length - 1;
   }

ui/js/reducers/search.js

@@ -1,5 +1,4 @@
 import * as types from "constants/action_types";
-import lbryuri from "lbryuri";
 
 const reducers = {};
 const defaultState = {};
@@ -9,7 +8,6 @@ reducers[types.SEARCH_STARTED] = function(state, action) {
 
   return Object.assign({}, state, {
     searching: true,
-    query: query,
   });
 };
 
@@ -31,7 +29,6 @@ reducers[types.SEARCH_COMPLETED] = function(state, action) {
 reducers[types.SEARCH_CANCELLED] = function(state, action) {
   return Object.assign({}, state, {
     searching: false,
-    query: undefined,
   });
 };
 

ui/js/selectors/claims.js

@@ -66,7 +66,7 @@ export const selectAllFetchingChannelClaims = createSelector(
 );
 
 export const makeSelectFetchingChannelClaims = uri => {
-  createSelector(
+  return createSelector(
     selectAllFetchingChannelClaims,
     fetching => fetching && fetching[uri]
   );

ui/js/selectors/navigation.js

@@ -10,8 +10,11 @@ export const selectCurrentPath = createSelector(
   state => state.currentPath
 );
 
+export const computePageFromPath = path =>
+  path.replace(/^\//, "").split("?")[0];
+
 export const selectCurrentPage = createSelector(selectCurrentPath, path => {
-  return path.replace(/^\//, "").split("?")[0];
+  return computePageFromPath(path);
 });
 
 export const selectCurrentParams = createSelector(selectCurrentPath, path => {

ui/js/selectors/search.js

@@ -8,8 +8,9 @@ import {
 export const _selectState = state => state.search || {};
 
 export const selectSearchQuery = createSelector(
-  _selectState,
+  selectCurrentPage,
-  state => state.query
+  selectCurrentParams,
+  (page, params) => (page === "search" ? params && params.query : null)
 );
 
 export const selectIsSearching = createSelector(