Skip to content

Commit

Permalink
[lib/native/web] Enable option to save notif tab of child threads irr…
Browse files Browse the repository at this point in the history 
…egardless of parent setting or sidebar type on web and native

Summary:
This allows sidebars to be moved to separate tabs from their parents. Radio buttons are enabled irregardless of sidebar type. Save buttons are enabled even if parents are muted

Notice texts are also removed

Depends on D13719

Test Plan: Tested on both web and native (iOS simulator), ensuring that child threads could be moved separate from their parents by selecting the mute/home radio buttons and clicking save

Reviewers: ashoat, varun

Reviewed By: ashoat

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D13721
  • Loading branch information
@wyilio
wyilio committed Oct 18, 2024
1 parent f8505c3 commit 4a37abc
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 149 deletions.
26 changes: 0 additions & 26 deletions lib/shared/thread-settings-notifications-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,32 +27,6 @@ const threadSettingsNotificationsCopy = {
MUTED: 'Muted',
SIDEBAR_TITLE: 'Thread notifications',
CHANNEL_TITLE: 'Channel notifications',
IS_SIDEBAR:
'It’s not possible to move this thread to Muted. ' +
'That’s because Comm’s design always shows threads ' +
'underneath their parent in the Inbox, which means ' +
'that if a thread’s parent is in Home, the thread ' +
'must also be there.',
IS_SIDEBAR_CAN_PROMOTE:
'If you want to move this thread to Muted, ' +
'you can either move the parent to Muted, ' +
'or you can promote the thread to a channel.',
IS_SIDEBAR_CAN_NOT_PROMOTE:
'If you want to move this thread to Muted, ' +
'you’ll have to move the parent to Muted.',
PARENT_THREAD_IS_MUTED:
'It’s not possible to change the notif settings for a thread ' +
'whose parent is in Muted. That’s because Comm’s design ' +
'always shows threads underneath their parent in the Inbox, ' +
'which means that if a thread’s parent is in Muted, the ' +
'thread must also be there.',
PARENT_THREAD_IS_MUTED_CAN_PROMOTE:
'If you want to change the notif settings for this thread, ' +
'you can either change the notif settings for the parent, ' +
'or you can promote the thread to a channel.',
PARENT_THREAD_IS_MUTED_CAN_NOT_PROMOTE:
'If you want to change the notif settings for this thread, ' +
'you’ll have to change the notif settings for the parent.',
};

const updateSubscriptionLoadingStatusSelector = createLoadingStatusSelector(
Expand Down
79 changes: 8 additions & 71 deletions native/chat/settings/thread-settings-notifications.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,23 +147,19 @@ function ThreadSettingsNotifications(props: Props): React.Node {
onMutedSelected,
saveButtonDisabled,
onSave,
isSidebar,
canPromoteSidebar,
parentThreadIsMuted,
} = useThreadSettingsNotifications(threadInfo, goBack);

React.useEffect(() => {
setOptions({
headerRight: () =>
parentThreadIsMuted ? null : (
<HeaderRightTextButton
label="Save"
onPress={onSave}
disabled={saveButtonDisabled}
/>
),
headerRight: () => (
<HeaderRightTextButton
label="Save"
onPress={onSave}
disabled={saveButtonDisabled}
/>
),
});
}, [saveButtonDisabled, onSave, setOptions, parentThreadIsMuted]);
}, [saveButtonDisabled, onSave, setOptions]);

const styles = useStyles(unboundStyles);

Expand Down Expand Up @@ -230,46 +226,7 @@ function ThreadSettingsNotifications(props: Props): React.Node {
[notificationSettings],
);

const noticeText = React.useMemo(() => {
if (!isSidebar) {
return null;
}

return (
<View style={styles.noticeTextContainer}>
<Text style={styles.noticeText}>
{threadSettingsNotificationsCopy.IS_SIDEBAR}
</Text>
<Text style={styles.noticeText}>
{canPromoteSidebar
? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE
: threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}
</Text>
</View>
);
}, [
canPromoteSidebar,
isSidebar,
styles.noticeText,
styles.noticeTextContainer,
]);

const threadSettingsNotifications = React.useMemo(() => {
if (parentThreadIsMuted) {
return (
<View style={styles.parentThreadIsMutedNoticeContainerStyle}>
<Text style={styles.parentThreadIsMutedNoticeText}>
{threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED}
</Text>
<Text style={styles.parentThreadIsMutedNoticeText}>
{canPromoteSidebar
? threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_PROMOTE
: threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_NOT_PROMOTE}
</Text>
</View>
);
}

return (
<View style={styles.container}>
<View style={styles.enumSettingsOptionContainer}>
Expand Down Expand Up @@ -297,18 +254,13 @@ function ThreadSettingsNotifications(props: Props): React.Node {
onEnumValuePress={onMutedSelected}
description={mutedDescription}
icon={mutedIllustration}
disabled={isSidebar}
/>
</View>
{noticeText}
</View>
);
}, [
parentThreadIsMuted,
styles.container,
styles.enumSettingsOptionContainer,
styles.parentThreadIsMutedNoticeContainerStyle,
styles.parentThreadIsMutedNoticeText,
notificationSettings,
onHomeSelected,
allNotificationsDescription,
Expand All @@ -319,9 +271,6 @@ function ThreadSettingsNotifications(props: Props): React.Node {
onMutedSelected,
mutedDescription,
mutedIllustration,
isSidebar,
noticeText,
canPromoteSidebar,
]);

return threadSettingsNotifications;
Expand Down Expand Up @@ -367,18 +316,6 @@ const unboundStyles = {
lineHeight: 18,
marginVertical: 8,
},
parentThreadIsMutedNoticeContainerStyle: {
backgroundColor: 'panelForeground',
paddingHorizontal: 16,
paddingVertical: 8,
},
parentThreadIsMutedNoticeText: {
color: 'panelForegroundSecondaryLabel',
fontSize: 16,
lineHeight: 20,
textAlign: 'left',
marginVertical: 8,
},
};

export default ThreadSettingsNotifications;
55 changes: 3 additions & 52 deletions web/modals/threads/notifications/notifications-modal.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,6 @@ function NotificationsModal(props: Props): React.Node {
saveButtonDisabled,
onSave,
isSidebar,
canPromoteSidebar,
parentThreadIsMuted,
} = useThreadSettingsNotifications(threadInfo, onClose);

const isHomeSelected = notificationSettings === 'home';
Expand Down Expand Up @@ -128,81 +126,34 @@ function NotificationsModal(props: Props): React.Node {
title={threadSettingsNotificationsCopy.MUTED}
statements={mutedStatements}
icon={icon}
disabled={isSidebar}
onSelect={onMutedSelected}
/>
);
}, [isMutedSelected, onMutedSelected, isSidebar]);
}, [isMutedSelected, onMutedSelected]);

const modalName = isSidebar
? threadSettingsNotificationsCopy.SIDEBAR_TITLE
: threadSettingsNotificationsCopy.CHANNEL_TITLE;

const noticeText = React.useMemo(() => {
if (!isSidebar) {
return null;
}

return (
<>
<p className={css.notice}>
{threadSettingsNotificationsCopy.IS_SIDEBAR}
</p>
<p className={css.notice}>
{canPromoteSidebar
? threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_PROMOTE
: threadSettingsNotificationsCopy.IS_SIDEBAR_CAN_NOT_PROMOTE}
</p>
</>
);
}, [isSidebar, canPromoteSidebar]);

const modalContent = React.useMemo(() => {
if (parentThreadIsMuted) {
return (
<>
<p className={css.parentThreadIsInBackgroundNotice}>
{threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED}
</p>
<p className={css.parentThreadIsInBackgroundNotice}>
{canPromoteSidebar
? threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_PROMOTE
: threadSettingsNotificationsCopy.PARENT_THREAD_IS_MUTED_CAN_NOT_PROMOTE}
</p>
</>
);
}

return (
<>
<div className={css.optionsContainer}>
{homeItem}
{notifCountOnlyItem}
{backgroundItem}
</div>
{noticeText}
</>
);
}, [
parentThreadIsMuted,
homeItem,
notifCountOnlyItem,
backgroundItem,
noticeText,
canPromoteSidebar,
]);
}, [homeItem, notifCountOnlyItem, backgroundItem]);

const saveButton = React.useMemo(() => {
if (parentThreadIsMuted) {
return undefined;
}

return (
<Button variant="filled" onClick={onSave} disabled={saveButtonDisabled}>
Save
</Button>
);
}, [parentThreadIsMuted, onSave, saveButtonDisabled]);
}, [onSave, saveButtonDisabled]);

return (
<Modal
Expand Down

0 comments on commit 4a37abc

Please sign in to comment.