From 7e5bbf9a868e4f43ddc490e1812b4828d8670c4c Mon Sep 17 00:00:00 2001
From: Evan Kaloudis <zeusln@tutanota.com>
Date: Fri, 17 Mar 2023 01:29:11 -0400
Subject: [PATCH] Settings: Invoices + Payments: fix swipe back bug

---
 views/Settings/InvoicesSettings.tsx | 239 +++++++++++++++-------------
 views/Settings/PaymentsSettings.tsx | 192 +++++++++++-----------
 2 files changed, 223 insertions(+), 208 deletions(-)

diff --git a/views/Settings/InvoicesSettings.tsx b/views/Settings/InvoicesSettings.tsx
index 49d393021..f9e08c571 100644
--- a/views/Settings/InvoicesSettings.tsx
+++ b/views/Settings/InvoicesSettings.tsx
@@ -4,7 +4,6 @@ import { Header, Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 import _map from 'lodash/map';
 
-import LoadingIndicator from '../../components/LoadingIndicator';
 import ModalBox from '../../components/ModalBox';
 import Switch from '../../components/Switch';
 import TextInput from '../../components/TextInput';
@@ -56,22 +55,6 @@ export default class InvoicesSettings extends React.Component<
         });
     }
 
-    handleSave = async () => {
-        const { addressType, memo, expiry, routeHints, ampInvoice } =
-            this.state;
-        const { SettingsStore } = this.props;
-        const { updateSettings } = SettingsStore;
-        await updateSettings({
-            invoices: {
-                addressType,
-                memo,
-                expiry,
-                routeHints,
-                ampInvoice
-            }
-        });
-    };
-
     renderSeparator = () => (
         <View
             style={{
@@ -85,7 +68,7 @@ export default class InvoicesSettings extends React.Component<
         const { navigation, SettingsStore } = this.props;
         const { addressType, memo, expiry, routeHints, ampInvoice } =
             this.state;
-        const { implementation, loading }: any = SettingsStore;
+        const { implementation, updateSettings }: any = SettingsStore;
 
         const ADDRESS_TYPES = BackendUtils.supportsTaproot()
             ? [
@@ -130,7 +113,6 @@ export default class InvoicesSettings extends React.Component<
             <Icon
                 name="arrow-back"
                 onPress={() => {
-                    this.handleSave();
                     navigation.navigate('Settings', {
                         refresh: true
                     });
@@ -175,101 +157,133 @@ export default class InvoicesSettings extends React.Component<
                         borderBottomWidth: 0
                     }}
                 />
-                {loading ? (
-                    <LoadingIndicator />
-                ) : (
-                    <View
+                <View
+                    style={{
+                        padding: 20
+                    }}
+                >
+                    <Text
                         style={{
-                            padding: 20
+                            ...styles.secondaryText,
+                            color: themeColor('secondaryText')
                         }}
                     >
-                        <Text
-                            style={{
-                                ...styles.secondaryText,
-                                color: themeColor('secondaryText')
-                            }}
-                        >
-                            {localeString('views.Receive.memo')}
-                        </Text>
-                        <TextInput
-                            placeholder={localeString(
-                                'views.Receive.memoPlaceholder'
-                            )}
-                            value={memo}
-                            onChangeText={(text: string) => {
-                                this.setState({ memo: text });
-                            }}
-                        />
-
-                        {implementation !== 'lndhub' && (
-                            <>
-                                <Text
-                                    style={{
-                                        ...styles.secondaryText,
-                                        color: themeColor('secondaryText'),
-                                        paddingTop: 10
-                                    }}
-                                >
-                                    {localeString('views.Receive.expiration')}
-                                </Text>
-                                <TextInput
-                                    keyboardType="numeric"
-                                    placeholder={'3600 (one hour)'}
-                                    value={expiry}
-                                    onChangeText={(text: string) =>
-                                        this.setState({
-                                            expiry: text
-                                        })
-                                    }
-                                />
-                            </>
+                        {localeString('views.Receive.memo')}
+                    </Text>
+                    <TextInput
+                        placeholder={localeString(
+                            'views.Receive.memoPlaceholder'
                         )}
+                        value={memo}
+                        onChangeText={async (text: string) => {
+                            this.setState({ memo: text });
+                            await updateSettings({
+                                invoices: {
+                                    addressType,
+                                    memo: text,
+                                    expiry,
+                                    routeHints,
+                                    ampInvoice
+                                }
+                            });
+                        }}
+                    />
 
-                        {BackendUtils.isLNDBased() && (
-                            <>
-                                <Text
-                                    style={{
-                                        ...styles.secondaryText,
-                                        color: themeColor('secondaryText'),
-                                        top: 20
-                                    }}
-                                >
-                                    {localeString('views.Receive.routeHints')}
-                                </Text>
-                                <Switch
-                                    value={routeHints}
-                                    onValueChange={() =>
-                                        this.setState({
-                                            routeHints: !routeHints
-                                        })
-                                    }
-                                />
-                            </>
-                        )}
+                    {implementation !== 'lndhub' && (
+                        <>
+                            <Text
+                                style={{
+                                    ...styles.secondaryText,
+                                    color: themeColor('secondaryText'),
+                                    paddingTop: 10
+                                }}
+                            >
+                                {localeString('views.Receive.expiration')}
+                            </Text>
+                            <TextInput
+                                keyboardType="numeric"
+                                placeholder={'3600 (one hour)'}
+                                value={expiry}
+                                onChangeText={async (text: string) => {
+                                    this.setState({
+                                        expiry: text
+                                    });
+                                    await updateSettings({
+                                        invoices: {
+                                            addressType,
+                                            memo,
+                                            expiry: text,
+                                            routeHints,
+                                            ampInvoice
+                                        }
+                                    });
+                                }}
+                            />
+                        </>
+                    )}
 
-                        {BackendUtils.supportsAMP() && (
-                            <>
-                                <Text
-                                    style={{
-                                        ...styles.secondaryText,
-                                        color: themeColor('secondaryText'),
-                                        top: 20
-                                    }}
-                                >
-                                    {localeString('views.Receive.ampInvoice')}
-                                </Text>
-                                <Switch
-                                    value={ampInvoice}
-                                    onValueChange={() =>
-                                        this.setState({
+                    {BackendUtils.isLNDBased() && (
+                        <>
+                            <Text
+                                style={{
+                                    ...styles.secondaryText,
+                                    color: themeColor('secondaryText'),
+                                    top: 20
+                                }}
+                            >
+                                {localeString('views.Receive.routeHints')}
+                            </Text>
+                            <Switch
+                                value={routeHints}
+                                onValueChange={async () => {
+                                    this.setState({
+                                        routeHints: !routeHints
+                                    });
+                                    await updateSettings({
+                                        invoices: {
+                                            addressType,
+                                            memo,
+                                            expiry,
+                                            routeHints: !routeHints,
+                                            ampInvoice
+                                        }
+                                    });
+                                }}
+                            />
+                        </>
+                    )}
+
+                    {BackendUtils.supportsAMP() && (
+                        <>
+                            <Text
+                                style={{
+                                    ...styles.secondaryText,
+                                    color: themeColor('secondaryText'),
+                                    top: 20
+                                }}
+                            >
+                                {localeString('views.Receive.ampInvoice')}
+                            </Text>
+                            <Switch
+                                value={ampInvoice}
+                                onValueChange={async () => {
+                                    this.setState({
+                                        ampInvoice: !ampInvoice
+                                    });
+                                    await updateSettings({
+                                        invoices: {
+                                            addressType,
+                                            memo,
+                                            expiry,
+                                            routeHints,
                                             ampInvoice: !ampInvoice
-                                        })
-                                    }
-                                />
-                            </>
-                        )}
-                    </View>
-                )}
+                                        }
+                                    });
+                                }}
+                            />
+                        </>
+                    )}
+                </View>
                 <ModalBox
                     style={{
                         backgroundColor: themeColor('background'),
@@ -298,8 +312,17 @@ export default class InvoicesSettings extends React.Component<
                     {_map(ADDRESS_TYPES, (d, index) => (
                         <TouchableOpacity
                             key={index}
-                            onPress={() => {
+                            onPress={async () => {
                                 this.setState({ addressType: d.value });
+                                await updateSettings({
+                                    invoices: {
+                                        addressType: d.value,
+                                        memo,
+                                        expiry,
+                                        routeHints,
+                                        ampInvoice
+                                    }
+                                });
                                 this.refs.modal.close();
                             }}
                             style={{
diff --git a/views/Settings/PaymentsSettings.tsx b/views/Settings/PaymentsSettings.tsx
index f65191f69..bca546cbe 100644
--- a/views/Settings/PaymentsSettings.tsx
+++ b/views/Settings/PaymentsSettings.tsx
@@ -6,7 +6,6 @@ import SettingsStore from '../../stores/SettingsStore';
 import { localeString } from '../../utils/LocaleUtils';
 import { themeColor } from '../../utils/ThemeUtils';
 
-import LoadingIndicator from '../../components/LoadingIndicator';
 import TextInput from '../../components/TextInput';
 
 interface PaymentsSettingsProps {
@@ -44,19 +43,6 @@ export default class PaymentsSettings extends React.Component<
         });
     }
 
-    handleSave = async () => {
-        const { feeLimitMethod, feeLimit, feePercentage } = this.state;
-        const { SettingsStore } = this.props;
-        const { updateSettings } = SettingsStore;
-        await updateSettings({
-            payments: {
-                defaultFeeMethod: feeLimitMethod,
-                defaultFeePercentage: feePercentage,
-                defaultFeeFixed: feeLimit
-            }
-        });
-    };
-
     renderSeparator = () => (
         <View
             style={{
@@ -67,15 +53,15 @@ export default class PaymentsSettings extends React.Component<
     );
 
     render() {
-        const { navigation, SettingsStore } = this.props;
+        const { navigation } = this.props;
         const { feeLimit, feeLimitMethod, feePercentage } = this.state;
-        const { loading }: any = SettingsStore;
+        const { SettingsStore } = this.props;
+        const { updateSettings } = SettingsStore;
 
         const BackButton = () => (
             <Icon
                 name="arrow-back"
                 onPress={() => {
-                    this.handleSave();
                     navigation.navigate('Settings', {
                         refresh: true
                     });
@@ -106,107 +92,113 @@ export default class PaymentsSettings extends React.Component<
                         borderBottomWidth: 0
                     }}
                 />
-                {loading ? (
-                    <LoadingIndicator />
-                ) : (
+                <View
+                    style={{
+                        padding: 20
+                    }}
+                >
+                    <Text
+                        style={{
+                            fontFamily: 'Lato-Regular',
+                            paddingTop: 5,
+                            color: themeColor('text')
+                        }}
+                    >
+                        {`${localeString(
+                            'views.Settings.Payments.defaultFeeLimit'
+                        )}`}
+                    </Text>
                     <View
                         style={{
-                            padding: 20
+                            flex: 1,
+                            flexWrap: 'wrap',
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            opacity: feeLimitMethod == 'percent' ? 1 : 0.25
+                        }}
+                    ></View>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            width: '95%'
                         }}
                     >
+                        <TextInput
+                            style={{
+                                width: '50%',
+                                opacity: feeLimitMethod == 'fixed' ? 1 : 0.25
+                            }}
+                            keyboardType="numeric"
+                            value={feeLimit}
+                            onChangeText={async (text: string) => {
+                                this.setState({
+                                    feeLimit: text
+                                });
+                                await updateSettings({
+                                    payments: {
+                                        defaultFeeMethod: 'fixed',
+                                        defaultFeePercentage: feePercentage,
+                                        defaultFeeFixed: text
+                                    }
+                                });
+                            }}
+                            onPressIn={() =>
+                                this.setState({
+                                    feeLimitMethod: 'fixed'
+                                })
+                            }
+                        />
                         <Text
                             style={{
                                 fontFamily: 'Lato-Regular',
                                 paddingTop: 5,
-                                color: themeColor('text')
+                                color: themeColor('text'),
+                                top: 28,
+                                right: 30,
+                                opacity: feeLimitMethod == 'fixed' ? 1 : 0.25
                             }}
                         >
-                            {`${localeString(
-                                'views.Settings.Payments.defaultFeeLimit'
-                            )}`}
+                            {`${localeString('general.sats')}`}
                         </Text>
-                        <View
+                        <TextInput
                             style={{
-                                flex: 1,
-                                flexWrap: 'wrap',
-                                flexDirection: 'row',
-                                justifyContent: 'flex-end',
+                                width: '50%',
                                 opacity: feeLimitMethod == 'percent' ? 1 : 0.25
                             }}
-                        ></View>
-                        <View
+                            keyboardType="numeric"
+                            value={feePercentage}
+                            onChangeText={async (text: string) => {
+                                this.setState({
+                                    feePercentage: text
+                                });
+                                await updateSettings({
+                                    payments: {
+                                        defaultFeeMethod: 'percent',
+                                        defaultFeePercentage: text,
+                                        defaultFeeFixed: feeLimit
+                                    }
+                                });
+                            }}
+                            onPressIn={() =>
+                                this.setState({
+                                    feeLimitMethod: 'percent'
+                                })
+                            }
+                        />
+                        <Text
                             style={{
-                                flexDirection: 'row',
-                                width: '95%'
+                                fontFamily: 'Lato-Regular',
+                                paddingTop: 5,
+                                color: themeColor('text'),
+                                top: 28,
+                                right: 18,
+                                opacity: feeLimitMethod == 'percent' ? 1 : 0.25
                             }}
                         >
-                            <TextInput
-                                style={{
-                                    width: '50%',
-                                    opacity:
-                                        feeLimitMethod == 'fixed' ? 1 : 0.25
-                                }}
-                                keyboardType="numeric"
-                                value={feeLimit}
-                                onChangeText={(text: string) =>
-                                    this.setState({
-                                        feeLimit: text
-                                    })
-                                }
-                                onPressIn={() =>
-                                    this.setState({
-                                        feeLimitMethod: 'fixed'
-                                    })
-                                }
-                            />
-                            <Text
-                                style={{
-                                    fontFamily: 'Lato-Regular',
-                                    paddingTop: 5,
-                                    color: themeColor('text'),
-                                    top: 28,
-                                    right: 30,
-                                    opacity:
-                                        feeLimitMethod == 'fixed' ? 1 : 0.25
-                                }}
-                            >
-                                {`${localeString('general.sats')}`}
-                            </Text>
-                            <TextInput
-                                style={{
-                                    width: '50%',
-                                    opacity:
-                                        feeLimitMethod == 'percent' ? 1 : 0.25
-                                }}
-                                keyboardType="numeric"
-                                value={feePercentage}
-                                onChangeText={(text: string) =>
-                                    this.setState({
-                                        feePercentage: text
-                                    })
-                                }
-                                onPressIn={() =>
-                                    this.setState({
-                                        feeLimitMethod: 'percent'
-                                    })
-                                }
-                            />
-                            <Text
-                                style={{
-                                    fontFamily: 'Lato-Regular',
-                                    paddingTop: 5,
-                                    color: themeColor('text'),
-                                    top: 28,
-                                    right: 18,
-                                    opacity:
-                                        feeLimitMethod == 'percent' ? 1 : 0.25
-                                }}
-                            >
-                                {'%'}
-                            </Text>
-                        </View>
+                            {'%'}
+                        </Text>
                     </View>
-                )}
+                </View>
             </View>
         );
     }