clean up tip and search navigation
This commit is contained in:
parent
ae81843c05
commit
c05edc4042
19 changed files with 68 additions and 109 deletions
|
@ -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"
|
||||
|
|
|
@ -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!`),
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 (
|
||||
<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}
|
||||
/>
|
||||
<Link
|
||||
button="text"
|
||||
icon="icon-trash"
|
||||
label={__("Remove")}
|
||||
className="card__action--right"
|
||||
onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
|
||||
navigate="/show"
|
||||
navigateParams={{ uri, tab: "tip" }}
|
||||
/>
|
||||
{showDelete &&
|
||||
<Link
|
||||
button="text"
|
||||
icon="icon-trash"
|
||||
label={__("Remove")}
|
||||
className="card__action--right"
|
||||
onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
|
||||
/>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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),
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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, {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -66,7 +66,7 @@ export const selectAllFetchingChannelClaims = createSelector(
|
|||
);
|
||||
|
||||
export const makeSelectFetchingChannelClaims = uri => {
|
||||
createSelector(
|
||||
return createSelector(
|
||||
selectAllFetchingChannelClaims,
|
||||
fetching => fetching && fetching[uri]
|
||||
);
|
||||
|
|
|
@ -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 => {
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in a new issue