Page MenuHomePhabricator
Files F3525704

No OneTemporary
Actions

View Options

diff --git a/web/modals/threads/notifications/notifications-option-info.react.js b/web/modals/threads/notifications/enum-settings-option-info.react.js
similarity index 86%
rename from web/modals/threads/notifications/notifications-option-info.react.js
rename to web/modals/threads/notifications/enum-settings-option-info.react.js
index 0fa7bc4a3..a1b96c816 100644
--- a/web/modals/threads/notifications/notifications-option-info.react.js
+++ b/web/modals/threads/notifications/enum-settings-option-info.react.js
@@ -1,37 +1,37 @@
// @flow
import classnames from 'classnames';
import * as React from 'react';
import SWMansionIcon from '../../../SWMansionIcon.react';
import css from './notifications-modal.css';
type Props = {
+valid: boolean,
+children: React.Node,
};
-function NotificationsOptionInfo(props: Props): React.Node {
+function EnumSettingsOptionInfo(props: Props): React.Node {
const { valid, children } = props;
const optionInfoClasses = React.useMemo(
() =>
classnames(css.optionInfo, {
[css.optionInfoInvalid]: !valid,
}),
[valid],
);
const icon = React.useMemo(
() => <SWMansionIcon icon={valid ? 'check' : 'cross'} size={12} />,
[valid],
);
return (
<div className={optionInfoClasses}>
{icon}
{children}
</div>
);
}
-export default NotificationsOptionInfo;
+export default EnumSettingsOptionInfo;
diff --git a/web/modals/threads/notifications/notifications-option.react.js b/web/modals/threads/notifications/enum-settings-option.react.js
similarity index 80%
rename from web/modals/threads/notifications/notifications-option.react.js
rename to web/modals/threads/notifications/enum-settings-option.react.js
index 98734837f..e72f11d47 100644
--- a/web/modals/threads/notifications/notifications-option.react.js
+++ b/web/modals/threads/notifications/enum-settings-option.react.js
@@ -1,50 +1,50 @@
// @flow
import classnames from 'classnames';
import * as React from 'react';
import Radio from '../../../components/radio.react';
+import EnumSettingsOptionInfo from './enum-settings-option-info.react';
import css from './notifications-modal.css';
-import NotificationsOptionInfo from './notifications-option-info.react';
type Props = {
+selected: boolean,
+onSelect: () => void,
+icon: React.Node,
+title: string,
+description: $ReadOnlyArray<[string, boolean]>,
};
-function NotificationsOption(props: Props): React.Node {
+function EnumSettingsOption(props: Props): React.Node {
const { icon, title, description, selected, onSelect } = props;
const descriptionItems = React.useMemo(
() =>
description.map(([text, isValid]) => (
- <NotificationsOptionInfo key={text} valid={isValid}>
+ <EnumSettingsOptionInfo key={text} valid={isValid}>
{text}
- </NotificationsOptionInfo>
+ </EnumSettingsOptionInfo>
)),
[description],
);
const optionContainerClasses = React.useMemo(
() =>
classnames(css.optionContainer, {
[css.optionContainerSelected]: selected,
}),
[selected],
);
return (
<div className={optionContainerClasses} onClick={onSelect}>
<div className={css.optionIcon}>{icon}</div>
<div className={css.optionContent}>
<div className={css.optionTitle}>{title}</div>
<div className={css.optionDescription}>{descriptionItems}</div>
</div>
<Radio checked={selected} />
</div>
);
}
-export default NotificationsOption;
+export default EnumSettingsOption;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
index 60f016ffa..444a5f271 100644
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -1,183 +1,183 @@
// @flow
import * as React from 'react';
import {
updateSubscription,
updateSubscriptionActionTypes,
} from 'lib/actions/user-actions';
import { threadInfoSelector } from 'lib/selectors/thread-selectors';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils';
import Button from '../../../components/button.react';
import { useSelector } from '../../../redux/redux-utils';
import SWMansionIcon from '../../../SWMansionIcon.react';
import Modal from '../../modal.react';
+import EnumSettingsOption from './enum-settings-option.react';
import css from './notifications-modal.css';
-import NotificationsOption from './notifications-option.react';
type NotificationSettings = 'focused' | 'badge-only' | 'background';
type Props = {
+threadID: string,
+onClose: () => void,
};
function NotificationsModal(props: Props): React.Node {
const { onClose, threadID } = props;
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { subscription } = threadInfo.currentUser;
const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
if (!subscription.home) {
return 'background';
}
if (!subscription.pushNotifs) {
return 'badge-only';
}
return 'focused';
}, [subscription.home, subscription.pushNotifs]);
const [
notificationSettings,
setNotificationSettings,
] = React.useState<NotificationSettings>(initialThreadSetting);
const onFocusedSelected = React.useCallback(
() => setNotificationSettings('focused'),
[],
);
const onBadgeOnlySelected = React.useCallback(
() => setNotificationSettings('badge-only'),
[],
);
const onBackgroundSelected = React.useCallback(
() => setNotificationSettings('background'),
[],
);
const notificationIconStyle = React.useMemo(() => ({ width: 'auto' }), []);
const isFocusedSelected = notificationSettings === 'focused';
const focusedItem = React.useMemo(() => {
const description = [
['Banner notifs', true],
['Badge count', true],
['Lives in Focused tab', true],
];
const icon = (
<SWMansionIcon
icon="all-notifs"
size={86}
style={notificationIconStyle}
/>
);
return (
- <NotificationsOption
+ <EnumSettingsOption
selected={isFocusedSelected}
title="Focused (enabled)"
description={description}
icon={icon}
onSelect={onFocusedSelected}
/>
);
}, [isFocusedSelected, notificationIconStyle, onFocusedSelected]);
const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
const focusedBadgeOnlyItem = React.useMemo(() => {
const description = [
['Banner notifs', false],
['Badge count', true],
['Lives in Focused tab', true],
];
const icon = (
<SWMansionIcon
icon="badge-notifs"
size={86}
style={notificationIconStyle}
/>
);
return (
- <NotificationsOption
+ <EnumSettingsOption
selected={isFocusedBadgeOnlySelected}
title="Focused (badge only)"
description={description}
icon={icon}
onSelect={onBadgeOnlySelected}
/>
);
}, [isFocusedBadgeOnlySelected, notificationIconStyle, onBadgeOnlySelected]);
const isBackgroundSelected = notificationSettings === 'background';
const backgroundItem = React.useMemo(() => {
const description = [
['Banner notifs', false],
['Badge count', false],
['Lives in Backgound tab', true],
];
const icon = (
<SWMansionIcon
icon="muted-notifs"
size={86}
style={notificationIconStyle}
/>
);
return (
- <NotificationsOption
+ <EnumSettingsOption
selected={isBackgroundSelected}
title="Background"
description={description}
icon={icon}
onSelect={onBackgroundSelected}
/>
);
}, [isBackgroundSelected, notificationIconStyle, onBackgroundSelected]);
const dispatchActionPromise = useDispatchActionPromise();
const callUpdateSubscription = useServerCall(updateSubscription);
const onClickSave = React.useCallback(() => {
dispatchActionPromise(
updateSubscriptionActionTypes,
callUpdateSubscription({
threadID: threadID,
updatedFields: {
home: notificationSettings !== 'background',
pushNotifs: notificationSettings === 'focused',
},
}),
);
onClose();
}, [
callUpdateSubscription,
dispatchActionPromise,
notificationSettings,
onClose,
threadID,
]);
return (
<Modal name="Channel notifications" size="fit-content" onClose={onClose}>
<div className={css.container}>
<div className={css.optionsContainer}>
{focusedItem}
{focusedBadgeOnlyItem}
{backgroundItem}
</div>
<Button
type="primary"
onClick={onClickSave}
disabled={notificationSettings === initialThreadSetting}
>
Save
</Button>
</div>
</Modal>
);
}
export default NotificationsModal;

File Metadata

Mime Type
text/x-diff
Expires
Wed, Dec 25, 6:12 PM (7 h, 35 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2700678
Default Alt Text
(9 KB)

Event Timeline