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,20 +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( - Object.freeze({ - ...this.props.queuedChanges, - description: newValue, - }), - ); - }; - onChangeColor = (color: string) => { const newValue = color !== this.props.threadInfo.color ? color : undefined; this.props.setQueuedChanges( @@ -453,6 +440,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 ( @@ -486,6 +486,7 @@ changeQueued={changeQueued} setTab={setTab} onChangeName={onChangeName} + onChangeDescription={onChangeDescription} /> ); },