octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Added push server error messaging

Browse Source 
Also clean up <Message> component
This commit is contained in:
xmflsct
2022-12-05 23:15:07 +01:00
parent c4f825e087
commit 1f2e34e9da
24 changed files with 223 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/Message.tsx
View File

@ -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 }