[lib] Unify duplicated avatar tcomb validators
ClosedPublic
Actions

Authored by ashoat on Jun 7 2023, 12:32 PM.

Details

Reviewers

ginsu
atul

Commits

rCOMM375f45edc017: [lib] Unify duplicated avatar tcomb validators

Summary

Noticed that we had two duplicated validators for avatar types. This diff unifies them, and opts for the more specific validator where there were differences (in just one case).

Depends on D8146

Test Plan

Flow

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Jun 7 2023, 12:32 PM

Herald added a subscriber: tomek. · View Herald TranscriptJun 7 2023, 12:32 PM

Harbormaster completed remote builds in B20095: Diff 27535.Jun 7 2023, 12:51 PM

ashoat requested review of this revision.Jun 7 2023, 12:51 PM

atul accepted this revision.Jun 7 2023, 1:14 PM

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

Closed by commit rCOMM375f45edc017: [lib] Unify duplicated avatar tcomb validators (authored by ashoat). · Explain WhyJun 7 2023, 2:05 PM

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM375f45edc017: [lib] Unify duplicated avatar tcomb validators.

Revision Contents
Changeset List

Path

Size

lib/

types/

avatar-types.js

20 lines

utils/

avatar-utils.js

28 lines

Diff 27539

View Options

lib/types/avatar-types.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