Add ability to pass values to snackbar messages

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<string, SnackBarConfig> = {
+    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',

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);
         }

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<boolean | undefined>();
-    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)
                     <Toast
                         animatedStyle={snackBarStyle}
                         iconName={config.iconName}
-                        message={intl.formatMessage({id: config.id, defaultMessage: config.defaultMessage})}
+                        message={formatMessage({
+                            id: config.id,
+                            defaultMessage: config.defaultMessage,
+                        }, messageValues)}
                         style={[styles.toast, barType === SNACK_BAR_TYPE.LINK_COPIED && {backgroundColor: theme.onlineIndicator}]}
                         textStyle={styles.text}
                     >
                         {config.canUndo && onAction && (
                             <TouchableOpacity onPress={onUndoPressHandler}>
                                 <Text style={styles.undo}>
-                                    {intl.formatMessage({
+                                    {formatMessage({
                                         id: 'snack.bar.undo',
                                         defaultMessage: 'Undo',
                                     })}

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},
+    });
+};

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",