persists transaction filter

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
  * Focus on search bar with {cmd,ctrl} + "l" ([#2003](https://github.com/lbryio/lbry-desktop/pull/2003))
  * Add support for clickable channel names on explore page headings ([#2023](https://github.com/lbryio/lbry-desktop/pull/2023))
  * Content loading placeholder styles on FileCard/FileTile ([#2022](https://github.com/lbryio/lbry-desktop/pull/2022))
+ * Adds Persistence to Transaction List Filter Selection ([#2048](https://github.com/lbryio/lbry-desktop/pull/2048))
 
 ### Changed
  * Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979))

src/renderer/component/transactionList/index.js

@@ -1,17 +1,24 @@
 import { connect } from 'react-redux';
 import { selectClaimedRewardsByTransactionId } from 'lbryinc';
 import { doNavigate } from 'redux/actions/navigation';
-import { selectAllMyClaimsByOutpoint, doNotify } from 'lbry-redux';
+import {
+  selectAllMyClaimsByOutpoint,
+  doNotify,
+  selectTransactionListFilter,
+  doSetTransactionListFilter,
+} from 'lbry-redux';
 import TransactionList from './view';
 
 const select = state => ({
   rewards: selectClaimedRewardsByTransactionId(state),
   myClaims: selectAllMyClaimsByOutpoint(state),
+  filterSetting: selectTransactionListFilter(state),
 });
 
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   openModal: (modal, props) => dispatch(doNotify(modal, props)),
+  setTransactionFilter: filterSetting => dispatch(doSetTransactionListFilter(filterSetting)),
 });
 
 export default connect(

src/renderer/component/transactionList/view.jsx

@@ -25,20 +25,14 @@ type Props = {
   rewards: {},
   openModal: ({ id: string }, { nout: number, txid: string }) => void,
   myClaims: any,
+  filterSetting: string,
+  setTransactionFilter: string => void,
 };
 
-type State = {
+class TransactionList extends React.PureComponent<Props> {
-  filter: string,
-};
-
-class TransactionList extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-      filter: 'all',
-    };
-
     (this: any).handleFilterChanged = this.handleFilterChanged.bind(this);
     (this: any).filterTransaction = this.filterTransaction.bind(this);
     (this: any).revokeClaim = this.revokeClaim.bind(this);
@@ -50,15 +44,13 @@ class TransactionList extends React.PureComponent<Props, State> {
   }
 
   handleFilterChanged(event: SyntheticInputEvent<*>) {
-    this.setState({
+    this.props.setTransactionFilter(event.target.value);
-      filter: event.target.value,
-    });
   }
 
   filterTransaction(transaction: Transaction) {
-    const { filter } = this.state;
+    return (
-
+      this.props.filterSetting === TRANSACTIONS.ALL || this.props.filterSetting === transaction.type
-    return filter === 'all' || filter === transaction.type;
+    );
   }
 
   isRevokeable(txid: string, nout: number) {
@@ -73,9 +65,12 @@ class TransactionList extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { emptyMessage, rewards, transactions, slim } = this.props;
+    const { emptyMessage, rewards, transactions, slim, filterSetting } = this.props;
-    const { filter } = this.state;
     const transactionList = transactions.filter(this.filterTransaction);
+    // Flow offers little support for Object.values() typing.
+    // https://github.com/facebook/flow/issues/2221
+    // $FlowFixMe
+    const transactionTypes: Array<string> = Object.values(TRANSACTIONS);
 
     return (
       <React.Fragment>
@@ -98,7 +93,7 @@ class TransactionList extends React.PureComponent<Props, State> {
           <div className="card__actions-top-corner">
             <FormField
               type="select"
-              value={filter}
+              value={filterSetting || TRANSACTIONS.ALL}
               onChange={this.handleFilterChanged}
               affixClass="form-field--align-center"
               prefix={__('Show')}
@@ -111,31 +106,11 @@ class TransactionList extends React.PureComponent<Props, State> {
                 />
               }
             >
-              <option value="all">{__('All')}</option>
+              {transactionTypes.map(tt => (
-              <option value={TRANSACTIONS.SPEND}>
+                <option key={tt} value={tt}>
-                {__(`${this.capitalize(TRANSACTIONS.SPEND)}s`)}
+                  {__(`${this.capitalize(tt)}`)}
-              </option>
+                </option>
-              <option value={TRANSACTIONS.RECEIVE}>
+              ))}
-                {__(`${this.capitalize(TRANSACTIONS.RECEIVE)}s`)}
-              </option>
-              <option value={TRANSACTIONS.PUBLISH}>
-                {__(`${this.capitalize(TRANSACTIONS.PUBLISH)}es`)}
-              </option>
-              <option value={TRANSACTIONS.CHANNEL}>
-                {__(`${this.capitalize(TRANSACTIONS.CHANNEL)}s`)}
-              </option>
-              <option value={TRANSACTIONS.TIP}>
-                {__(`${this.capitalize(TRANSACTIONS.TIP)}s`)}
-              </option>
-              <option value={TRANSACTIONS.SUPPORT}>
-                {__(`${this.capitalize(TRANSACTIONS.SUPPORT)}s`)}
-              </option>
-              <option value={TRANSACTIONS.UPDATE}>
-                {__(`${this.capitalize(TRANSACTIONS.UPDATE)}s`)}
-              </option>
-              <option value={TRANSACTIONS.ABANDON}>
-                {__(`${this.capitalize(TRANSACTIONS.ABANDON)}s`)}
-              </option>
             </FormField>
           </div>
         )}