diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -53,6 +53,7 @@ export const AppRouteName = 'App'; export const AppsRouteName = 'Apps'; export const BackgroundChatThreadListRouteName = 'BackgroundChatThreadList'; +export const BackupMenuRouteName = 'BackupMenu'; export const BlockListRouteName = 'BlockList'; export const BuildInfoRouteName = 'BuildInfo'; export const CalendarRouteName = 'Calendar'; @@ -223,6 +224,7 @@ +BlockList: void, +LinkedDevices: void, +SecondaryDeviceQRCodeScanner: void, + +BackupMenu: void, }; export type CommunityDrawerParamList = { +TabNavigator: void }; diff --git a/native/profile/backup-menu.react.js b/native/profile/backup-menu.react.js new file mode 100644 --- /dev/null +++ b/native/profile/backup-menu.react.js @@ -0,0 +1,82 @@ +// @flow + +import * as React from 'react'; +import { Switch, Text, View } from 'react-native'; +import { ScrollView } from 'react-native-gesture-handler'; +import { useDispatch } from 'react-redux'; + +import { setLocalSettingsActionType } from '../redux/action-types.js'; +import { useSelector } from '../redux/redux-utils.js'; +import { useStyles } from '../themes/colors.js'; + +// eslint-disable-next-line no-unused-vars +function BackupMenu(props: { ... }): React.Node { + const styles = useStyles(unboundStyles); + const dispatch = useDispatch(); + + const isBackupEnabled = useSelector( + state => state.localSettings.isBackupEnabled, + ); + + const onBackupToggled = React.useCallback( + value => { + dispatch({ + type: setLocalSettingsActionType, + payload: { isBackupEnabled: value }, + }); + }, + [dispatch], + ); + + return ( + + SETTINGS + + + Toggle automatic backup + + + + + ); +} + +const unboundStyles = { + scrollViewContentContainer: { + paddingTop: 24, + }, + scrollView: { + backgroundColor: 'panelBackground', + }, + section: { + backgroundColor: 'panelForeground', + borderBottomWidth: 1, + borderColor: 'panelForegroundBorder', + borderTopWidth: 1, + marginBottom: 24, + marginVertical: 2, + }, + header: { + color: 'panelBackgroundLabel', + fontSize: 12, + fontWeight: '400', + paddingBottom: 3, + paddingHorizontal: 24, + }, + submenuButton: { + flexDirection: 'row', + paddingHorizontal: 24, + paddingVertical: 10, + alignItems: 'center', + }, + submenuText: { + color: 'panelForegroundLabel', + flex: 1, + fontSize: 16, + }, +}; + +export default BackupMenu; diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js --- a/native/profile/profile-screen.react.js +++ b/native/profile/profile-screen.react.js @@ -36,6 +36,7 @@ PrivacyPreferencesRouteName, DefaultNotificationsPreferencesRouteName, LinkedDevicesRouteName, + BackupMenuRouteName, } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { type Colors, useColors, useStyles } from '../themes/colors.js'; @@ -86,7 +87,7 @@ } render() { - let developerTools, defaultNotifications; + let developerTools, defaultNotifications, backupMenu; const { staffCanSee } = this.props; if (staffCanSee) { developerTools = ( @@ -99,6 +100,10 @@ onPress={this.onPressDefaultNotifications} /> ); + + backupMenu = ( + + ); } let passwordEditionUI; @@ -170,6 +175,7 @@ {defaultNotifications} + {backupMenu} {linkedDevices} @@ -301,6 +307,10 @@ onPressBlockList = () => { this.navigateIfActive(BlockListRouteName); }; + + onPressBackupMenu = () => { + this.navigateIfActive(BackupMenuRouteName); + }; } const unboundStyles = { diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js --- a/native/profile/profile.react.js +++ b/native/profile/profile.react.js @@ -10,6 +10,7 @@ import { View, useWindowDimensions } from 'react-native'; import AppearancePreferences from './appearance-preferences.react.js'; +import BackupMenu from './backup-menu.react.js'; import BuildInfo from './build-info.react.js'; import DefaultNotificationsPreferences from './default-notifications-preferences.react.js'; import DeleteAccount from './delete-account.react.js'; @@ -41,6 +42,7 @@ BlockListRouteName, LinkedDevicesRouteName, SecondaryDeviceQRCodeScannerRouteName, + BackupMenuRouteName, type ScreenParamList, type ProfileParamList, } from '../navigation/route-names.js'; @@ -59,6 +61,7 @@ // eslint-disable-next-line react/display-name headerRight: () => , }; +const backupMenuOptions = { headerTitle: 'Backup menu' }; const secondaryDeviceQRCodeScannerOptions = { headerTitle: '', headerBackTitleVisible: false, @@ -148,6 +151,11 @@ component={LinkedDevices} options={linkedDevicesOptions} /> +