Diff 29741

landing/competitor-data.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

[landing] introduce telegram competitor data
ClosedPublic
Actions

Details

Diff Detail

Event Timeline

Revision Contents
Changeset List

Diff 29741

landing/competitor-data.js

[landing] introduce telegram competitor dataClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 29741

landing/competitor-data.js

[landing] introduce telegram competitor data
ClosedPublic
Actions

Revision Contents
Changeset List