Paths

Table of Contentst

-
lib/components/
-
components/
-
base-edit-user-avatar-provider.react.js
-
edit-user-avatar-provider.react.js
-
native/
-
account/registration/
-
registration/
-
avatar-selection.react.js
-
emoji-avatar-selection.react.js
-
registration-server-call.js
-
avatars/
-
edit-user-avatar.react.js
-
native-edit-user-avatar-provider.react.js
-
media/
-
registration-user-avatar-camera-modal.react.js
-
user-avatar-camera-modal.react.js
-
profile/
-
emoji-user-avatar-creation.react.js
-
root.react.js

[native] Introduce `NativeEditUserAvatarProvider`
ClosedPublic
Actions

Authored by atul on Jun 14 2023, 12:29 PM.

Details

Reviewers

ashoat
ginsu

Commits

rCOMM9a1d07449411: [native] Introduce `NativeEditUserAvatarProvider`

Summary

Wraps BaseEditUserAvatarProvider and passes in native-specific props.

Sorry this diff is a little noisy, the main changes are in root.react.js and native-edit-thread-user-avatar-provider.react.js, rest are mostly import fixes.

Depends on D8216

Test Plan

Everything continues to work as expected on native.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

atul created this revision.Jun 14 2023, 12:29 PM

Herald added a subscriber: tomek. · View Herald TranscriptJun 14 2023, 12:29 PM

reposition Props directly above component

atul published this revision for review.Jun 14 2023, 12:30 PM

atul added a child revision: D8218: [native] Pull `displayFailureAlert` out of `EditThreadAvatarProvider`.Jun 14 2023, 12:48 PM

Harbormaster completed remote builds in B20272: Diff 27789.Jun 14 2023, 12:49 PM

Harbormaster completed remote builds in B20273: Diff 27790.

ginsu accepted this revision.Jun 14 2023, 1:10 PM

This revision is now accepted and ready to land.Jun 14 2023, 1:10 PM

Closed by commit rCOMM9a1d07449411: [native] Introduce `NativeEditUserAvatarProvider` (authored by atul). · Explain WhyJun 14 2023, 2:22 PM

This revision was automatically updated to reflect the committed changes.

atul added a commit: rCOMM9a1d07449411: [native] Introduce `NativeEditUserAvatarProvider`.

Revision Contents
Changeset List

Path

Size

lib/

components/

	base-edit-user-avatar-provider.react.js
	edit-user-avatar-provider.react.js

4 lines

edit-user-avatar-provider.react.js

native/

account/

registration/

avatar-selection.react.js

2 lines

emoji-avatar-selection.react.js

2 lines

registration-server-call.js

2 lines

avatars/

edit-user-avatar.react.js

2 lines

native-edit-user-avatar-provider.react.js

34 lines

media/

registration-user-avatar-camera-modal.react.js

2 lines

user-avatar-camera-modal.react.js

2 lines

profile/

emoji-user-avatar-creation.react.js

2 lines

root.react.js

24 lines

Diff 27798

View Options

lib/components/base-edit-user-avatar-provider.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 Lines	function 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

lib/components/edit-user-avatar-provider.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 Lines	function 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

native/account/registration/avatar-selection.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 Lines	function 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

native/account/registration/emoji-avatar-selection.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 Lines	function 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