fix: add in-app-notif after a success backup account

Signed-off-by: clegirar <clemntgirard@gmail.com>
berty · Apr 5, 2022 · 5b5cebd · 5b5cebd
1 parent f127af2
commit 5b5cebd
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 63 deletions.
diff --git a/js/.eslintignore b/js/.eslintignore
@@ -128,4 +128,3 @@ osx/Berty.app
 .watchman-cookie*
 *.pb.*
 *.gen.*
-/packages/web-dev-app/
diff --git a/js/packages/components/settings/Accounts.tsx b/js/packages/components/settings/Accounts.tsx
@@ -19,6 +19,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { importAccountFromDocumentPicker } from '../pickerUtils'
 import { GenericAvatar } from '../avatars'
 import { UnifiedText } from '../shared-components/UnifiedText'
+import { withInAppNotification } from '@berty/polyfill/react-native-in-app-notification'
 
 const AccountButton: React.FC<beapi.account.IAccountMetadata> = ({
 	avatarCid,
@@ -92,67 +93,80 @@ const AccountButton: React.FC<beapi.account.IAccountMetadata> = ({
 	)
 }
 
-export const Accounts: ScreenFC<'Settings.Accounts'> = () => {
-	const [{}, { scaleSize }] = useStyles()
-	const colors = useThemeColor()
-	const ctx = useMessengerContext()
-	const reduxDispatch = useDispatch()
-	const { navigate } = useNavigation()
-	const { t }: { t: any } = useTranslation()
-	const selectedAccount = useSelector(selectSelectedAccount)
+export const Accounts: ScreenFC<'Settings.Accounts'> = withInAppNotification(
+	({ showNotification }: any) => {
+		const [{}, { scaleSize }] = useStyles()
+		const colors = useThemeColor()
+		const ctx = useMessengerContext()
+		const reduxDispatch = useDispatch()
+		const { navigate } = useNavigation()
+		const { t }: { t: any } = useTranslation()
+		const selectedAccount = useSelector(selectSelectedAccount)
 
-	const [accountsCollapse, setAccountsCollapse] = React.useState<boolean>(true)
+		const [accountsCollapse, setAccountsCollapse] = React.useState<boolean>(true)
 
-	return (
-		<View style={{ backgroundColor: colors['secondary-background'], flex: 1 }}>
-			<ScrollView
-				bounces={false}
-				contentContainerStyle={{ paddingBottom: 12 * scaleSize }}
-				showsVerticalScrollIndicator={false}
-			>
-				<Section>
-					<ButtonSettingV2
-						text='Backup'
-						last
-						onPress={() => exportAccountToFile(selectedAccount)}
-					/>
-				</Section>
-				<Section>
-					<ButtonSettingV2
-						text={t('settings.accounts.accounts-button')}
-						arrowIcon='arrow-ios-downward'
-						onPress={() => setAccountsCollapse(!accountsCollapse)}
-						last
-					/>
-					{!accountsCollapse &&
-						ctx.accounts
-							.sort((a, b) => pbDateToNum(a.creationDate) - pbDateToNum(b.creationDate))
-							.map(account => {
-								return <AccountButton key={account.accountId} {...account} />
-							})}
-				</Section>
-				<Section>
-					<ButtonSettingV2
-						text={t('settings.accounts.create-button')}
-						onPress={async () => {
-							await closeAccountWithProgress(ctx.dispatch, reduxDispatch)
-							reduxDispatch(setStateOnBoardingReady())
-						}}
-					/>
-					<ButtonSettingV2
-						text={t('settings.accounts.import-button')}
-						onPress={async () => await importAccountFromDocumentPicker(ctx)}
-					/>
-					<ButtonSettingV2 text={t('settings.accounts.link-button')} disabled last />
-				</Section>
-				<Section>
-					<ButtonSettingV2
-						text={t('settings.accounts.delete-button')}
-						onPress={() => navigate('Settings.DeleteAccount')}
-						last
-					/>
-				</Section>
-			</ScrollView>
-		</View>
-	)
-}
+		return (
+			<View style={{ backgroundColor: colors['secondary-background'], flex: 1 }}>
+				<ScrollView
+					bounces={false}
+					contentContainerStyle={{ paddingBottom: 12 * scaleSize }}
+					showsVerticalScrollIndicator={false}
+				>
+					<Section>
+						<ButtonSettingV2
+							text={t('settings.accounts.backup-button')}
+							last
+							onPress={async () => {
+								try {
+									await exportAccountToFile(selectedAccount)
+									showNotification({
+										title: t('settings.accounts.backup-notif-title'),
+										message: t('settings.accounts.backup-notif-desc'),
+										additionalProps: { type: 'message' },
+									})
+								} catch (e) {
+									console.warn('account backup failed:', e)
+								}
+							}}
+						/>
+					</Section>
+					<Section>
+						<ButtonSettingV2
+							text={t('settings.accounts.accounts-button')}
+							arrowIcon='arrow-ios-downward'
+							onPress={() => setAccountsCollapse(!accountsCollapse)}
+							last
+						/>
+						{!accountsCollapse &&
+							ctx.accounts
+								.sort((a, b) => pbDateToNum(a.creationDate) - pbDateToNum(b.creationDate))
+								.map(account => {
+									return <AccountButton key={account.accountId} {...account} />
+								})}
+					</Section>
+					<Section>
+						<ButtonSettingV2
+							text={t('settings.accounts.create-button')}
+							onPress={async () => {
+								await closeAccountWithProgress(ctx.dispatch, reduxDispatch)
+								reduxDispatch(setStateOnBoardingReady())
+							}}
+						/>
+						<ButtonSettingV2
+							text={t('settings.accounts.import-button')}
+							onPress={async () => await importAccountFromDocumentPicker(ctx)}
+						/>
+						<ButtonSettingV2 text={t('settings.accounts.link-button')} disabled last />
+					</Section>
+					<Section>
+						<ButtonSettingV2
+							text={t('settings.accounts.delete-button')}
+							onPress={() => navigate('Settings.DeleteAccount')}
+							last
+						/>
+					</Section>
+				</ScrollView>
+			</View>
+		)
+	},
+)
diff --git a/js/packages/i18n/locale/en-US/messages.json b/js/packages/i18n/locale/en-US/messages.json
@@ -173,6 +173,9 @@
 		},
 		"accounts": {
 			"title": "Accounts",
+			"backup-button": "Backup",
+			"backup-notif-title": "Success",
+			"backup-notif-desc": "Account was correctly backup!",
 			"accounts-button": "Accounts",
 			"create-button": "Create an account",
 			"import-button": "Import an account",