feat: Added X icon to base toast component that self dismisses (#1315)

Signed-off-by: al-rosenthal <[email protected]>
openwallet-foundation · Nov 19, 2024 · a0b2f85 · a0b2f85
1 parent 0cb0d17
commit a0b2f85
Show file tree

Hide file tree

Showing 4 changed files with 533 additions and 224 deletions.
diff --git a/packages/legacy/core/App/components/network/NetInfo.tsx b/packages/legacy/core/App/components/network/NetInfo.tsx
@@ -1,38 +1,47 @@
 import * as React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Toast from 'react-native-toast-message'
 import { useNetwork } from '../../contexts/network'
+import { ToastType } from '../../components/toast/BaseToast'
 
 const NetInfo: React.FC = () => {
   const { silentAssertConnectedNetwork, assertNetworkReachable } = useNetwork()
   const { t } = useTranslation()
+  const [hasShown, setHasShown] = useState(false)
 
   const isConnected = silentAssertConnectedNetwork()
-
   useEffect(() => {
+    // Network is connected
     if (isConnected) {
+      // Assert that internet is available
       assertNetworkReachable().then((status) => {
+        // Connected to a network, reset toast
+        setHasShown(false)
         if (status) {
           return
         }
 
+        // User is connected to a network but has no internet, display toast
         Toast.show({
-          type: 'warn',
-          autoHide: false,
-          text1: t('NetInfo.NoInternetConnectionMessage'),
+          type: ToastType.Error,
+          autoHide: true,
+          text1: t('NetInfo.NoInternetConnectionTitle'),
         })
       })
-
       return
     }
 
-    Toast.show({
-      type: 'error',
-      autoHide: true,
-      text1: t('NetInfo.NoInternetConnectionTitle'),
-    })
-  }, [isConnected, assertNetworkReachable, t])
+    // Only show the toast if the user hasn't seen it already
+    if (!hasShown) {
+      setHasShown(true)
+      Toast.show({
+        type: ToastType.Error,
+        autoHide: true,
+        text1: t('NetInfo.NoInternetConnectionTitle'),
+      })
+    }
+  }, [isConnected, assertNetworkReachable, t, hasShown])
 
   return null
 }

diff --git a/packages/legacy/core/App/components/toast/BaseToast.tsx b/packages/legacy/core/App/components/toast/BaseToast.tsx
@@ -5,6 +5,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons'
 import { useTheme } from '../../contexts/theme'
 import { GenericFn } from '../../types/fn'
 import { testIdWithKey } from '../../utils/testable'
+import Toast from 'react-native-toast-message'
 
 interface BaseToastProps {
   title?: string
@@ -96,14 +97,27 @@ const BaseToast: React.FC<BaseToastProps> = ({ title, body, toastType, onPress =
   return (
     <TouchableOpacity activeOpacity={1} onPress={() => onPress()}>
       <View style={[styles.container, { backgroundColor, borderColor, width: width - width * 0.1 }]}>
-        <Icon style={styles.icon} name={iconName} color={iconColor} size={iconSize} />
-        <View style={styles.textContainer}>
-          <Text style={[TextTheme.normal, styles.title, { color: textColor }]} testID={testIdWithKey('ToastTitle')}>
-            {title}
-          </Text>
-          <Text style={[TextTheme.normal, styles.body, { color: textColor }]} testID={testIdWithKey('ToastBody')}>
-            {body}
-          </Text>
+        <View style={{ flex: 1, flexDirection: 'row' }}>
+          <Icon style={styles.icon} name={iconName} color={iconColor} size={iconSize} />
+          <View style={styles.textContainer}>
+            <Text style={[TextTheme.normal, styles.title, { color: textColor }]} testID={testIdWithKey('ToastTitle')}>
+              {title}
+            </Text>
+            {body && (
+              <Text style={[TextTheme.normal, styles.body, { color: textColor }]} testID={testIdWithKey('ToastBody')}>
+                {body}
+              </Text>
+            )}
+          </View>
+        </View>
+        <View>
+          <TouchableOpacity
+            onPress={() => {
+              Toast.hide()
+            }}
+          >
+            <Icon style={styles.icon} name={'close'} color={iconColor} size={iconSize} />
+          </TouchableOpacity>
         </View>
       </View>
     </TouchableOpacity>

diff --git a/packages/legacy/core/__tests__/components/BaseToast.test.tsx b/packages/legacy/core/__tests__/components/BaseToast.test.tsx
@@ -51,4 +51,10 @@ describe('BaseToast Component', () => {
 
     expect(tree).toMatchSnapshot()
   })
+
+  test('Toast Renders without body text', () => {
+    const tree = render(<BaseToast title={'Hello World'} toastType={ToastType.Error} />)
+    const bodyText = tree.queryByTestId('ToastBody')
+    expect(bodyText).toBeNull()
+  })
 })