From c05edc40426febd95a0a5877ea1b1d63f1f83051 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Sun, 17 Sep 2017 14:26:55 -0400 Subject: [PATCH] clean up tip and search navigation --- app/package.json | 2 +- ui/js/actions/claims.js | 9 ------ ui/js/actions/navigation.js | 38 +++++++------------------ ui/js/component/fileActions/index.js | 9 ++---- ui/js/component/fileActions/view.jsx | 34 +++++++++------------- ui/js/component/fileListSearch/view.jsx | 12 +++++++- ui/js/component/link/index.js | 2 +- ui/js/component/link/view.jsx | 3 +- ui/js/component/tipLink/index.js | 3 +- ui/js/component/tipLink/view.jsx | 9 +++--- ui/js/constants/action_types.js | 1 - ui/js/page/file/index.js | 4 +-- ui/js/page/file/view.jsx | 14 +++------ ui/js/reducers/claims.js | 7 +---- ui/js/reducers/navigation.js | 15 ++++------ ui/js/reducers/search.js | 3 -- ui/js/selectors/claims.js | 2 +- ui/js/selectors/navigation.js | 5 +++- ui/js/selectors/search.js | 5 ++-- 19 files changed, 68 insertions(+), 109 deletions(-) diff --git a/app/package.json b/app/package.json index e9022a2e9..ec2657777 100644 --- a/app/package.json +++ b/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" diff --git a/ui/js/actions/claims.js b/ui/js/actions/claims.js index e8e45f341..51c50785d 100644 --- a/ui/js/actions/claims.js +++ b/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!`), diff --git a/ui/js/actions/navigation.js b/ui/js/actions/navigation.js index b34a2e876..0ab3a22eb 100644 --- a/ui/js/actions/navigation.js +++ b/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; diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index 851b28507..75eaeff9a 100644 --- a/ui/js/component/fileActions/index.js +++ b/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); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index bffcfa664..ecb218228 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -5,19 +5,10 @@ import * as modals from "constants/modal_types"; class FileActions extends React.PureComponent { render() { - const { - fileInfo, - uri, - openModal, - claimIsMine, - editClaim, - checkAvailability, - } = this.props; + const { fileInfo, uri, openModal, claimIsMine } = this.props; const claimId = fileInfo ? fileInfo.claim_id : null, - metadata = fileInfo ? fileInfo.metadata : null, - showMenu = fileInfo && Object.keys(fileInfo).length > 0, - title = metadata ? metadata.title : uri; + showDelete = fileInfo && Object.keys(fileInfo).length > 0; return (
@@ -26,22 +17,25 @@ class FileActions extends React.PureComponent { button="text" icon="icon-edit" label={__("Edit")} - onClick={() => editClaim(claimId)} + navigate="/publish" + navigateParams={{ id: claimId }} />} - openModal(modals.CONFIRM_FILE_REMOVE, { uri })} + navigate="/show" + navigateParams={{ uri, tab: "tip" }} /> + {showDelete && + openModal(modals.CONFIRM_FILE_REMOVE, { uri })} + />}
); } diff --git a/ui/js/component/fileListSearch/view.jsx b/ui/js/component/fileListSearch/view.jsx index 682d07e7c..59884da8e 100644 --- a/ui/js/component/fileListSearch/view.jsx +++ b/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() { diff --git a/ui/js/component/link/index.js b/ui/js/component/link/index.js index 5847c97d9..37340987a 100644 --- a/ui/js/component/link/index.js +++ b/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); diff --git a/ui/js/component/link/view.jsx b/ui/js/component/link/view.jsx index a30d1a981..1ba8f4b52 100644 --- a/ui/js/component/link/view.jsx +++ b/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; diff --git a/ui/js/component/tipLink/index.js b/ui/js/component/tipLink/index.js index 53ca5e10d..b43f225ac 100644 --- a/ui/js/component/tipLink/index.js +++ b/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); diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 00c2639f3..81e0aa31a 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/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 (
@@ -59,7 +57,8 @@ class TipLink extends React.PureComponent {
diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 57466b17f..d1c75403d 100644 --- a/ui/js/constants/action_types.js +++ b/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"; diff --git a/ui/js/page/file/index.js b/ui/js/page/file/index.js index 0154d00a0..cf81056f0 100644 --- a/ui/js/page/file/index.js +++ b/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), }); diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx index f27d0ab01..73d2ed405 100644 --- a/ui/js/page/file/view.jsx +++ b/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 ( {__("Empty claim or metadata info.")} @@ -163,7 +157,7 @@ class FilePage extends React.PureComponent { /> : ""} - {showTipBox ? : ""} + {showTipBox ? : ""} {!showTipBox &&
({ - 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, { diff --git a/ui/js/reducers/navigation.js b/ui/js/reducers/navigation.js index 821db9183..1ebcab2c9 100644 --- a/ui/js/reducers/navigation.js +++ b/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; } diff --git a/ui/js/reducers/search.js b/ui/js/reducers/search.js index be6c3bec7..ed500b987 100644 --- a/ui/js/reducers/search.js +++ b/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, }); }; diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js index 45643722a..14ac231fc 100644 --- a/ui/js/selectors/claims.js +++ b/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] ); diff --git a/ui/js/selectors/navigation.js b/ui/js/selectors/navigation.js index f11f35eb9..b5eb98ade 100644 --- a/ui/js/selectors/navigation.js +++ b/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 => { diff --git a/ui/js/selectors/search.js b/ui/js/selectors/search.js index 4e02c2542..9b967d66e 100644 --- a/ui/js/selectors/search.js +++ b/ui/js/selectors/search.js @@ -8,8 +8,9 @@ import { export const _selectState = state => state.search || {}; export const selectSearchQuery = createSelector( - _selectState, - state => state.query + selectCurrentPage, + selectCurrentParams, + (page, params) => (page === "search" ? params && params.query : null) ); export const selectIsSearching = createSelector(