selectChannel: sync auto-resolved value during mounting.

## Issue
Fixes `4621 Can't create Comments if you recently deleted a channel`

The `channel` that the parent passes in is from a persisted state. If the channel has been deleted, `<select>` will automatically resolve to another selectable value. However, `onChange` will not be called for this scenario, so we now have a mismatch.

## Changes
- Manually check if the value has been auto-resolved and report it to the parent.
- An extra `setTimeout` was needed. It seems like `onChannelChange` needs to be called after the first `useEffect` of the parent, otherwise the call has no effect.
This commit is contained in:
infiinte-persistence 2020-08-04 15:56:15 +08:00 committed by Sean Yesmunt
parent d64d278676
commit 37a1fd88e3
2 changed files with 14 additions and 1 deletions

View file

@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Fixed ### Fixed
- Fix sluggish Back button when navigation back to channels with lots of comments _community pr!_ ([#4576](https://github.com/lbryio/lbry-desktop/pull/4576)) - Fix sluggish Back button when navigation back to channels with lots of comments _community pr!_ ([#4576](https://github.com/lbryio/lbry-desktop/pull/4576))
- Fix 'Related' and 'Comments' section lazy-load not working in some scenarios _community pr!_ ([#4586](https://github.com/lbryio/lbry-desktop/pull/4586)) - Fix 'Related' and 'Comments' section lazy-load not working in some scenarios _community pr!_ ([#4586](https://github.com/lbryio/lbry-desktop/pull/4586))
- Fix comment-creation failure if you have recently deleted a channel _community pr!_ ([#4630](https://github.com/lbryio/lbry-desktop/pull/4630))
## [0.47.1] - [2020-07-23] ## [0.47.1] - [2020-07-23]

View file

@ -23,6 +23,8 @@ type State = {
addingChannel: boolean, addingChannel: boolean,
}; };
const ID_FF_SELECT_CHANNEL = 'ID_FF_SELECT_CHANNEL';
class ChannelSelection extends React.PureComponent<Props, State> { class ChannelSelection extends React.PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -36,7 +38,7 @@ class ChannelSelection extends React.PureComponent<Props, State> {
} }
componentDidMount() { componentDidMount() {
const { channels, fetchChannelListMine, fetchingChannels, emailVerified } = this.props; const { channel, channels, fetchChannelListMine, fetchingChannels, emailVerified, onChannelChange } = this.props;
if (IS_WEB && !emailVerified) { if (IS_WEB && !emailVerified) {
return; return;
} }
@ -44,6 +46,15 @@ class ChannelSelection extends React.PureComponent<Props, State> {
if ((!channels || !channels.length) && !fetchingChannels) { if ((!channels || !channels.length) && !fetchingChannels) {
fetchChannelListMine(); fetchChannelListMine();
} }
const elem = document.getElementById(ID_FF_SELECT_CHANNEL);
// $FlowFixMe
if (elem && elem.value && elem.value !== channel) {
setTimeout(() => {
// $FlowFixMe
onChannelChange(elem.value);
}, 250);
}
} }
componentDidUpdate() { componentDidUpdate() {
@ -84,6 +95,7 @@ class ChannelSelection extends React.PureComponent<Props, State> {
return ( return (
<Fragment> <Fragment>
<FormField <FormField
id={ID_FF_SELECT_CHANNEL}
name="channel" name="channel"
label={label || __('Channel')} label={label || __('Channel')}
type="select" type="select"