Override Alert.alert to use our custom Dialog component

Author: brunolemos

packages/components/src/components/AppProviders.tsx

@@ -6,6 +6,7 @@ import { AppearanceProvider } from '../libs/appearence'
 import { HelmetProvider } from '../libs/helmet'
 import { SafeAreaProvider } from '../libs/safe-area-view'
 import { configureStore } from '../redux/store'
+import { OverrideSystemDialog } from './common/OverrideSystemDialog'
 import { ColumnFiltersProvider } from './context/ColumnFiltersContext'
 import { ColumnFocusProvider } from './context/ColumnFocusContext'
 import { ColumnWidthProvider } from './context/ColumnWidthContext'
@@ -35,7 +36,10 @@ export function AppProviders(props: AppProvidersProps) {
                     <AppearanceProvider>
                       <ThemeProvider>
                         <SafeAreaProvider>
-                          <DialogProvider>{props.children}</DialogProvider>
+                          <DialogProvider>
+                            {props.children}
+                            <OverrideSystemDialog />
+                          </DialogProvider>
                         </SafeAreaProvider>
                       </ThemeProvider>
                     </AppearanceProvider>

packages/components/src/components/common/OverrideSystemDialog.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react'
+import { Alert as AlertOriginal } from 'react-native'
+
+import { useDialog } from '../context/DialogContext'
+
+const _alert = window.alert
+const _Alert = { alert: AlertOriginal.alert, prompt: AlertOriginal.prompt }
+
+export const OverrideSystemDialog = React.memo(() => {
+  const Dialog = useDialog()
+
+  useEffect(() => {
+    function alert(message?: string): void {
+      Dialog.show(undefined, message)
+    }
+    window.alert = alert
+
+    const Alert = {
+      alert: Dialog.show,
+      // prompt: Dialog.show,
+    }
+    AlertOriginal.alert = Alert.alert
+    // AlertOriginal.prompt = Alert.prompt
+
+    return () => {
+      if (window.alert === alert) window.alert = _alert
+
+      if (AlertOriginal.alert === Alert.alert)
+        AlertOriginal.alert = _Alert.alert
+
+      // if (AlertOriginal.prompt === Alert.prompt)
+      //   AlertOriginal.prompt = _Alert.prompt
+
+      Dialog.hide()
+    }
+  }, [])
+
+  return null
+})
+
+OverrideSystemDialog.displayName = 'OverrideSystemDialog'

packages/components/src/libs/confirm/index.ts

@@ -18,16 +18,16 @@ export const confirm: ConfirmFn = (
     title,
     message,
     [
-      {
-        text: cancelLabel || 'Cancel',
-        onPress: cancelCallback || (() => undefined),
-        style: 'cancel',
-      },
       {
         text: confirmLabel || 'Ok',
         onPress: confirmCallback || (() => undefined),
         style: destructive ? 'destructive' : undefined,
       },
+      {
+        text: cancelLabel || 'Cancel',
+        onPress: cancelCallback || (() => undefined),
+        style: 'cancel',
+      },
     ],
     { cancelable },
   )

packages/components/src/libs/confirm/index.web.ts

@@ -1,17 +1,34 @@
+import { Alert } from 'react-native'
+
 import { ConfirmFn } from './index.shared'
 
 export const confirm: ConfirmFn = (
   title,
   message,
-  { cancelCallback, confirmCallback },
+  {
+    cancelCallback,
+    cancelLabel,
+    cancelable = true,
+    confirmCallback,
+    confirmLabel,
+    destructive = false,
+  },
 ) => {
-  const _message = title && message ? `${title}\n${message}` : message || title
-
-  const result = window.confirm(_message)
-
-  if (result) {
-    if (confirmCallback) confirmCallback()
-  } else {
-    if (cancelCallback) cancelCallback()
-  }
+  Alert.alert(
+    title,
+    message,
+    [
+      {
+        text: confirmLabel || 'Ok',
+        onPress: confirmCallback || (() => undefined),
+        style: destructive ? 'destructive' : undefined,
+      },
+      {
+        text: cancelLabel || 'Cancel',
+        onPress: cancelCallback || (() => undefined),
+        style: 'cancel',
+      },
+    ],
+    { cancelable },
+  )
 }

packages/components/src/libs/prompt/index.ts

@@ -1,3 +1,5 @@
+import { Alert } from 'react-native'
+
 import { PromptButton, PromptOptions } from './index.shared'
 
 export function isSupported() {
@@ -11,5 +13,5 @@ export function prompt(
   _options?: PromptOptions,
 ) {
   console.error('[prompt] Not supported.')
-  if (__DEV__) alert('Prompt not supported.')
+  if (__DEV__) Alert.alert('Prompt not supported.')
 }

packages/components/src/libs/prompt/index.web.ts

@@ -1,3 +1,5 @@
+import { Alert } from 'react-native'
+
 import { Platform } from '../platform'
 import { PromptButton, PromptOptions } from './index.shared'
 
@@ -13,7 +15,7 @@ export function prompt(
 ) {
   if (!isSupported()) {
     console.error('[prompt] Not supported.')
-    if (__DEV__) alert('Prompt not supported.')
+    if (__DEV__) Alert.alert('Prompt not supported.')
     return
   }
 

packages/components/src/redux/sagas/subscriptions.ts

@@ -29,7 +29,7 @@ import {
 } from '@devhub/core'
 import { Octokit } from '@octokit/rest'
 import _ from 'lodash'
-import { AppState, InteractionManager } from 'react-native'
+import { Alert, AppState, InteractionManager } from 'react-native'
 import {
   actionChannel,
   all,
@@ -719,7 +719,7 @@ function* _markAllGitHubNotificationsAsReadOrUnread({
   try {
     yield octokit.activity.markAsRead({})
   } catch (error) {
-    alert(
+    Alert.alert(
       `Failed to mark all notifications as ${
         unread ? 'unread' : 'read'
       }. ${error}`,
@@ -794,18 +794,14 @@ function* onMarkEverythingAsReadWithConfirmation(
   >,
 ) {
   const confirmed = yield new Promise(resolve => {
-    confirm(
-      'Mark all columns as read?',
-      'Mark all items from all columns as read? This cannot be undone.',
-      {
-        confirmCallback() {
-          resolve(true)
-        },
-        cancelCallback() {
-          resolve(false)
-        },
+    confirm('Mark all columns as read?', 'This cannot be undone.', {
+      confirmCallback() {
+        resolve(true)
       },
-    )
+      cancelCallback() {
+        resolve(false)
+      },
+    })
   })
 
   if (!confirmed) return