Page MenuHomePhabricator
Files F3262027

D3952.diff
No OneTemporary
Actions

D3952.diff
View Options

diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css
--- a/web/modals/threads/notifications/notifications-modal.css
+++ b/web/modals/threads/notifications/notifications-modal.css
@@ -1,3 +1,18 @@
+div.container {
+ display: flex;
+ flex-direction: column;
+ color: var(--fg);
+ margin: 24px 32px;
+ row-gap: 40px;
+ min-width: 343px;
+}
+
+div.optionsContainer {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+}
+
div.optionContainer {
display: flex;
padding: 16px 32px 16px 16px;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -0,0 +1,59 @@
+// @flow
+
+import * as React from 'react';
+
+import { threadInfoSelector } from 'lib/selectors/thread-selectors';
+
+import Button from '../../../components/button.react';
+import { useSelector } from '../../../redux/redux-utils';
+import Modal from '../../modal.react';
+import css from './notifications-modal.css';
+
+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,
+ // eslint-disable-next-line no-unused-vars
+ setNotificationSettings,
+ ] = React.useState<NotificationSettings>(initialThreadSetting);
+
+ const onClickSave = React.useCallback(() => {}, []);
+ const notificationOptions = [];
+
+ return (
+ <Modal name="Channel notifications" size="fit-content" onClose={onClose}>
+ <div className={css.container}>
+ <div className={css.optionsContainer}>{notificationOptions}</div>
+ <Button
+ type="primary"
+ onClick={onClickSave}
+ disabled={notificationSettings === initialThreadSetting}
+ >
+ Save
+ </Button>
+ </div>
+ </Modal>
+ );
+}
+
+export default NotificationsModal;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 11:32 PM (8 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2507300
Default Alt Text
D3952.diff (2 KB)

Event Timeline