Page MenuHomePhabricator
Files F3574486

D12647.id41930.diff
No OneTemporary
Actions

D12647.id41930.diff
View Options

diff --git a/native/chat/settings/thread-settings-notifications.react.js b/native/chat/settings/thread-settings-notifications.react.js
--- a/native/chat/settings/thread-settings-notifications.react.js
+++ b/native/chat/settings/thread-settings-notifications.react.js
@@ -1,11 +1,18 @@
// @flow
import * as React from 'react';
+import { View } from 'react-native';
+import { useThreadSettingsNotifications } from 'lib/shared/thread-settings-notifications-utils.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import EnumSettingsOption from '../../components/enum-settings-option.react.js';
import HeaderRightTextButton from '../../navigation/header-right-text-button.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
+import AllNotifsIllustration from '../../vectors/all-notifs-illustration.react.js';
+import BadgeNotifsIllustration from '../../vectors/badge-notifs-illustration.react.js';
+import MutedNotifsIllustration from '../../vectors/muted-notifs-illustration.react.js';
import type { ChatNavigationProp } from '../chat.react.js';
export type ThreadSettingsNotificationsParams = {
@@ -19,21 +26,104 @@
function ThreadSettingsNotifications(props: Props): React.Node {
const {
- navigation: { setOptions },
+ navigation: { setOptions, goBack },
+ route: {
+ params: { threadInfo },
+ },
} = props;
- const onPressSave = React.useCallback(() => {
- // TODO: implement this
- }, []);
+
+ const {
+ notificationSettings,
+ onFocusedSelected,
+ onBadgeOnlySelected,
+ onBackgroundSelected,
+ disableSaveButton,
+ onSave,
+ } = useThreadSettingsNotifications(threadInfo, goBack);
React.useEffect(() => {
setOptions({
headerRight: () => (
- <HeaderRightTextButton label="Save" onPress={onPressSave} />
+ <HeaderRightTextButton
+ label="Save"
+ onPress={onSave}
+ disabled={disableSaveButton}
+ />
),
});
- }, [onPressSave, setOptions]);
+ }, [disableSaveButton, onSave, setOptions]);
+
+ const styles = useStyles(unboundStyles);
+
+ const allNotificationsIllustration = React.useMemo(
+ () => (
+ <View style={styles.notificationOptionIconContainer}>
+ <AllNotifsIllustration />
+ </View>
+ ),
+ [styles.notificationOptionIconContainer],
+ );
- return null;
+ const badgeOnlyIllustration = React.useMemo(
+ () => (
+ <View style={styles.notificationOptionIconContainer}>
+ <BadgeNotifsIllustration />
+ </View>
+ ),
+ [styles.notificationOptionIconContainer],
+ );
+
+ const mutedIllustration = React.useMemo(
+ () => (
+ <View style={styles.notificationOptionIconContainer}>
+ <MutedNotifsIllustration />
+ </View>
+ ),
+ [styles.notificationOptionIconContainer],
+ );
+
+ return (
+ <>
+ <View style={styles.enumSettingsOptionContainer}>
+ <EnumSettingsOption
+ name="Focused (enabled)"
+ enumValue={notificationSettings === 'focused'}
+ onEnumValuePress={onFocusedSelected}
+ description=""
+ icon={allNotificationsIllustration}
+ />
+ </View>
+ <View style={styles.enumSettingsOptionContainer}>
+ <EnumSettingsOption
+ name="Focused (badge only)"
+ enumValue={notificationSettings === 'badge-only'}
+ onEnumValuePress={onBadgeOnlySelected}
+ description=""
+ icon={badgeOnlyIllustration}
+ />
+ </View>
+ <View style={styles.enumSettingsOptionContainer}>
+ <EnumSettingsOption
+ name="Background"
+ enumValue={notificationSettings === 'background'}
+ onEnumValuePress={onBackgroundSelected}
+ description=""
+ icon={mutedIllustration}
+ />
+ </View>
+ </>
+ );
}
+const unboundStyles = {
+ enumSettingsOptionContainer: {
+ paddingVertical: 8,
+ backgroundColor: 'panelForeground',
+ },
+ notificationOptionIconContainer: {
+ justifyContent: 'center',
+ paddingHorizontal: 16,
+ },
+};
+
export default ThreadSettingsNotifications;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 29, 5:29 PM (6 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2733476
Default Alt Text
D12647.id41930.diff (4 KB)

Event Timeline