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 @@ -96,6 +96,7 @@ +namePlaceholder: string, +changeQueued: boolean, +onChangeName: (event: SyntheticEvent) => void, + +onChangeDescription: (event: SyntheticEvent) => void, }; class ThreadSettingsModal extends React.PureComponent { nameInput: ?HTMLInputElement; @@ -171,7 +172,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} @@ -294,20 +295,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( - Object.freeze({ - ...this.props.queuedChanges, - description: newValue, - }), - ); - }; - onChangeColor = (color: string) => { const newValue = color !== this.props.threadInfo.color ? color : undefined; this.props.setQueuedChanges( @@ -452,6 +439,19 @@ [queuedChanges, threadInfo?.name], ); + 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 ( @@ -484,6 +484,7 @@ namePlaceholder={namePlaceholder} changeQueued={changeQueued} onChangeName={onChangeName} + onChangeDescription={onChangeDescription} /> ); },