Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Components: Mimic URLInput request abort on fetch #8049

Merged
merged 3 commits into from
Jul 19, 2018
+56 −54
Merged

Components: Mimic URLInput request abort on fetch #8049

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ecd3d31
Components: Mimic URLInput request abort on fetch
aduth Jul 19, 2018
d53650a
Components: Compare URLInput request by reference
aduth Jul 19, 2018
67b062d
Components: Remove unused includes import
aduth Jul 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 56 additions & 54 deletions editor/components/url-input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,41 @@ const stopEventPropagation = ( event ) => event.stopPropagation();
class UrlInput extends Component {
constructor() {
super( ...arguments );

this.onChange = this.onChange.bind( this );
this.onKeyDown = this.onKeyDown.bind( this );
this.bindListNode = this.bindListNode.bind( this );
this.updateSuggestions = throttle( this.updateSuggestions.bind( this ), 200 );

this.suggestionNodes = [];

this.state = {
posts: [],
showSuggestions: false,
selectedSuggestion: null,
};
}

componentDidUpdate() {
const { showSuggestions, selectedSuggestion } = this.state;
// only have to worry about scrolling selected suggestion into view
// when already expanded
if ( showSuggestions && selectedSuggestion !== null && ! this.scrollingIntoView ) {
this.scrollingIntoView = true;
scrollIntoView( this.suggestionNodes[ selectedSuggestion ], this.listNode, {
onlyScrollIfNeeded: true,
} );

setTimeout( () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated, we should probably replace this with withSafeTimeout :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably not have setTimeout of any form 😉

this.scrollingIntoView = false;
}, 100 );
}
}

componentWillUnmount() {
delete this.suggestionsRequest;
}

bindListNode( ref ) {
this.listNode = ref;
}
Expand All @@ -48,10 +71,6 @@ class UrlInput extends Component {
}

updateSuggestions( value ) {
if ( this.suggestionsRequest ) {
this.suggestionsRequest.abort();
}

// Show the suggestions after typing at least 2 characters
// and also for URLs
if ( value.length < 2 || /^https?:/.test( value ) ) {
Expand All @@ -69,41 +88,46 @@ class UrlInput extends Component {
selectedSuggestion: null,
loading: true,
} );
this.suggestionsRequest = apiFetch( {

const request = apiFetch( {
path: `/wp/v2/posts?${ stringify( {
search: value,
per_page: 20,
orderby: 'relevance',
} ) }`,
} );

this.suggestionsRequest
.then(
( posts ) => {
this.setState( {
posts,
loading: false,
} );

if ( !! posts.length ) {
this.props.debouncedSpeak( sprintf( _n(
'%d result found, use up and down arrow keys to navigate.',
'%d results found, use up and down arrow keys to navigate.',
posts.length
), posts.length ), 'assertive' );
} else {
this.props.debouncedSpeak( __( 'No results.' ), 'assertive' );
}
},
( xhr ) => {
if ( xhr.statusText === 'abort' ) {
return;
}
this.setState( {
loading: false,
} );
}
);
request.then( ( posts ) => {
// A fetch Promise doesn't have an abort option. It's mimicked by
// comparing the request reference in on the instance, which is
// reset or deleted on subsequent requests or unmounting.
if ( this.suggestionsRequest !== request ) {
return;
}

this.setState( {
posts,
loading: false,
} );

if ( !! posts.length ) {
this.props.debouncedSpeak( sprintf( _n(
'%d result found, use up and down arrow keys to navigate.',
'%d results found, use up and down arrow keys to navigate.',
posts.length
), posts.length ), 'assertive' );
} else {
this.props.debouncedSpeak( __( 'No results.' ), 'assertive' );
}
} ).catch( () => {
if ( this.suggestionsRequest === request ) {
this.setState( {
loading: false,
} );
}
} );

this.suggestionsRequest = request;
}

onChange( event ) {
Expand Down Expand Up @@ -157,28 +181,6 @@ class UrlInput extends Component {
} );
}

componentWillUnmount() {
if ( this.suggestionsRequest ) {
this.suggestionsRequest.abort();
}
}

componentDidUpdate() {
const { showSuggestions, selectedSuggestion } = this.state;
// only have to worry about scrolling selected suggestion into view
// when already expanded
if ( showSuggestions && selectedSuggestion !== null && ! this.scrollingIntoView ) {
this.scrollingIntoView = true;
scrollIntoView( this.suggestionNodes[ selectedSuggestion ], this.listNode, {
onlyScrollIfNeeded: true,
} );

setTimeout( () => {
this.scrollingIntoView = false;
}, 100 );
}
}

render() {
const { value = '', autoFocus = true, instanceId } = this.props;
const { showSuggestions, posts, selectedSuggestion, loading } = this.state;
Expand Down