create Alert.tsx and Alert.web.tsx and replace uses (#513)

4 files changed, 44 insertions, 26 deletions

diff --git a/src/lib/hooks/usePermissions.ts b/src/lib/hooks/usePermissions.ts
index 7849949c5..ffd850e80 100644
--- a/src/lib/hooks/usePermissions.ts
+++ b/src/lib/hooks/usePermissions.ts
@@ -1,8 +1,8 @@
-import {Alert} from 'react-native'
 import {Camera} from 'expo-camera'
 import * as MediaLibrary from 'expo-media-library'
 import {Linking} from 'react-native'
 import {isWeb} from 'platform/detection'
+import {Alert} from 'view/com/util/Alert'
 
 const openSettings = () => {
   Linking.openURL('app-settings:')
diff --git a/src/view/com/util/Alert.tsx b/src/view/com/util/Alert.tsx
new file mode 100644
index 000000000..e91640dcd
--- /dev/null
+++ b/src/view/com/util/Alert.tsx
@@ -0,0 +1 @@
+export {Alert} from 'react-native'
diff --git a/src/view/com/util/Alert.web.tsx b/src/view/com/util/Alert.web.tsx
new file mode 100644
index 000000000..94ccc7e43
--- /dev/null
+++ b/src/view/com/util/Alert.web.tsx
@@ -0,0 +1,23 @@
+import {AlertButton, AlertStatic} from 'react-native'
+
+class WebAlert implements Pick<AlertStatic, 'alert'> {
+  public alert(title: string, message?: string, buttons?: AlertButton[]): void {
+    if (buttons === undefined || buttons.length === 0) {
+      window.alert([title, message].filter(Boolean).join('\n'))
+      return
+    }
+
+    const result = window.confirm([title, message].filter(Boolean).join('\n'))
+
+    if (result === true) {
+      const confirm = buttons.find(({style}) => style !== 'cancel')
+      confirm?.onPress?.()
+      return
+    }
+
+    const cancel = buttons.find(({style}) => style === 'cancel')
+    cancel?.onPress?.()
+  }
+}
+
+export const Alert = new WebAlert()
diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx
index db8ee98ba..f957a45e0 100644
--- a/src/view/screens/AppPasswords.tsx
+++ b/src/view/screens/AppPasswords.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {Alert, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Alert} from 'view/com/util/Alert'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ScrollView} from 'react-native-gesture-handler'
 import {Text} from '../com/util/text/Text'
@@ -159,31 +160,24 @@ function AppPassword({
   const store = useStores()
 
   const onDelete = React.useCallback(async () => {
-    if (isDesktopWeb) {
-      if (confirm('Delete app password?')) {
-        await store.me.deleteAppPassword(name)
-        Toast.show('App password deleted')
-      }
-    } else {
-      Alert.alert(
-        'Delete App Password',
-        `Are you sure you want to delete the app password "${name}"?`,
-        [
-          {
-            text: 'Cancel',
-            style: 'cancel',
+    Alert.alert(
+      'Delete App Password',
+      `Are you sure you want to delete the app password "${name}"?`,
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            await store.me.deleteAppPassword(name)
+            Toast.show('App password deleted')
           },
-          {
-            text: 'Delete',
-            style: 'destructive',
-            onPress: async () => {
-              await store.me.deleteAppPassword(name)
-              Toast.show('App password deleted')
-            },
-          },
-        ],
-      )
-    }
+        },
+      ],
+    )
   }, [store, name])
 
   return (