Page MenuHomePhabricator
Differential D8237

[web] Display invite links button conditionally
ClosedPublic
Actions

Authored by tomek on Jun 16 2023, 4:28 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 5:59 PM
Unknown Object (File)
Mon, Mar 10, 1:53 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:00 PM
Unknown Object (File)
Mon, Mar 3, 3:23 PM
Unknown Object (File)
Feb 20 2025, 4:24 AM
View All 90 Files
Subscribers
ashoat

Details

Reviewers
bartek
kamil
inka
Commits
rCOMM93563ab25e43: [web] Display invite links button conditionally
Summary

When a community has invite link, we display it next to the community in the drawer. We're using our Menu component in a new variant.

invite-button-web.png (504×826 px, 55 KB)

Depends on D8236

Test Plan

Check if button is displayed only for communities with invite links and if clicking it results in menu being shown.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Jun 16 2023, 4:28 AM
Herald added a subscriber: ashoat. · View Herald TranscriptJun 16 2023, 4:28 AM
tomek edited the summary of this revision. (Show Details)Jun 16 2023, 4:29 AM
tomek added a child revision: D8238: [web] Create link view modal.Jun 16 2023, 4:31 AM
Harbormaster completed remote builds in B20308: Diff 27831.Jun 16 2023, 4:45 AM
tomek requested review of this revision.Jun 16 2023, 4:45 AM
kamil accepted this revision.Jun 19 2023, 2:59 AM
This revision is now accepted and ready to land.Jun 19 2023, 2:59 AM
tomek added a child revision: D8292: [lib][native] Extract invite link url.Jun 22 2023, 7:20 AM
tomek removed a child revision: D8238: [web] Create link view modal.Jun 22 2023, 7:21 AM
tomek added a child revision: D8238: [web] Create link view modal.Jun 22 2023, 7:24 AM
tomek removed a child revision: D8238: [web] Create link view modal.Jun 22 2023, 7:27 AM
Closed by commit rCOMM93563ab25e43: [web] Display invite links button conditionally (authored by tomek). · Explain WhyJun 26 2023, 6:04 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM93563ab25e43: [web] Display invite links button conditionally.

Revision Contents
Changeset List

PathSize
web/
components/
7 lines
3 lines
invite-links/
3 lines
38 lines
sidebar/
2 lines

Diff 28105

View Options

web/components/menu.css

Show All 20 Lines
import Button from '../../../components/button.react'; import Button from '../../../components/button.react';
import EnumSettingsOption from '../../../components/enum-settings-option.react'; import EnumSettingsOption from '../../../components/enum-settings-option.react';
import { useSelector } from '../../../redux/redux-utils'; import { useSelector } from '../../../redux/redux-utils';
import Modal from '../../modal.react'; import Modal from '../../modal.react';
import css from './notifications-modal.css'; import css from './notifications-modal.css';
type NotificationSettings = 'focused' | 'badge-only' | 'background'; type NotificationSettings = 'focused' | 'badge-only' | 'background';
const BANNER_NOTIFS = 'Banner notifs';
const BADGE_COUNT = 'Badge count';
const IN_FOCUSED_TAB = 'Lives in Focused tab';
const IN_BACKGROUND_TAB = 'Lives in Background tab';
const focusedStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: true },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const badgeOnlyStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const backgroundStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: false },
{ statement: IN_BACKGROUND_TAB, isStatementValid: true },
];
type Props = { type Props = {
+threadID: string, +threadID: string,
+onClose: () => void, +onClose: () => void,
}; };
function NotificationsModal(props: Props): React.Node { function NotificationsModal(props: Props): React.Node {
const { onClose, threadID } = props; const { onClose, threadID } = props;
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { subscription } = threadInfo.currentUser; const { subscription } = threadInfo.currentUser;
const initialThreadSetting = React.useMemo<NotificationSettings>(() => { const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
if (!subscription.home) { if (!subscription.home) {
return 'background'; return 'background';
Show All 19 Linesfunction NotificationsModal(props: Props): React.Node {
); );
const onBackgroundSelected = React.useCallback( const onBackgroundSelected = React.useCallback(
() => setNotificationSettings('background'), () => setNotificationSettings('background'),
[], [],
); );
const isFocusedSelected = notificationSettings === 'focused'; const isFocusedSelected = notificationSettings === 'focused';
const focusedItem = React.useMemo(() => { const focusedItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: true },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`}
height={focusedNotificationsIllustrationAsset.height} height={focusedNotificationsIllustrationAsset.height}
width={focusedNotificationsIllustrationAsset.width} width={focusedNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedSelected} selected={isFocusedSelected}
title="Focused (enabled)" title="Focused (enabled)"
statements={statements} statements={focusedStatements}
icon={icon} icon={icon}
onSelect={onFocusedSelected} onSelect={onFocusedSelected}
/> />
); );
}, [isFocusedSelected, onFocusedSelected]); }, [isFocusedSelected, onFocusedSelected]);
const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
const focusedBadgeOnlyItem = React.useMemo(() => { const focusedBadgeOnlyItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
height={badgeOnlyNotificationsIllustrationAsset.height} height={badgeOnlyNotificationsIllustrationAsset.height}
width={badgeOnlyNotificationsIllustrationAsset.width} width={badgeOnlyNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedBadgeOnlySelected} selected={isFocusedBadgeOnlySelected}
title="Focused (badge only)" title="Focused (badge only)"
statements={statements} statements={badgeOnlyStatements}
icon={icon} icon={icon}
onSelect={onBadgeOnlySelected} onSelect={onBadgeOnlySelected}
/> />
); );
}, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
const isBackgroundSelected = notificationSettings === 'background'; const isBackgroundSelected = notificationSettings === 'background';
const backgroundItem = React.useMemo(() => { const backgroundItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: false },
{ statement: 'Lives in Background tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`}
height={backgroundNotificationsIllustrationAsset.height} height={backgroundNotificationsIllustrationAsset.height}
width={backgroundNotificationsIllustrationAsset.width} width={backgroundNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isBackgroundSelected} selected={isBackgroundSelected}
title="Background" title="Background"
statements={statements} statements={backgroundStatements}
icon={icon} icon={icon}
onSelect={onBackgroundSelected} onSelect={onBackgroundSelected}
/> />
); );
}, [isBackgroundSelected, onBackgroundSelected]); }, [isBackgroundSelected, onBackgroundSelected]);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines
View Options

web/components/menu.react.js

Show All 20 Lines
import Button from '../../../components/button.react'; import Button from '../../../components/button.react';
import EnumSettingsOption from '../../../components/enum-settings-option.react'; import EnumSettingsOption from '../../../components/enum-settings-option.react';
import { useSelector } from '../../../redux/redux-utils'; import { useSelector } from '../../../redux/redux-utils';
import Modal from '../../modal.react'; import Modal from '../../modal.react';
import css from './notifications-modal.css'; import css from './notifications-modal.css';
type NotificationSettings = 'focused' | 'badge-only' | 'background'; type NotificationSettings = 'focused' | 'badge-only' | 'background';
const BANNER_NOTIFS = 'Banner notifs';
const BADGE_COUNT = 'Badge count';
const IN_FOCUSED_TAB = 'Lives in Focused tab';
const IN_BACKGROUND_TAB = 'Lives in Background tab';
const focusedStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: true },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const badgeOnlyStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const backgroundStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: false },
{ statement: IN_BACKGROUND_TAB, isStatementValid: true },
];
type Props = { type Props = {
+threadID: string, +threadID: string,
+onClose: () => void, +onClose: () => void,
}; };
function NotificationsModal(props: Props): React.Node { function NotificationsModal(props: Props): React.Node {
const { onClose, threadID } = props; const { onClose, threadID } = props;
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { subscription } = threadInfo.currentUser; const { subscription } = threadInfo.currentUser;
const initialThreadSetting = React.useMemo<NotificationSettings>(() => { const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
if (!subscription.home) { if (!subscription.home) {
return 'background'; return 'background';
Show All 19 Linesfunction NotificationsModal(props: Props): React.Node {
); );
const onBackgroundSelected = React.useCallback( const onBackgroundSelected = React.useCallback(
() => setNotificationSettings('background'), () => setNotificationSettings('background'),
[], [],
); );
const isFocusedSelected = notificationSettings === 'focused'; const isFocusedSelected = notificationSettings === 'focused';
const focusedItem = React.useMemo(() => { const focusedItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: true },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`}
height={focusedNotificationsIllustrationAsset.height} height={focusedNotificationsIllustrationAsset.height}
width={focusedNotificationsIllustrationAsset.width} width={focusedNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedSelected} selected={isFocusedSelected}
title="Focused (enabled)" title="Focused (enabled)"
statements={statements} statements={focusedStatements}
icon={icon} icon={icon}
onSelect={onFocusedSelected} onSelect={onFocusedSelected}
/> />
); );
}, [isFocusedSelected, onFocusedSelected]); }, [isFocusedSelected, onFocusedSelected]);
const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
const focusedBadgeOnlyItem = React.useMemo(() => { const focusedBadgeOnlyItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
height={badgeOnlyNotificationsIllustrationAsset.height} height={badgeOnlyNotificationsIllustrationAsset.height}
width={badgeOnlyNotificationsIllustrationAsset.width} width={badgeOnlyNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedBadgeOnlySelected} selected={isFocusedBadgeOnlySelected}
title="Focused (badge only)" title="Focused (badge only)"
statements={statements} statements={badgeOnlyStatements}
icon={icon} icon={icon}
onSelect={onBadgeOnlySelected} onSelect={onBadgeOnlySelected}
/> />
); );
}, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
const isBackgroundSelected = notificationSettings === 'background'; const isBackgroundSelected = notificationSettings === 'background';
const backgroundItem = React.useMemo(() => { const backgroundItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: false },
{ statement: 'Lives in Background tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`}
height={backgroundNotificationsIllustrationAsset.height} height={backgroundNotificationsIllustrationAsset.height}
width={backgroundNotificationsIllustrationAsset.width} width={backgroundNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isBackgroundSelected} selected={isBackgroundSelected}
title="Background" title="Background"
statements={statements} statements={backgroundStatements}
icon={icon} icon={icon}
onSelect={onBackgroundSelected} onSelect={onBackgroundSelected}
/> />
); );
}, [isBackgroundSelected, onBackgroundSelected]); }, [isBackgroundSelected, onBackgroundSelected]);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines
View Options

web/invite-links/invite-links-menu.css

Show All 20 Lines
import Button from '../../../components/button.react'; import Button from '../../../components/button.react';
import EnumSettingsOption from '../../../components/enum-settings-option.react'; import EnumSettingsOption from '../../../components/enum-settings-option.react';
import { useSelector } from '../../../redux/redux-utils'; import { useSelector } from '../../../redux/redux-utils';
import Modal from '../../modal.react'; import Modal from '../../modal.react';
import css from './notifications-modal.css'; import css from './notifications-modal.css';
type NotificationSettings = 'focused' | 'badge-only' | 'background'; type NotificationSettings = 'focused' | 'badge-only' | 'background';
const BANNER_NOTIFS = 'Banner notifs';
const BADGE_COUNT = 'Badge count';
const IN_FOCUSED_TAB = 'Lives in Focused tab';
const IN_BACKGROUND_TAB = 'Lives in Background tab';
const focusedStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: true },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const badgeOnlyStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const backgroundStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: false },
{ statement: IN_BACKGROUND_TAB, isStatementValid: true },
];
type Props = { type Props = {
+threadID: string, +threadID: string,
+onClose: () => void, +onClose: () => void,
}; };
function NotificationsModal(props: Props): React.Node { function NotificationsModal(props: Props): React.Node {
const { onClose, threadID } = props; const { onClose, threadID } = props;
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { subscription } = threadInfo.currentUser; const { subscription } = threadInfo.currentUser;
const initialThreadSetting = React.useMemo<NotificationSettings>(() => { const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
if (!subscription.home) { if (!subscription.home) {
return 'background'; return 'background';
Show All 19 Linesfunction NotificationsModal(props: Props): React.Node {
); );
const onBackgroundSelected = React.useCallback( const onBackgroundSelected = React.useCallback(
() => setNotificationSettings('background'), () => setNotificationSettings('background'),
[], [],
); );
const isFocusedSelected = notificationSettings === 'focused'; const isFocusedSelected = notificationSettings === 'focused';
const focusedItem = React.useMemo(() => { const focusedItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: true },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`}
height={focusedNotificationsIllustrationAsset.height} height={focusedNotificationsIllustrationAsset.height}
width={focusedNotificationsIllustrationAsset.width} width={focusedNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedSelected} selected={isFocusedSelected}
title="Focused (enabled)" title="Focused (enabled)"
statements={statements} statements={focusedStatements}
icon={icon} icon={icon}
onSelect={onFocusedSelected} onSelect={onFocusedSelected}
/> />
); );
}, [isFocusedSelected, onFocusedSelected]); }, [isFocusedSelected, onFocusedSelected]);
const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
const focusedBadgeOnlyItem = React.useMemo(() => { const focusedBadgeOnlyItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
height={badgeOnlyNotificationsIllustrationAsset.height} height={badgeOnlyNotificationsIllustrationAsset.height}
width={badgeOnlyNotificationsIllustrationAsset.width} width={badgeOnlyNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedBadgeOnlySelected} selected={isFocusedBadgeOnlySelected}
title="Focused (badge only)" title="Focused (badge only)"
statements={statements} statements={badgeOnlyStatements}
icon={icon} icon={icon}
onSelect={onBadgeOnlySelected} onSelect={onBadgeOnlySelected}
/> />
); );
}, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
const isBackgroundSelected = notificationSettings === 'background'; const isBackgroundSelected = notificationSettings === 'background';
const backgroundItem = React.useMemo(() => { const backgroundItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: false },
{ statement: 'Lives in Background tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`}
height={backgroundNotificationsIllustrationAsset.height} height={backgroundNotificationsIllustrationAsset.height}
width={backgroundNotificationsIllustrationAsset.width} width={backgroundNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isBackgroundSelected} selected={isBackgroundSelected}
title="Background" title="Background"
statements={statements} statements={backgroundStatements}
icon={icon} icon={icon}
onSelect={onBackgroundSelected} onSelect={onBackgroundSelected}
/> />
); );
}, [isBackgroundSelected, onBackgroundSelected]); }, [isBackgroundSelected, onBackgroundSelected]);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines
View Options

web/invite-links/invite-links-menu.react.js

Show All 20 Lines
import Button from '../../../components/button.react'; import Button from '../../../components/button.react';
import EnumSettingsOption from '../../../components/enum-settings-option.react'; import EnumSettingsOption from '../../../components/enum-settings-option.react';
import { useSelector } from '../../../redux/redux-utils'; import { useSelector } from '../../../redux/redux-utils';
import Modal from '../../modal.react'; import Modal from '../../modal.react';
import css from './notifications-modal.css'; import css from './notifications-modal.css';
type NotificationSettings = 'focused' | 'badge-only' | 'background'; type NotificationSettings = 'focused' | 'badge-only' | 'background';
const BANNER_NOTIFS = 'Banner notifs';
const BADGE_COUNT = 'Badge count';
const IN_FOCUSED_TAB = 'Lives in Focused tab';
const IN_BACKGROUND_TAB = 'Lives in Background tab';
const focusedStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: true },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const badgeOnlyStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: true },
{ statement: IN_FOCUSED_TAB, isStatementValid: true },
];
const backgroundStatements = [
{ statement: BANNER_NOTIFS, isStatementValid: false },
{ statement: BADGE_COUNT, isStatementValid: false },
{ statement: IN_BACKGROUND_TAB, isStatementValid: true },
];
type Props = { type Props = {
+threadID: string, +threadID: string,
+onClose: () => void, +onClose: () => void,
}; };
function NotificationsModal(props: Props): React.Node { function NotificationsModal(props: Props): React.Node {
const { onClose, threadID } = props; const { onClose, threadID } = props;
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { subscription } = threadInfo.currentUser; const { subscription } = threadInfo.currentUser;
const initialThreadSetting = React.useMemo<NotificationSettings>(() => { const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
if (!subscription.home) { if (!subscription.home) {
return 'background'; return 'background';
Show All 19 Linesfunction NotificationsModal(props: Props): React.Node {
); );
const onBackgroundSelected = React.useCallback( const onBackgroundSelected = React.useCallback(
() => setNotificationSettings('background'), () => setNotificationSettings('background'),
[], [],
); );
const isFocusedSelected = notificationSettings === 'focused'; const isFocusedSelected = notificationSettings === 'focused';
const focusedItem = React.useMemo(() => { const focusedItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: true },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`}
height={focusedNotificationsIllustrationAsset.height} height={focusedNotificationsIllustrationAsset.height}
width={focusedNotificationsIllustrationAsset.width} width={focusedNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedSelected} selected={isFocusedSelected}
title="Focused (enabled)" title="Focused (enabled)"
statements={statements} statements={focusedStatements}
icon={icon} icon={icon}
onSelect={onFocusedSelected} onSelect={onFocusedSelected}
/> />
); );
}, [isFocusedSelected, onFocusedSelected]); }, [isFocusedSelected, onFocusedSelected]);
const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
const focusedBadgeOnlyItem = React.useMemo(() => { const focusedBadgeOnlyItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: true },
{ statement: 'Lives in Focused tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
height={badgeOnlyNotificationsIllustrationAsset.height} height={badgeOnlyNotificationsIllustrationAsset.height}
width={badgeOnlyNotificationsIllustrationAsset.width} width={badgeOnlyNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isFocusedBadgeOnlySelected} selected={isFocusedBadgeOnlySelected}
title="Focused (badge only)" title="Focused (badge only)"
statements={statements} statements={badgeOnlyStatements}
icon={icon} icon={icon}
onSelect={onBadgeOnlySelected} onSelect={onBadgeOnlySelected}
/> />
); );
}, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
const isBackgroundSelected = notificationSettings === 'background'; const isBackgroundSelected = notificationSettings === 'background';
const backgroundItem = React.useMemo(() => { const backgroundItem = React.useMemo(() => {
const statements = [
{ statement: 'Banner notifs', isStatementValid: false },
{ statement: 'Badge count', isStatementValid: false },
{ statement: 'Lives in Background tab', isStatementValid: true },
];
const icon = ( const icon = (
<img <img
src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`} src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`}
height={backgroundNotificationsIllustrationAsset.height} height={backgroundNotificationsIllustrationAsset.height}
width={backgroundNotificationsIllustrationAsset.width} width={backgroundNotificationsIllustrationAsset.width}
/> />
); );
return ( return (
<EnumSettingsOption <EnumSettingsOption
selected={isBackgroundSelected} selected={isBackgroundSelected}
title="Background" title="Background"
statements={statements} statements={backgroundStatements}
icon={icon} icon={icon}
onSelect={onBackgroundSelected} onSelect={onBackgroundSelected}
/> />
); );
}, [isBackgroundSelected, onBackgroundSelected]); }, [isBackgroundSelected, onBackgroundSelected]);
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines
View Options

web/sidebar/community-drawer-item-community.react.js

Loading...