diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js --- a/web/modals/threads/thread-settings-modal.react.js +++ b/web/modals/threads/thread-settings-modal.react.js @@ -97,6 +97,7 @@ +changeQueued: boolean, +setTab: (tabType: TabType) => void, +onChangeName: (event: SyntheticEvent) => void, + +onChangeDescription: (event: SyntheticEvent) => void, }; class ThreadSettingsModal extends React.PureComponent { nameInput: ?HTMLInputElement; @@ -172,7 +173,7 @@ threadNameDisabled={inputDisabled} threadNameInputRef={this.nameInputRef} threadDescriptionValue={this.possiblyChangedValue('description')} - threadDescriptionOnChange={this.onChangeDescription} + threadDescriptionOnChange={this.props.onChangeDescription} threadDescriptionDisabled={inputDisabled} threadColorCurrentColor={this.possiblyChangedValue('color')} threadColorOnColorSelection={this.onChangeColor} @@ -291,18 +292,6 @@ this.accountPasswordInput = accountPasswordInput; }; - onChangeDescription = (event: SyntheticEvent) => { - 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) => { const newValue = color !== this.props.threadInfo.color ? color : undefined; this.props.setQueuedChanges({ @@ -447,6 +436,19 @@ [queuedChanges, threadInfo], ); + const onChangeDescription = React.useCallback( + (event: SyntheticEvent) => { + 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) { return ( @@ -480,6 +482,7 @@ changeQueued={changeQueued} setTab={setTab} onChangeName={onChangeName} + onChangeDescription={onChangeDescription} /> ); },