From b20b75f22e3eb0d3aa913a7237b44c2933787fb4 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Sun, 28 Feb 2021 22:49:55 +0100 Subject: [PATCH] Use flash message instead of toast --- package.json | 2 +- src/Screens.tsx | 14 +- src/components/Message.tsx | 100 +++++++++++++ src/components/Relationship/Incoming.tsx | 7 +- src/components/Relationship/Outgoing.tsx | 8 +- src/components/Timeline/Shared/Actions.tsx | 9 +- .../Timeline/Shared/HeaderConversation.tsx | 11 +- src/components/Timeline/Shared/Poll.tsx | 6 +- src/components/toast.tsx | 134 ------------------ src/screens/Actions/Account.tsx | 13 +- src/screens/Actions/Domain.tsx | 7 +- src/screens/Actions/Status.tsx | 7 +- yarn.lock | 35 ++--- 13 files changed, 154 insertions(+), 199 deletions(-) create mode 100644 src/components/Message.tsx delete mode 100644 src/components/toast.tsx diff --git a/package.json b/package.json index 8e183596..3677dd7b 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "react-native-blurhash": "^1.0.29", "react-native-fast-image": "^8.3.4", "react-native-feather": "^1.0.2", + "react-native-flash-message": "^0.1.23", "react-native-gesture-handler": "~1.9.0", "react-native-htmlview": "^0.16.0", "react-native-reanimated": "^2.0.0-rc.2", @@ -78,7 +79,6 @@ "react-native-swipe-list-view": "^3.2.6", "react-native-tab-view": "^2.15.2", "react-native-tab-view-viewpager-adapter": "^1.1.0", - "react-native-toast-message": "^1.4.3", "react-native-unimodules": "~0.12.0", "react-query": "^3.12.0", "react-redux": "^7.2.2", diff --git a/src/Screens.tsx b/src/Screens.tsx index 12f29d29..894d9757 100644 --- a/src/Screens.tsx +++ b/src/Screens.tsx @@ -1,4 +1,4 @@ -import { toast, toastConfig } from '@components/toast' +import { displayMessage, Message } from '@components/Message' import { NavigationContainer, NavigationContainerRef @@ -20,7 +20,6 @@ import React, { createRef, useCallback, useEffect, useRef } from 'react' import { useTranslation } from 'react-i18next' import { Alert, Platform, StatusBar } from 'react-native' import { createNativeStackNavigator } from 'react-native-screens/native-stack' -import Toast from 'react-native-toast-message' import { useDispatch, useSelector } from 'react-redux' import * as Sentry from 'sentry-expo' @@ -77,11 +76,12 @@ const Screens: React.FC = ({ localCorrupt }) => { useEffect(() => { const showLocalCorrect = () => { if (localCorrupt) { - toast({ - type: 'error', + displayMessage({ + autoHide: false, message: t('index.localCorrupt'), description: localCorrupt.length ? localCorrupt : undefined, - autoHide: false + type: 'error', + mode }) navigationRef.current?.navigate('Screen-Tabs', { screen: 'Tab-Me' @@ -178,9 +178,7 @@ const Screens: React.FC = ({ localCorrupt }) => { /> - {Platform.select({ - ios: - })} + ) diff --git a/src/components/Message.tsx b/src/components/Message.tsx new file mode 100644 index 00000000..6342b960 --- /dev/null +++ b/src/components/Message.tsx @@ -0,0 +1,100 @@ +import Icon from '@components/Icon' +import { StyleConstants } from '@utils/styles/constants' +import { useTheme } from '@utils/styles/ThemeManager' +import { getTheme } from '@utils/styles/themes' +import React from 'react' +import FlashMessage, { showMessage } from 'react-native-flash-message' +import haptics from './haptics' + +const displayMessage = ({ + autoHide = true, + message, + description, + onPress, + mode, + type +}: + | { + autoHide?: boolean + message: string + description?: string + onPress?: () => void + mode?: undefined + type?: undefined + } + | { + autoHide?: boolean + message: string + description?: string + onPress?: () => void + mode: 'light' | 'dark' + type: 'success' | 'error' | 'warning' + }) => { + enum iconMapping { + success = 'CheckCircle', + error = 'XCircle', + warning = 'AlertCircle' + } + enum colorMapping { + success = 'blue', + error = 'red', + warning = 'secondary' + } + + if (type && type === 'error') { + haptics('Error') + } + + showMessage({ + autoHide, + message, + description, + onPress, + ...(mode && + type && { + renderFlashMessageIcon: props => { + console.log(props) + return ( + + ) + } + }) + }) +} + +const Message = React.memo( + () => { + const { mode, theme } = useTheme() + + return ( + + ) + }, + () => true +) + +export { Message, displayMessage } diff --git a/src/components/Relationship/Incoming.tsx b/src/components/Relationship/Incoming.tsx index 5e39637e..0f5306a2 100644 --- a/src/components/Relationship/Incoming.tsx +++ b/src/components/Relationship/Incoming.tsx @@ -1,13 +1,14 @@ import analytics from '@components/analytics' import Button from '@components/Button' import haptics from '@components/haptics' -import { toast } from '@components/toast' +import { displayMessage } from '@components/Message' import { QueryKeyRelationship, useRelationshipMutation } from '@utils/queryHooks/relationship' import { QueryKeyTimeline } from '@utils/queryHooks/timeline' import { StyleConstants } from '@utils/styles/constants' +import { useTheme } from '@utils/styles/ThemeManager' import React from 'react' import { useTranslation } from 'react-i18next' import { StyleSheet, View } from 'react-native' @@ -18,6 +19,7 @@ export interface Props { } const RelationshipIncoming: React.FC = ({ id }) => { + const { mode } = useTheme() const { t } = useTranslation() const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }] @@ -36,8 +38,9 @@ const RelationshipIncoming: React.FC = ({ id }) => { }, onError: (err: any, { type }) => { haptics('Error') - toast({ + displayMessage({ type: 'error', + mode, message: t('common:toastMessage.error.message', { function: t(`relationship:${type}.function`) }), diff --git a/src/components/Relationship/Outgoing.tsx b/src/components/Relationship/Outgoing.tsx index 8665224c..230639d1 100644 --- a/src/components/Relationship/Outgoing.tsx +++ b/src/components/Relationship/Outgoing.tsx @@ -1,13 +1,14 @@ import analytics from '@components/analytics' import Button from '@components/Button' import haptics from '@components/haptics' -import { toast } from '@components/toast' +import { displayMessage } from '@components/Message' import { QueryKeyRelationship, useRelationshipMutation, useRelationshipQuery } from '@utils/queryHooks/relationship' import { QueryKeyTimeline } from '@utils/queryHooks/timeline' +import { useTheme } from '@utils/styles/ThemeManager' import React from 'react' import { useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' @@ -18,6 +19,7 @@ export interface Props { const RelationshipOutgoing = React.memo( ({ id }: Props) => { + const { mode } = useTheme() const { t } = useTranslation('componentRelationship') const query = useRelationshipQuery({ id }) @@ -37,8 +39,8 @@ const RelationshipOutgoing = React.memo( } }, onError: (err: any, { payload: { action } }) => { - haptics('Error') - toast({ + displayMessage({ + mode, type: 'error', message: t('common:toastMessage.error.message', { function: t(`${action}.function`) diff --git a/src/components/Timeline/Shared/Actions.tsx b/src/components/Timeline/Shared/Actions.tsx index 991b0e77..72f7a0c3 100644 --- a/src/components/Timeline/Shared/Actions.tsx +++ b/src/components/Timeline/Shared/Actions.tsx @@ -1,7 +1,6 @@ import analytics from '@components/analytics' -import haptics from '@components/haptics' import Icon from '@components/Icon' -import { toast } from '@components/toast' +import { displayMessage } from '@components/Message' import { useNavigation } from '@react-navigation/native' import { MutationVarsTimelineUpdateStatusProperty, @@ -32,7 +31,7 @@ const TimelineActions: React.FC = ({ }) => { const navigation = useNavigation() const { t } = useTranslation('componentTimeline') - const { theme } = useTheme() + const { mode, theme } = useTheme() const iconColor = theme.secondary const iconColorAction = (state: boolean) => state ? theme.primary : theme.secondary @@ -84,8 +83,8 @@ const TimelineActions: React.FC = ({ }, onError: (err: any, params, oldData) => { const correctParam = params as MutationVarsTimelineUpdateStatusProperty - haptics('Error') - toast({ + displayMessage({ + mode, type: 'error', message: t('common:toastMessage.error.message', { function: t( diff --git a/src/components/Timeline/Shared/HeaderConversation.tsx b/src/components/Timeline/Shared/HeaderConversation.tsx index 1911f45d..bc5f6341 100644 --- a/src/components/Timeline/Shared/HeaderConversation.tsx +++ b/src/components/Timeline/Shared/HeaderConversation.tsx @@ -1,8 +1,7 @@ import analytics from '@components/analytics' -import haptics from '@components/haptics' import Icon from '@components/Icon' +import { displayMessage } from '@components/Message' import { ParseEmojis } from '@components/Parse' -import { toast } from '@components/toast' import { QueryKeyTimeline, useTimelineMutation @@ -46,6 +45,7 @@ export interface Props { const HeaderConversation = React.memo( ({ queryKey, conversation }: Props) => { + const { mode } = useTheme() const { t } = useTranslation('componentTimeline') const queryClient = useQueryClient() @@ -53,8 +53,8 @@ const HeaderConversation = React.memo( queryClient, onMutate: true, onError: (err: any, _, oldData) => { - haptics('Error') - toast({ + displayMessage({ + mode, type: 'error', message: t('common:toastMessage.error.message', { function: t(`shared.header.conversation.delete.function`) @@ -65,8 +65,7 @@ const HeaderConversation = React.memo( err.data.error && typeof err.data.error === 'string' && { description: err.data.error - }), - autoHide: false + }) }) queryClient.setQueryData(queryKey, oldData) } diff --git a/src/components/Timeline/Shared/Poll.tsx b/src/components/Timeline/Shared/Poll.tsx index 1538b080..6b353936 100644 --- a/src/components/Timeline/Shared/Poll.tsx +++ b/src/components/Timeline/Shared/Poll.tsx @@ -2,9 +2,9 @@ import analytics from '@components/analytics' import Button from '@components/Button' import haptics from '@components/haptics' import Icon from '@components/Icon' +import { displayMessage } from '@components/Message' import { ParseEmojis } from '@components/Parse' import RelativeTime from '@components/RelativeTime' -import { toast } from '@components/toast' import { MutationVarsTimelineUpdateStatusProperty, QueryKeyTimeline, @@ -61,8 +61,8 @@ const TimelinePoll: React.FC = ({ }, onError: (err: any, params) => { const theParams = params as MutationVarsTimelineUpdateStatusProperty - haptics('Error') - toast({ + displayMessage({ + mode, type: 'error', message: t('common:toastMessage.error.message', { // @ts-ignore diff --git a/src/components/toast.tsx b/src/components/toast.tsx deleted file mode 100644 index 4616a125..00000000 --- a/src/components/toast.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import Icon from '@components/Icon' -import { StyleConstants } from '@utils/styles/constants' -import { useTheme } from '@utils/styles/ThemeManager' -import React from 'react' -import { Platform, StyleSheet, Text, ToastAndroid, View } from 'react-native' -import { SafeAreaView } from 'react-native-safe-area-context' -import Toast from 'react-native-toast-message' - -export interface Params { - type: 'success' | 'error' | 'warning' - position?: 'top' | 'bottom' - message: string - description?: string - autoHide?: boolean - onShow?: () => void - onHide?: () => void -} - -type Config = { - type: Params['type'] - position: Params['position'] - text1: Params['message'] - text2: Params['description'] -} - -const toast = ({ - type, - position = 'top', - message, - description, - autoHide = true, - onShow, - onHide -}: Params) => { - switch (Platform.OS) { - case 'ios': - return Toast.show({ - type, - position, - text1: message, - text2: description, - visibilityTime: 1500, - autoHide, - topOffset: 0, - bottomOffset: 0, - onShow: onShow, - onHide: onHide - }) - case 'android': - return ToastAndroid.show(message, ToastAndroid.SHORT) - } -} - -const ToastBase = ({ config }: { config: Config }) => { - const { theme } = useTheme() - const iconSet = { - success: 'CheckCircle', - error: 'XCircle', - warning: 'AlertCircle' - } - enum colorMapping { - success = 'blue', - error = 'red', - warning = 'secondary' - } - - return ( - - - - - - {config.text1} - - {config.text2 && ( - - {config.text2} - - )} - - - - ) -} - -const toastConfig = { - success: (config: Config) => , - warning: (config: Config) => , - error: (config: Config) => { - // Sentry.Native.captureException([config.text1, config.text2]) - return - } -} - -const styles = StyleSheet.create({ - base: { - width: '100%', - borderBottomWidth: 1 - }, - container: { - flex: 1, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - padding: StyleConstants.Spacing.M - }, - texts: { - marginLeft: StyleConstants.Spacing.S - }, - text1: { - ...StyleConstants.FontStyle.M - }, - text2: { - ...StyleConstants.FontStyle.S, - marginTop: StyleConstants.Spacing.XS - } -}) - -export { toast, toastConfig } diff --git a/src/screens/Actions/Account.tsx b/src/screens/Actions/Account.tsx index ef6379bb..f5531149 100644 --- a/src/screens/Actions/Account.tsx +++ b/src/screens/Actions/Account.tsx @@ -1,12 +1,12 @@ import analytics from '@components/analytics' -import haptics from '@components/haptics' import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu' -import { toast } from '@components/toast' +import { displayMessage } from '@components/Message' import { MutationVarsTimelineUpdateAccountProperty, QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timeline' +import { useTheme } from '@utils/styles/ThemeManager' import React from 'react' import { useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' @@ -24,6 +24,7 @@ const ActionsAccount: React.FC = ({ account, dismiss }) => { + const { mode } = useTheme() const { t } = useTranslation('componentTimeline') const queryClient = useQueryClient() @@ -31,8 +32,8 @@ const ActionsAccount: React.FC = ({ queryClient, onSuccess: (_, params) => { const theParams = params as MutationVarsTimelineUpdateAccountProperty - haptics('Success') - toast({ + displayMessage({ + mode, type: 'success', message: t('common:toastMessage.success.message', { function: t( @@ -46,8 +47,8 @@ const ActionsAccount: React.FC = ({ }, onError: (err: any, params) => { const theParams = params as MutationVarsTimelineUpdateAccountProperty - haptics('Error') - toast({ + displayMessage({ + mode, type: 'error', message: t('common:toastMessage.error.message', { function: t( diff --git a/src/screens/Actions/Domain.tsx b/src/screens/Actions/Domain.tsx index 6c0abe38..c8c23ad6 100644 --- a/src/screens/Actions/Domain.tsx +++ b/src/screens/Actions/Domain.tsx @@ -2,11 +2,12 @@ import analytics from '@components/analytics' import MenuContainer from '@components/Menu/Container' import MenuHeader from '@components/Menu/Header' import MenuRow from '@components/Menu/Row' -import { toast } from '@components/toast' +import { displayMessage } from '@components/Message' import { QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timeline' +import { useTheme } from '@utils/styles/ThemeManager' import React from 'react' import { useTranslation } from 'react-i18next' import { Alert } from 'react-native' @@ -25,12 +26,14 @@ const ActionsDomain: React.FC = ({ domain, dismiss }) => { + const { mode } = useTheme() const { t } = useTranslation('componentTimeline') const queryClient = useQueryClient() const mutation = useTimelineMutation({ queryClient, onSettled: () => { - toast({ + displayMessage({ + mode, type: 'success', message: t('common:toastMessage.success.message', { function: t(`shared.header.actions.domain.block.function`) diff --git a/src/screens/Actions/Status.tsx b/src/screens/Actions/Status.tsx index 48be0715..3f9f304f 100644 --- a/src/screens/Actions/Status.tsx +++ b/src/screens/Actions/Status.tsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next' import { Alert } from 'react-native' import { useQueryClient } from 'react-query' import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu' -import { toast } from '@components/toast' import { MutationVarsTimelineUpdateStatusProperty, QueryKeyTimeline, @@ -12,6 +11,8 @@ import { import analytics from '@components/analytics' import { StackNavigationProp } from '@react-navigation/stack' import deleteItem from '@utils/queryHooks/timeline/deleteItem' +import { displayMessage } from '@components/Message' +import { useTheme } from '@utils/styles/ThemeManager' export interface Props { navigation: StackNavigationProp @@ -28,6 +29,7 @@ const ActionsStatus: React.FC = ({ status, dismiss }) => { + const { mode } = useTheme() const { t } = useTranslation('componentTimeline') const queryClient = useQueryClient() @@ -39,7 +41,8 @@ const ActionsStatus: React.FC = ({ .payload ? (params as MutationVarsTimelineUpdateStatusProperty).payload.property : 'delete' - toast({ + displayMessage({ + mode, type: 'error', message: t('common:toastMessage.error.message', { function: t(`shared.header.actions.status.${theFunction}.function`) diff --git a/yarn.lock b/yarn.lock index 2965d42a..4f80d791 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4318,13 +4318,6 @@ escodegen@^1.11.1, escodegen@^1.14.1: optionalDependencies: source-map "~0.6.1" -eslint-plugin-prettier@^3.2.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7" - integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ== - dependencies: - prettier-linter-helpers "^1.0.0" - esprima@^4.0.0, esprima@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" @@ -4826,11 +4819,6 @@ fast-deep-equal@^3.1.1: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-diff@^1.1.2: - version "1.2.0" - resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" - integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== - fast-json-stable-stringify@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -8448,13 +8436,6 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= -prettier-linter-helpers@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" - integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== - dependencies: - fast-diff "^1.1.2" - pretty-format@^24.0.0, pretty-format@^24.7.0, pretty-format@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9" @@ -8677,6 +8658,14 @@ react-native-feather@^1.0.2: resolved "https://registry.yarnpkg.com/react-native-feather/-/react-native-feather-1.0.2.tgz#9b02a32f313088084da5ebb0130659fa582edf43" integrity sha512-SxMCMyGQeDtZtl2mhssoFTsfFKh/eH6S11+720BPGYYXz1iaYwQ4G/xqFxWOvQOQK2qtOTvkFOBlabbKwBMuhQ== +react-native-flash-message@^0.1.23: + version "0.1.23" + resolved "https://registry.yarnpkg.com/react-native-flash-message/-/react-native-flash-message-0.1.23.tgz#50a17201a2d9d6b22a2f174a97b22c30bff15638" + integrity sha512-T++KNGpIofXRqj3fT+/zJH/su1VgIjGcwiJerSvRsvEXwai1LdUl+O0tX7dz+Lgxi7yzswXKWcUQmY0dZrbG3g== + dependencies: + prop-types "^15.7.2" + react-native-iphone-x-helper "^1.3.0" + react-native-gesture-handler@~1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.9.0.tgz#e441b1c0277c3fd4ca3e5c58fdd681e2f0ceddf0" @@ -8750,14 +8739,6 @@ react-native-tab-view@^2.15.2: resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz#4bc7832d33a119306614efee667509672a7ee64e" integrity sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg== -react-native-toast-message@^1.4.3: - version "1.4.3" - resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-1.4.3.tgz#7cbbb942071bb216b760ba5bb7a9b996baf874e0" - integrity sha512-0LG3bMO3TfjntwVt7O4Dr0zzAZDbtkEe5Lg1jGR1Mevm0KGKnr57DCVZYPsu6cCc1iAk9whyc+iTKbKUz/ko7A== - dependencies: - eslint-plugin-prettier "^3.2.0" - prop-types "^15.7.2" - react-native-unimodules@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/react-native-unimodules/-/react-native-unimodules-0.12.0.tgz#f1c92eae92212ca44078c0991c78fa4d13fda0f8"