diff --git a/package.json b/package.json index 743bdd18c..184001a41 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "formik": "^0.10.4", "hast-util-sanitize": "^1.1.2", "keytar": "^4.2.1", - "lbry-redux": "lbryio/lbry-redux#aa10240bc1e90dff299821e31a88edcb4c5fd295", + "lbry-redux": "lbryio/lbry-redux#6139cede26a5c17a8ecfc8a5c0445568ee686255", "lbryinc": "lbryio/lbryinc#7a458ea13ceceffa0191e73139f94e5c953f22b1", "localforage": "^1.7.1", "mammoth": "^1.4.6", diff --git a/src/renderer/component/app/index.js b/src/renderer/component/app/index.js index b5c8a2218..85b6ab37c 100644 --- a/src/renderer/component/app/index.js +++ b/src/renderer/component/app/index.js @@ -1,5 +1,10 @@ import { connect } from 'react-redux'; -import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'lbry-redux'; +import { + selectPageTitle, + selectHistoryIndex, + selectActiveHistoryEntry, + doUpdateBlockHeight, +} from 'lbry-redux'; import { doRecordScroll } from 'redux/actions/navigation'; import { selectUser } from 'lbryinc'; import { doAlertError } from 'redux/actions/app'; @@ -17,6 +22,7 @@ const select = state => ({ const perform = dispatch => ({ alertError: errorList => dispatch(doAlertError(errorList)), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), + updateBlockHeight: () => dispatch(doUpdateBlockHeight()), }); export default connect( diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx index c083ba695..6aebf7706 100644 --- a/src/renderer/component/app/view.jsx +++ b/src/renderer/component/app/view.jsx @@ -8,6 +8,8 @@ import SideBar from 'component/sideBar'; import Header from 'component/header'; import { openContextMenu } from '../../util/contextMenu'; +const TWO_POINT_FIVE_MINUTES = 1000 * 60 * 2.5; + type Props = { alertError: (string | {}) => void, recordScroll: number => void, @@ -15,6 +17,7 @@ type Props = { currentPageAttributes: { path: string, scrollY: number }, pageTitle: ?string, theme: string, + updateBlockHeight: () => void, }; class App extends React.PureComponent { @@ -38,6 +41,8 @@ class App extends React.PureComponent { } componentDidMount() { + const { updateBlockHeight } = this.props; + const mainContent = document.getElementById('content'); this.mainContent = mainContent; @@ -46,6 +51,11 @@ class App extends React.PureComponent { } ReactModal.setAppElement('#window'); // fuck this + + updateBlockHeight(); + setInterval(() => { + updateBlockHeight(); + }, TWO_POINT_FIVE_MINUTES); } componentWillReceiveProps(props: Props) { diff --git a/src/renderer/component/dateTime/view.jsx b/src/renderer/component/dateTime/view.jsx index 7049b223e..6a5eb55a0 100644 --- a/src/renderer/component/dateTime/view.jsx +++ b/src/renderer/component/dateTime/view.jsx @@ -23,27 +23,28 @@ class DateTime extends React.PureComponent { }; componentWillMount() { - this.refreshDate(this.props); + // this.refreshDate(this.props); } - componentWillReceiveProps(props) { - this.refreshDate(props); + componentWillReceiveProps() { + // this.refreshDate(props); } - refreshDate(props) { - const { block, date, fetchBlock } = props; - if (block && date === undefined) { - fetchBlock(block); - } - } + // Removing this for performance reasons. Can be un-commented once block_show is better with large numbers of calls + // Or the date is included in the claim + // + // refreshDate(props: Props) { + // const { block, date, fetchBlock } = props; + // if (block && date === undefined) { + // fetchBlock(block); + // } + // } render() { const { date, formatOptions, timeAgo } = this.props; const show = this.props.show || DateTime.SHOW_BOTH; const locale = app.i18n.getLocale(); - // If !date, it's currently being fetched - if (timeAgo) { return date ? {moment(date).from(moment())} : ; } diff --git a/src/renderer/component/transactionList/view.jsx b/src/renderer/component/transactionList/view.jsx index c5f043d89..f0503d76b 100644 --- a/src/renderer/component/transactionList/view.jsx +++ b/src/renderer/component/transactionList/view.jsx @@ -82,7 +82,7 @@ class TransactionList extends React.PureComponent { )} {!slim && !!transactionList.length && ( -
+
{ filters={['nout']} defaultPath={__('lbry-transactions-history')} /> + {!slim && ( + + } + > + {transactionTypes.map(tt => ( + + ))} + + )}
)} - {!slim && ( -
- - } - > - {transactionTypes.map(tt => ( - - ))} - -
- )} {!!transactionList.length && ( diff --git a/src/renderer/component/transactionListRecent/index.js b/src/renderer/component/transactionListRecent/index.js index f4890679f..bb4bdb5b2 100644 --- a/src/renderer/component/transactionListRecent/index.js +++ b/src/renderer/component/transactionListRecent/index.js @@ -4,6 +4,7 @@ import { selectRecentTransactions, selectHasTransactions, selectIsFetchingTransactions, + doFetchClaimListMine, } from 'lbry-redux'; import TransactionListRecent from './view'; @@ -15,6 +16,7 @@ const select = state => ({ const perform = dispatch => ({ fetchTransactions: () => dispatch(doFetchTransactions()), + fetchMyClaims: () => dispatch(doFetchClaimListMine()), }); export default connect( diff --git a/src/renderer/component/transactionListRecent/view.jsx b/src/renderer/component/transactionListRecent/view.jsx index fefcab356..41c60dd64 100644 --- a/src/renderer/component/transactionListRecent/view.jsx +++ b/src/renderer/component/transactionListRecent/view.jsx @@ -1,54 +1,62 @@ // @flow -import React from 'react'; +import type { Transaction } from 'component/transactionList/view'; +import React, { Fragment } from 'react'; import BusyIndicator from 'component/common/busy-indicator'; import Button from 'component/button'; import TransactionList from 'component/transactionList'; import * as icons from 'constants/icons'; -import type { Transaction } from 'component/transactionList/view'; +import RefreshTransactionButton from 'component/transactionRefreshButton'; type Props = { fetchTransactions: () => void, fetchingTransactions: boolean, hasTransactions: boolean, transactions: Array, + fetchMyClaims: () => void, }; class TransactionListRecent extends React.PureComponent { componentDidMount() { - this.props.fetchTransactions(); + const { fetchMyClaims, fetchTransactions } = this.props; + + fetchMyClaims(); + fetchTransactions(); } render() { const { fetchingTransactions, hasTransactions, transactions } = this.props; - return (
-
{__('Recent Transactions')}
+
+ {__('Recent Transactions')} + +
{__('To view all of your transactions, navigate to the')}{' '}
- {fetchingTransactions && ( -
- -
- )} - {!fetchingTransactions && ( - - )} + {fetchingTransactions && + !hasTransactions && ( +
+ +
+ )} {hasTransactions && ( -
-
+
+
+ )}
); diff --git a/src/renderer/component/transactionRefreshButton/index.js b/src/renderer/component/transactionRefreshButton/index.js new file mode 100644 index 000000000..5f2ecd686 --- /dev/null +++ b/src/renderer/component/transactionRefreshButton/index.js @@ -0,0 +1,16 @@ +import { connect } from 'react-redux'; +import { doFetchTransactions, selectIsFetchingTransactions } from 'lbry-redux'; +import RefreshTransactionButton from './view'; + +const select = state => ({ + fetchingTransactions: selectIsFetchingTransactions(state), +}); + +const perform = dispatch => ({ + fetchTransactions: () => dispatch(doFetchTransactions()), +}); + +export default connect( + select, + perform +)(RefreshTransactionButton); diff --git a/src/renderer/component/transactionRefreshButton/view.jsx b/src/renderer/component/transactionRefreshButton/view.jsx new file mode 100644 index 000000000..bbaf730fe --- /dev/null +++ b/src/renderer/component/transactionRefreshButton/view.jsx @@ -0,0 +1,51 @@ +// @flow +import React, { PureComponent } from 'react'; +import Button from 'component/button'; + +type Props = { + fetchTransactions: () => void, + fetchingTransactions: boolean, +}; + +type State = { + label: string, + disabled: boolean, +}; + +class TransactionListRecent extends PureComponent { + constructor() { + super(); + + this.state = { label: __('Refresh'), disabled: false }; + + (this: any).handleClick = this.handleClick.bind(this); + } + + handleClick() { + const { fetchTransactions } = this.props; + + // The fetchTransactions call will be super fast most of the time. + // Instead of showing a loading spinner for 100ms, change the label and show as "Refreshed!" + fetchTransactions(); + this.setState({ label: __('Refreshed!'), disabled: true }); + + setTimeout(() => { + this.setState({ label: __('Refresh'), disabled: false }); + }, 2000); + } + + render() { + const { fetchingTransactions } = this.props; + const { label, disabled } = this.state; + return ( +