REF: Success screen uses hooks (#1831)

screen/send/success.js

@@ -1,19 +1,104 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef } from 'react';
 import LottieView from 'lottie-react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { View, StyleSheet } from 'react-native';
 import { Text } from 'react-native-elements';
 import { BlueButton, SafeBlueArea, BlueCard } from '../../BlueComponents';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
-import PropTypes from 'prop-types';
 import loc from '../../loc';
-import { BlueCurrentTheme } from '../../components/themes';
+import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+
+const Success = () => {
+  const { colors } = useTheme();
+  const { dangerouslyGetParent } = useNavigation();
+  const { amount, fee = 0, amountUnit = BitcoinUnit.BTC, invoiceDescription = '' } = useRoute().params;
+  const animationRef = useRef();
+  const stylesHook = StyleSheet.create({
+    root: {
+      backgroundColor: colors.elevated,
+    },
+    amountValue: {
+      color: colors.alternativeTextColor2,
+    },
+    amountUnit: {
+      color: colors.alternativeTextColor2,
+    },
+  });
+  useEffect(() => {
+    console.log('send/success - useEffect');
+    ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const pop = () => {
+    dangerouslyGetParent().pop();
+  };
+
+  useEffect(() => {
+    animationRef.current.reset();
+    animationRef.current.resume();
+  }, [colors]);
+
+  return (
+    <SafeBlueArea style={[styles.root, stylesHook.root]}>
+      <BlueCard style={styles.amout}>
+        {amount > 0 && (
+          <View style={styles.view}>
+            <Text style={[styles.amountValue, stylesHook.amountValue]}>{amount}</Text>
+            <Text style={[styles.amountUnit, stylesHook.amountUnit]}>{' ' + amountUnit}</Text>
+          </View>
+        )}
+        {fee > 0 && (
+          <Text style={styles.feeText}>
+            {loc.send.create_fee}: {fee} {BitcoinUnit.BTC}
+          </Text>
+        )}
+        {fee <= 0 && (
+          <Text numberOfLines={0} style={styles.feeText}>
+            {invoiceDescription}
+          </Text>
+        )}
+      </BlueCard>
+      <View style={styles.ready}>
+        <LottieView
+          style={styles.lottie}
+          source={require('../../img/bluenice.json')}
+          autoPlay
+          ref={animationRef}
+          loop={false}
+          colorFilters={[
+            {
+              keypath: 'spark',
+              color: colors.success,
+            },
+            {
+              keypath: 'circle',
+              color: colors.success,
+            },
+            {
+              keypath: 'Oval',
+              color: colors.successCheck,
+            },
+          ]}
+        />
+      </View>
+      <BlueCard>
+        <BlueButton onPress={pop} title={loc.send.success_done} />
+      </BlueCard>
+    </SafeBlueArea>
+  );
+};
+
+Success.navigationOptions = {
+  headerShown: false,
+  gesturesEnabled: false,
+};
+
+export default Success;
 
 const styles = StyleSheet.create({
   root: {
     flex: 1,
     paddingTop: 19,
-    backgroundColor: BlueCurrentTheme.colors.elevated,
   },
   amout: {
     alignItems: 'center',
@@ -26,12 +111,10 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
   },
   amountValue: {
-    color: BlueCurrentTheme.colors.alternativeTextColor2,
     fontSize: 36,
     fontWeight: '600',
   },
   amountUnit: {
-    color: BlueCurrentTheme.colors.alternativeTextColor2,
     fontSize: 16,
     marginHorizontal: 4,
     paddingBottom: 6,
@@ -61,92 +144,3 @@ const styles = StyleSheet.create({
     height: 400,
   },
 });
-
-export default class Success extends Component {
-  constructor(props) {
-    super(props);
-    console.log('send/success constructor');
-
-    this.state = {
-      amount: props.route.params.amount,
-      fee: props.route.params.fee || 0,
-      amountUnit: props.route.params.amountUnit || BitcoinUnit.BTC,
-      invoiceDescription: props.route.params.invoiceDescription || '',
-    };
-  }
-
-  componentDidMount() {
-    console.log('send/success - componentDidMount');
-    ReactNativeHapticFeedback.trigger('notificationSuccess', { ignoreAndroidSystemSettings: false });
-  }
-
-  render() {
-    return (
-      <SafeBlueArea style={styles.root}>
-        <BlueCard style={styles.amout}>
-          <View style={styles.view}>
-            <Text style={styles.amountValue}>{this.state.amount}</Text>
-            <Text style={styles.amountUnit}>{' ' + this.state.amountUnit}</Text>
-          </View>
-          {this.state.fee > 0 && (
-            <Text style={styles.feeText}>
-              {loc.send.create_fee}: {this.state.fee} {BitcoinUnit.BTC}
-            </Text>
-          )}
-          {this.state.fee <= 0 && (
-            <Text numberOfLines={0} style={styles.feeText}>
-              {this.state.invoiceDescription}
-            </Text>
-          )}
-        </BlueCard>
-        <View style={styles.ready}>
-          <LottieView
-            style={styles.lottie}
-            source={require('../../img/bluenice.json')}
-            autoPlay
-            loop={false}
-            colorFilters={[
-              {
-                keypath: 'spark',
-                color: BlueCurrentTheme.colors.success,
-              },
-              {
-                keypath: 'circle',
-                color: BlueCurrentTheme.colors.success,
-              },
-              {
-                keypath: 'Oval',
-                color: BlueCurrentTheme.colors.successCheck,
-              },
-            ]}
-          />
-        </View>
-        <BlueCard>
-          <BlueButton onPress={() => this.props.navigation.dangerouslyGetParent().pop()} title={loc.send.success_done} />
-        </BlueCard>
-      </SafeBlueArea>
-    );
-  }
-}
-
-Success.propTypes = {
-  navigation: PropTypes.shape({
-    goBack: PropTypes.func,
-    navigate: PropTypes.func,
-    dangerouslyGetParent: PropTypes.func,
-    state: PropTypes.shape({
-      params: PropTypes.shape({
-        amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        fee: PropTypes.number,
-      }),
-    }),
-  }),
-  route: PropTypes.shape({
-    params: PropTypes.object,
-  }),
-};
-
-Success.navigationOptions = {
-  headerShown: false,
-  gesturesEnabled: false,
-};