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

Authored by atul on Sep 12 2023, 1:57 PM.

Details

Reviewers

ginsu
tomek
rohan

Commits

rCOMM3a4e9c686ee5: [native] Lift `onScroll` 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 D9136

Test Plan

ChatThreadList + search experience continue to work as expected.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

atul created this revision.Sep 12 2023, 1:57 PM

Herald added a subscriber: ashoat. · View Herald TranscriptSep 12 2023, 1:57 PM

atul added a child revision: D9164: [native] Lift `onSwipeableWillOpen` and `composeThread` to `ConnectedChatThreadList`.Sep 12 2023, 2:06 PM

atul published this revision for review.Sep 12 2023, 2:07 PM

Harbormaster completed remote builds in B22549: Diff 30995.Sep 12 2023, 2:22 PM

please see inline comment before landing

native/chat/chat-thread-list.react.js
129 ↗	(On Diff #30995)	I think this should be `mixed`

This revision is now accepted and ready to land.Sep 12 2023, 9:37 PM

atul added inline comments.Sep 13 2023, 7:36 AM

native/chat/chat-thread-list.react.js
129 ↗	(On Diff #30995)	That's fair. In a couple diffs though I completely remove these props after merging everything into a single component, so I think it's fine to leave as-is for now since this is temporary?

Closed by commit rCOMM3a4e9c686ee5: [native] Lift `onScroll` to `ConnectedChatThreadList` (authored by atul). · Explain WhySep 13 2023, 8:23 AM

This revision was automatically updated to reflect the committed changes.

atul added a commit: rCOMM3a4e9c686ee5: [native] Lift `onScroll` to `ConnectedChatThreadList`.

Revision Contents
Changeset List

Path

Size

native/

chat/

chat-thread-list.react.js

29 lines

Diff 31053

View Options

native/chat/chat-thread-list.react.js

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Lines	type Props = {
+currentTabType: TabType,		+currentTabType: TabType,
+setCurrentTabType: SetState<TabType>,		+setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges,		+queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>,		+setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string,		+namePlaceholder: string,
+changeQueued: boolean,		+changeQueued: boolean,
+setTab: (tabType: TabType) => void,		+setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,		+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
		+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
};		};
class ThreadSettingsModal extends React.PureComponent<Props> {		class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement;		nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement;		accountPasswordInput: ?HTMLInputElement;

constructor(props: Props) {		constructor(props: Props) {
super(props);		super(props);
}		}
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	if (this.props.currentTabType === 'general') {
mainContent = (		mainContent = (
<ThreadSettingsGeneralTab		<ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))}		threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder}		threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName}		threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled}		threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef}		threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')}		threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription}		threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled}		threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')}		threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor}		threadColorOnColorSelection={this.onChangeColor}
/>		/>
);		);
} else if (this.props.currentTabType === 'privacy') {		} else if (this.props.currentTabType === 'privacy') {
mainContent = (		mainContent = (
<ThreadSettingsPrivacyTab		<ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Lines	class ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => {		nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput;		this.nameInput = nameInput;
};		};

accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {		accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput;		this.accountPasswordInput = accountPasswordInput;
};		};

onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};

onChangeColor = (color: string) => {		onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined;		const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({		this.props.setQueuedChanges({
...this.props.queuedChanges,		...this.props.queuedChanges,
color: newValue,		color: newValue,
});		});
};		};

▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines	const onChangeName = React.useCallback(
name: firstLine(		name: firstLine(
target.value !== threadInfo.name ? target.value : undefined,		target.value !== threadInfo.name ? target.value : undefined,
),		),
});		});
},		},
[queuedChanges, threadInfo],		[queuedChanges, threadInfo],
);		);

		const onChangeDescription = React.useCallback(
		(event: SyntheticEvent<HTMLTextAreaElement>) => {
		invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
		const target = event.currentTarget;
		setQueuedChanges({
		...queuedChanges,
		description:
		target.value !== threadInfo.description ? target.value : undefined,
		});
		},
		[queuedChanges, threadInfo],
		);

if (!threadInfo) {		if (!threadInfo) {
return (		return (
<Modal onClose={modalContext.clearModal} name="Invalid thread">		<Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}>		<div className={css.modal_body}>
<p>You no longer have permission to view this thread</p>		<p>You no longer have permission to view this thread</p>
</div>		</div>
</Modal>		</Modal>
);		);
Show All 17 Lines	return (
currentTabType={currentTabType}		currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType}		setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges}		queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges}		setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder}		namePlaceholder={namePlaceholder}
changeQueued={changeQueued}		changeQueued={changeQueued}
setTab={setTab}		setTab={setTab}
onChangeName={onChangeName}		onChangeName={onChangeName}
		onChangeDescription={onChangeDescription}
/>		/>
);		);
},		},
);		);

export default ConnectedThreadSettingsModal;		export default ConnectedThreadSettingsModal;

[native] Lift `onScroll` to `ConnectedChatThreadList`ClosedPublicActions