From 10718989dd8bb22fa3d389553402fcfad40463ce Mon Sep 17 00:00:00 2001 From: Jason Frerich Date: Sun, 4 Dec 2022 20:46:40 -0600 Subject: [PATCH] Add ability to pass values to snackbar messages --- app/constants/snack_bar.ts | 14 ++++++++++++++ .../channel_add_people/channel_add_people.tsx | 2 ++ app/screens/snack_bar/index.tsx | 16 +++++++++------- app/utils/snack_bar/index.ts | 18 +++++++++++++++++- assets/base/i18n/en.json | 2 ++ 5 files changed, 44 insertions(+), 8 deletions(-) diff --git a/app/constants/snack_bar.ts b/app/constants/snack_bar.ts index 79a0a5c302..761946eb0f 100644 --- a/app/constants/snack_bar.ts +++ b/app/constants/snack_bar.ts @@ -5,6 +5,8 @@ import {t} from '@i18n'; import keyMirror from '@utils/key_mirror'; export const SNACK_BAR_TYPE = keyMirror({ + ADD_CHANNEL_MEMBER: null, + ADD_CHANNEL_MEMBERS: null, FAVORITE_CHANNEL: null, LINK_COPIED: null, MESSAGE_COPIED: null, @@ -21,6 +23,18 @@ type SnackBarConfig = { }; export const SNACK_BAR_CONFIG: Record = { + ADD_CHANNEL_MEMBER: { + id: t('snack.bar.channel.member.added'), + defaultMessage: '1 member added', + iconName: 'check', + canUndo: false, + }, + ADD_CHANNEL_MEMBERS: { + id: t('snack.bar.channel.members.added'), + defaultMessage: '{numMembers} members added', + iconName: 'check', + canUndo: false, + }, FAVORITE_CHANNEL: { id: t('snack.bar.favorited.channel'), defaultMessage: 'This channel was favorited', diff --git a/app/screens/channel_add_people/channel_add_people.tsx b/app/screens/channel_add_people/channel_add_people.tsx index a4a80e0cab..1b29171874 100644 --- a/app/screens/channel_add_people/channel_add_people.tsx +++ b/app/screens/channel_add_people/channel_add_people.tsx @@ -20,6 +20,7 @@ import {useModalPosition} from '@hooks/device'; import {t} from '@i18n'; import {popTopScreen} from '@screens/navigation'; import {alertErrorWithFallback} from '@utils/draft'; +import {showAddChannelMembersSnackbar} from '@utils/snack_bar'; import {changeOpacity, getKeyboardAppearanceFromTheme} from '@utils/theme'; import {filterProfilesMatchingTerm} from '@utils/user'; @@ -171,6 +172,7 @@ export default function ChannelAddPeople({ if (success) { close(); + showAddChannelMembersSnackbar(idsToUse); } else { setStartingAddPeople(false); } diff --git a/app/screens/snack_bar/index.tsx b/app/screens/snack_bar/index.tsx index 9d28a2b6fa..7163bfc5bd 100644 --- a/app/screens/snack_bar/index.tsx +++ b/app/screens/snack_bar/index.tsx @@ -24,6 +24,7 @@ import {TABLET_SIDEBAR_WIDTH} from '@constants/view'; import {useTheme} from '@context/theme'; import {useIsTablet} from '@hooks/device'; import {dismissOverlay} from '@screens/navigation'; +import {ShowSnackBarArgs} from '@utils/snack_bar'; import {makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; @@ -72,14 +73,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { type SnackBarProps = { componentId: string; - onAction?: () => void; - barType: keyof typeof SNACK_BAR_TYPE; sourceScreen: typeof Screens[keyof typeof Screens]; -} +} & ShowSnackBarArgs; -const SnackBar = ({barType, componentId, onAction, sourceScreen}: SnackBarProps) => { +const SnackBar = ({barType, componentId, messageValues = {}, onAction, sourceScreen}: SnackBarProps) => { const [showSnackBar, setShowSnackBar] = useState(); - const intl = useIntl(); + const {formatMessage} = useIntl(); const theme = useTheme(); const isTablet = useIsTablet(); const {width: windowWidth, height: windowHeight} = useWindowDimensions(); @@ -241,14 +240,17 @@ const SnackBar = ({barType, componentId, onAction, sourceScreen}: SnackBarProps) {config.canUndo && onAction && ( - {intl.formatMessage({ + {formatMessage({ id: 'snack.bar.undo', defaultMessage: 'Undo', })} diff --git a/app/utils/snack_bar/index.ts b/app/utils/snack_bar/index.ts index 0ccbc70e54..8d0123f166 100644 --- a/app/utils/snack_bar/index.ts +++ b/app/utils/snack_bar/index.ts @@ -4,10 +4,15 @@ import {Screens} from '@constants'; import {SNACK_BAR_TYPE} from '@constants/snack_bar'; import {showOverlay} from '@screens/navigation'; -type ShowSnackBarArgs = { +type AddChannelMemberValues = { + numMembers: number; +}; + +export type ShowSnackBarArgs = { barType: keyof typeof SNACK_BAR_TYPE; onAction?: () => void; sourceScreen?: typeof Screens[keyof typeof Screens]; + messageValues?: AddChannelMemberValues | {}; }; export const showSnackBar = (passProps: ShowSnackBarArgs) => { @@ -28,3 +33,14 @@ export const showFavoriteChannelSnackbar = (favorited: boolean, onAction: () => barType: favorited ? SNACK_BAR_TYPE.FAVORITE_CHANNEL : SNACK_BAR_TYPE.UNFAVORITE_CHANNEL, }); }; + +export const showAddChannelMembersSnackbar = (ids: string[]) => { + const plural = SNACK_BAR_TYPE.ADD_CHANNEL_MEMBERS; + const singular = SNACK_BAR_TYPE.ADD_CHANNEL_MEMBER; + + return showSnackBar({ + barType: ids.length > 1 ? plural : singular, + sourceScreen: Screens.CHANNEL_ADD_PEOPLE, + messageValues: {numMembers: ids.length}, + }); +}; diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 95f350f5eb..ed7367b86a 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -857,6 +857,8 @@ "share_feedback.title": "Would you share your feedback?", "smobile.search.recent_title": "Recent searches in {teamName}", "snack.bar.favorited.channel": "This channel was favorited", + "snack.bar.channel.member.added": "member addeed", + "snack.bar.channel.members.added": "members addeed", "snack.bar.link.copied": "Link copied to clipboard", "snack.bar.message.copied": "Text copied to clipboard", "snack.bar.mute.channel": "This channel was muted",