Added push server error messaging

Also clean up <Message> component

src/components/Message.tsx

@@ -1,10 +1,9 @@
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { getColors, Theme } from '@utils/styles/themes'
 import React, { RefObject } from 'react'
 import { AccessibilityInfo } from 'react-native'
-import FlashMessage, { hideMessage, showMessage } from 'react-native-flash-message'
+import FlashMessage, { MessageType, showMessage } from 'react-native-flash-message'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import haptics from './haptics'
 
@@ -15,107 +14,80 @@ const displayMessage = ({
   message,
   description,
   onPress,
-  theme,
   type
-}:
-  | {
-      ref?: RefObject<FlashMessage>
-      duration?: 'short' | 'long'
-      autoHide?: boolean
-      message: string
-      description?: string
-      onPress?: () => void
-      theme?: undefined
-      type?: undefined
-    }
-  | {
-      ref?: RefObject<FlashMessage>
-      duration?: 'short' | 'long'
-      autoHide?: boolean
-      message: string
-      description?: string
-      onPress?: () => void
-      theme: Theme
-      type: 'success' | 'error' | 'warning'
-    }) => {
+}: {
+  ref?: RefObject<FlashMessage>
+  duration?: 'short' | 'long'
+  autoHide?: boolean
+  message: string
+  description?: string
+  onPress?: () => void
+  type?: MessageType
+}) => {
   AccessibilityInfo.announceForAccessibility(message + '.' + description)
 
-  enum iconMapping {
-    success = 'CheckCircle',
-    error = 'XCircle',
-    warning = 'AlertCircle'
-  }
-  enum colorMapping {
-    success = 'blue',
-    error = 'red',
-    warning = 'secondary'
-  }
-
-  if (type && type === 'error') {
+  if (type && type === 'danger') {
     haptics('Error')
   }
 
   if (ref) {
     ref.current?.showMessage({
-      duration: type === 'error' ? 8000 : duration === 'short' ? 3000 : 5000,
+      duration: type === 'danger' ? 8000 : duration === 'short' ? 3000 : 5000,
       autoHide,
       message,
       description,
       onPress,
-      ...(theme &&
-        type && {
-          renderFlashMessageIcon: () => {
-            return (
-              <Icon
-                name={iconMapping[type]}
-                size={StyleConstants.Font.LineHeight.M}
-                color={getColors(theme)[colorMapping[type]]}
-                style={{ marginRight: StyleConstants.Spacing.S }}
-              />
-            )
-          }
-        })
+      type
     })
   } else {
     showMessage({
-      duration: type === 'error' ? 8000 : duration === 'short' ? 3000 : 5000,
+      duration: type === 'danger' ? 8000 : duration === 'short' ? 3000 : 5000,
       autoHide,
       message,
       description,
       onPress,
-      ...(theme &&
-        type && {
-          renderFlashMessageIcon: () => {
-            return (
-              <Icon
-                name={iconMapping[type]}
-                size={StyleConstants.Font.LineHeight.M}
-                color={getColors(theme)[colorMapping[type]]}
-                style={{ marginRight: StyleConstants.Spacing.S }}
-              />
-            )
-          }
-        })
+      type
     })
   }
 }
 
-const removeMessage = () => {
-  // if (ref) {
-  //   ref.current?.hideMessage()
-  // } else {
-  hideMessage()
-  // }
-}
-
 const Message = React.forwardRef<FlashMessage>((_, ref) => {
   const { colors, theme } = useTheme()
   const insets = useSafeAreaInsets()
 
+  enum iconMapping {
+    success = 'CheckCircle',
+    danger = 'XCircle',
+    warning = 'AlertCircle',
+    none = '',
+    default = '',
+    info = '',
+    auto = ''
+  }
+  enum colorMapping {
+    success = 'blue',
+    danger = 'red',
+    warning = 'secondary',
+    none = 'secondary',
+    default = 'secondary',
+    info = 'secondary',
+    auto = 'secondary'
+  }
+
   return (
     <FlashMessage
       ref={ref}
       icon='auto'
+      renderFlashMessageIcon={type => {
+        return typeof type === 'string' && ['success', 'danger', 'warning'].includes(type) ? (
+          <Icon
+            name={iconMapping[type]}
+            size={StyleConstants.Font.LineHeight.M}
+            color={colors[colorMapping[type]]}
+            style={{ marginRight: StyleConstants.Spacing.S }}
+          />
+        ) : null
+      }}
       position='top'
       floating
       style={{
@@ -142,4 +114,4 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
   )
 })
 
-export { Message, displayMessage, removeMessage }
+export { Message, displayMessage }

src/components/contextMenu/account.ts

@@ -14,7 +14,6 @@ import {
   useTimelineMutation
 } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
-import { useTheme } from '@utils/styles/ThemeManager'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
@@ -38,7 +37,6 @@ const menuAccount = ({
 
   const navigation =
     useNavigation<NativeStackNavigationProp<TabSharedStackParamList, any, undefined>>()
-  const { theme } = useTheme()
   const { t } = useTranslation('componentContextMenu')
 
   const menus: ContextMenu[][] = [[]]
@@ -60,7 +58,6 @@ const menuAccount = ({
       queryClient.refetchQueries(['Relationship', { id: account.id }])
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({
-        theme,
         type: 'success',
         message: t('common:message.success.message', {
           function: t(`account.${theParams.payload.property}.action`, {
@@ -74,8 +71,7 @@ const menuAccount = ({
     onError: (err: any, params) => {
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({
-        theme,
-        type: 'error',
+        type: 'danger',
         message: t('common:message.error.message', {
           function: t(`account.${theParams.payload.property}.action`, {
             ...(theParams.payload.property !== 'reports' && {
@@ -109,8 +105,7 @@ const menuAccount = ({
     },
     onError: (err: any, { payload: { action } }) => {
       displayMessage({
-        theme,
-        type: 'error',
+        type: 'danger',
         message: t('common:message.error.message', {
           function: t(`${action}.function`)
         }),

src/components/contextMenu/instance.ts

@@ -1,7 +1,6 @@
 import { displayMessage } from '@components/Message'
 import { QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timeline'
 import { getInstanceUrl } from '@utils/slices/instancesSlice'
-import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
 import { useQueryClient } from 'react-query'
@@ -18,14 +17,12 @@ const menuInstance = ({
 }): ContextMenu[][] => {
   if (!status || !queryKey) return []
 
-  const { theme } = useTheme()
   const { t } = useTranslation('componentContextMenu')
 
   const queryClient = useQueryClient()
   const mutation = useTimelineMutation({
     onSettled: () => {
       displayMessage({
-        theme,
         type: 'success',
         message: t('common:message.success.message', {
           function: t(`instance.block.action`, { instance })

src/components/contextMenu/share.ts

@@ -1,6 +1,5 @@
 import { displayMessage } from '@components/Message'
 import Clipboard from '@react-native-clipboard/clipboard'
-import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
 import { Platform, Share } from 'react-native'
 
@@ -22,7 +21,6 @@ const menuShare = (
 ): ContextMenu[][] => {
   if (params.type === 'status' && params.visibility === 'direct') return []
 
-  const { theme } = useTheme()
   const { t } = useTranslation('componentContextMenu')
 
   const menus: ContextMenu[][] = [[]]
@@ -56,11 +54,7 @@ const menuShare = (
       item: {
         onSelect: () => {
           Clipboard.setString(params.copiableContent?.current.content || '')
-          displayMessage({
-            theme,
-            type: 'success',
-            message: t(`copy.succeed`)
-          })
+          displayMessage({ type: 'success', message: t(`copy.succeed`) })
         },
         disabled: false,
         destructive: false,