Page MenuHomePhabricator
Differential D9173

[native] Lift `renderItem` to `ConnectedChatThreadList`
ClosedPublic
Actions

Authored by atul on Sep 12 2023, 4:57 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Mar 18, 5:39 AM
Unknown Object (File)
Tue, Mar 18, 5:39 AM
Unknown Object (File)
Tue, Mar 18, 5:39 AM
Unknown Object (File)
Tue, Mar 18, 5:38 AM
Unknown Object (File)
Tue, Mar 18, 5:22 AM
Unknown Object (File)
Sat, Mar 8, 4:18 AM
Unknown Object (File)
Feb 25 2025, 10:59 PM
Unknown Object (File)
Feb 14 2025, 6:43 AM
View All Files
Subscribers
ashoat

Details

Reviewers
ginsu
tomek
rohan
Commits
rCOMMae6086fcf3f9: [native] Lift `renderItem` to `ConnectedChatThreadList`
Summary

This diff is just one step in the process of converting ChatThreadList into a functional component. When this work is done, we will be able to avoid a lot of re-rendering and hopefully improve performance quite a bit.

Depends on D9172

Test Plan

ChatThreadList + search experience continue to work as expected.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
chat/
62 lines

Diff 31089

View Options

native/chat/chat-thread-list.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