ActivityFilter: add peristent storage and Unpaid filter

stores/ActivityStore.ts

@@ -1,4 +1,6 @@
 import { action, observable } from 'mobx';
+import EncryptedStorage from 'react-native-encrypted-storage';
+
 // LN
 import Payment from './../models/Payment';
 import Invoice from './../models/Invoice';
@@ -13,34 +15,39 @@ import TransactionsStore from './TransactionsStore';
 import { localeString } from './../utils/LocaleUtils';
 import BackendUtils from './../utils/BackendUtils';
 
-interface ActivityFilter {
+const STORAGE_KEY = 'zeus-activity-filters';
+
+export interface Filter {
     [index: string]: any;
     lightning: boolean;
     onChain: boolean;
-    channels: boolean;
     sent: boolean;
     received: boolean;
+    unpaid: boolean;
     minimumAmount: number;
     startDate: any;
     endDate: any;
 }
 
+export const DEFAULT_FILTERS = {
+    lightning: true,
+    onChain: true,
+    sent: true,
+    received: true,
+    unpaid: true,
+    minimumAmount: 0,
+    startDate: null,
+    endDate: null
+};
+
 export default class ActivityStore {
     @observable public loading = false;
     @observable public error = false;
     @observable public activity: Array<Invoice | Payment | Transaction> = [];
     @observable public filteredActivity: Array<
         Invoice | Payment | Transaction
     > = [];
-    @observable public filters: ActivityFilter = {
-        lightning: true,
-        onChain: true,
-        channels: true,
-        sent: true,
-        received: true,
-        startDate: null,
-        endDate: null
-    };
+    @observable public filters: Filter = DEFAULT_FILTERS;
     settingsStore: SettingsStore;
     paymentsStore: PaymentsStore;
     invoicesStore: InvoicesStore;
@@ -58,6 +65,15 @@ export default class ActivityStore {
         this.invoicesStore = invoicesStore;
     }
 
+    @action
+    public resetFilters = async () => {
+        this.filters = DEFAULT_FILTERS;
+        await EncryptedStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify(this.filters)
+        );
+    };
+
     @action
     public setAmountFilter = (filter: any) => {
         this.filters.minimumAmount = filter;
@@ -138,36 +154,32 @@ export default class ActivityStore {
     };
 
     @action
-    public resetFilters = async () => {
-        this.filters = {
-            lightning: true,
-            onChain: true,
-            channels: true,
-            sent: true,
-            received: true,
-            minimumAmount: 0,
-            startDate: null,
-            endDate: null
-        };
-    };
+    public async getFilters() {
+        this.loading = true;
+        try {
+            // Retrieve the credentials
+            const filters: any = await EncryptedStorage.getItem(STORAGE_KEY);
+            if (filters) {
+                this.filters = JSON.parse(filters);
+            } else {
+                console.log('No activity filters stored');
+            }
+        } catch (error) {
+            console.log("Keychain couldn't be accessed!", error);
+        } finally {
+            this.loading = false;
+        }
+
+        return this.filters;
+    }
 
     @action
-    public setFilters = async (filters: any) => {
+    public setFilters = async (filters: Filter) => {
         this.loading = true;
 
         this.filters = filters;
 
         let filteredActivity = this.activity;
-        if (filters.channels == false) {
-            filteredActivity = filteredActivity.filter(
-                (activity: any) =>
-                    !(
-                        activity.model ===
-                            localeString('general.transaction') &&
-                        activity.getAmount == 0
-                    )
-            );
-        }
 
         if (filters.lightning == false) {
             filteredActivity = filteredActivity.filter(
@@ -215,6 +227,17 @@ export default class ActivityStore {
             );
         }
 
+        if (filters.unpaid == false) {
+            filteredActivity = filteredActivity.filter(
+                (activity: any) =>
+                    !(
+                        activity.model ===
+                            localeString('views.Invoice.title') &&
+                        !activity.isPaid
+                    )
+            );
+        }
+
         if (filters.minimumAmount > 0) {
             filteredActivity = filteredActivity.filter(
                 (activity: any) =>
@@ -236,11 +259,13 @@ export default class ActivityStore {
 
         this.filteredActivity = filteredActivity;
 
+        await EncryptedStorage.setItem(STORAGE_KEY, JSON.stringify(filters));
+
         this.loading = false;
     };
 
     @action
-    public getActivityAndFilter = async (filters: any = this.filters) => {
+    public getActivityAndFilter = async (filters: Filter = this.filters) => {
         await this.getActivity();
         await this.setFilters(filters);
     };

views/Activity/Activity.tsx

@@ -13,14 +13,14 @@ import Amount from '../../components/Amount';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import Screen from '../../components/Screen';
 
-import { localeString } from './../../utils/LocaleUtils';
-import BackendUtils from './../../utils/BackendUtils';
-import { themeColor } from './../../utils/ThemeUtils';
+import { localeString } from '../../utils/LocaleUtils';
+import BackendUtils from '../../utils/BackendUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
-import ActivityStore from './../../stores/ActivityStore';
-import SettingsStore from './../../stores/SettingsStore';
+import ActivityStore from '../../stores/ActivityStore';
+import SettingsStore from '../../stores/SettingsStore';
 
-import Filter from './../../assets/images/SVG/Filter On.svg';
+import Filter from '../../assets/images/SVG/Filter On.svg';
 
 interface ActivityProps {
     navigation: any;
@@ -36,9 +36,9 @@ export default class Activity extends React.Component<ActivityProps, {}> {
 
     async UNSAFE_componentWillMount() {
         const { ActivityStore, SettingsStore } = this.props;
-        const { getActivityAndFilter, resetFilters } = ActivityStore;
-        await resetFilters();
-        getActivityAndFilter();
+        const { getActivityAndFilter, getFilters } = ActivityStore;
+        const filters = await getFilters();
+        await getActivityAndFilter(filters);
         if (SettingsStore.implementation === 'lightning-node-connect') {
             this.subscribeEvents();
         }
@@ -118,7 +118,7 @@ export default class Activity extends React.Component<ActivityProps, {}> {
 
         const CloseButton = () => (
             <Icon
-                name="close"
+                name="arrow-back"
                 onPress={() => navigation.navigate('Wallet')}
                 color={themeColor('text')}
                 underlayColor="transparent"

views/Activity/ActivityFilter.tsx

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
 import { Button, Header, Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
+import { isEqual } from 'lodash';
 
 import DatePicker from 'react-native-date-picker';
 
 import { localeString } from './../../utils/LocaleUtils';
 import { themeColor } from './../../utils/ThemeUtils';
 
-import ActivityStore from './../../stores/ActivityStore';
+import ActivityStore, { DEFAULT_FILTERS } from './../../stores/ActivityStore';
 
 import Screen from './../../components/Screen';
 import Switch from './../../components/Switch';
@@ -66,17 +67,17 @@ export default class ActivityFilter extends React.Component<
         const {
             lightning,
             onChain,
-            channels,
             sent,
             received,
+            unpaid,
             minimumAmount,
             startDate,
             endDate
         } = filters;
 
         const CloseButton = () => (
             <Icon
-                name="close"
+                name="arrow-back"
                 onPress={() =>
                     navigation.navigate('Activity', { refresh: true })
                 }
@@ -235,12 +236,6 @@ export default class ActivityFilter extends React.Component<
                 var: 'onChain',
                 type: 'Toggle'
             },
-            {
-                label: localeString('views.Wallet.Wallet.channels'),
-                value: channels,
-                var: 'channels',
-                type: 'Toggle'
-            },
             {
                 label: localeString('general.sent'),
                 value: sent,
@@ -253,6 +248,12 @@ export default class ActivityFilter extends React.Component<
                 var: 'received',
                 type: 'Toggle'
             },
+            {
+                label: localeString('views.Wallet.Invoices.unpaid'),
+                value: unpaid,
+                var: 'unpaid',
+                type: 'Toggle'
+            },
             {
                 label: localeString('views.ActivityFilter.minimumAmount'),
                 value: minimumAmount,
@@ -271,6 +272,15 @@ export default class ActivityFilter extends React.Component<
             }
         ];
 
+        const ClearButton = () => (
+            <Icon
+                name="cancel"
+                onPress={async () => await ActivityStore.resetFilters()}
+                color={themeColor('text')}
+                underlayColor="transparent"
+            />
+        );
+
         return (
             <Screen>
                 <Header
@@ -282,6 +292,11 @@ export default class ActivityFilter extends React.Component<
                             fontFamily: 'Lato-Regular'
                         }
                     }}
+                    rightComponent={
+                        isEqual(filters, DEFAULT_FILTERS) ? null : (
+                            <ClearButton />
+                        )
+                    }
                     backgroundColor="transparent"
                     containerStyle={{
                         borderBottomWidth: 0
@@ -315,12 +330,12 @@ export default class ActivityFilter extends React.Component<
                                     >
                                         <Switch
                                             value={item.value}
-                                            onValueChange={() => {
+                                            onValueChange={async () => {
                                                 const newFilters: any = filters;
                                                 const index = `${item.var}`;
                                                 newFilters[index] =
                                                     !filters[index];
-                                                setFilters(newFilters);
+                                                await setFilters(newFilters);
                                             }}
                                         />
                                     </View>