Page MenuHomePhabricator
Differential D9172

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

Authored by atul on Sep 12 2023, 4:51 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:38 AM
Unknown Object (File)
Tue, Mar 18, 5:22 AM
Unknown Object (File)
Tue, Mar 11, 6:05 AM
Unknown Object (File)
Feb 24 2025, 10:22 PM
Unknown Object (File)
Feb 24 2025, 7:05 AM
Unknown Object (File)
Feb 14 2025, 6:43 AM
View All 100 Files
Subscribers
ashoat

Details

Reviewers
ginsu
tomek
rohan
Commits
rCOMMbc069c45e99f: [native] Lift `hardwareBack` 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 D9171

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/
39 lines

Diff 31087

View Options

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

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype 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 Linesclass 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;