Fixed: Improve performance of Manual Import movie selector

pull/4102/head
ta264 5 years ago committed by Qstick
parent d5ddebb7ac
commit 4c5490df94

@ -14,7 +14,7 @@
}
.scroller {
flex: 1 1 auto;
min-height: 1px;
}
.footer {

@ -1,6 +1,9 @@
import _ from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { scrollDirections } from 'Helpers/Props';
import VirtualTable from 'Components/Table/VirtualTable';
import VirtualTableRow from 'Components/Table/VirtualTableRow';
import Button from 'Components/Link/Button';
import Scroller from 'Components/Scroller/Scroller';
import TextInput from 'Components/Form/TextInput';
@ -8,9 +11,13 @@ import ModalContent from 'Components/Modal/ModalContent';
import ModalHeader from 'Components/Modal/ModalHeader';
import ModalBody from 'Components/Modal/ModalBody';
import ModalFooter from 'Components/Modal/ModalFooter';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import SelectMovieRow from './SelectMovieRow';
import FuseWorker from 'Components/Page/Header/fuse.worker';
import styles from './SelectMovieModalContent.css';
const workerInstance = new FuseWorker();
class SelectMovieModalContent extends Component {
//
@ -20,15 +27,84 @@ class SelectMovieModalContent extends Component {
super(props, context);
this.state = {
filter: ''
scroller: null,
filter: '',
showLoading: false,
suggestions: props.items
};
}
componentDidMount() {
workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
}
//
// Control
setScrollerRef = (ref) => {
this.setState({ scroller: ref });
}
rowRenderer = ({ key, rowIndex, style }) => {
const item = this.state.suggestions[rowIndex];
return (
<VirtualTableRow
key={key}
style={style}
>
<SelectMovieRow
key={item.id}
id={item.id}
title={item.title}
year={item.year}
onMovieSelect={this.props.onMovieSelect}
/>
</VirtualTableRow>
);
}
//
// Listeners
onFilterChange = ({ value }) => {
this.setState({ filter: value.toLowerCase() });
if (value) {
this.setState({
showLoading: true,
filter: value.toLowerCase()
});
this.requestSuggestions(value);
} else {
this.setState({
showLoading: false,
filter: '',
suggestions: this.props.items
});
this.requestSuggestions.cancel();
}
}
requestSuggestions = _.debounce((value) => {
const payload = {
value,
movies: this.props.items
};
workerInstance.postMessage(payload);
}, 250);
onSuggestionsReceived = (message) => {
this.setState((state, props) => {
// this guards against setting a stale set of suggestions returned
// after the filter has been cleared
if (state.filter !== '') {
return {
showLoading: false,
suggestions: message.data.map((suggestion) => suggestion.item)
};
}
return {};
});
}
//
@ -36,13 +112,16 @@ class SelectMovieModalContent extends Component {
render() {
const {
items,
relativePath,
onMovieSelect,
onModalClose
} = this.props;
const filter = this.state.filter;
const {
scroller,
filter,
showLoading,
suggestions
} = this.state;
return (
<ModalContent onModalClose={onModalClose}>
@ -58,29 +137,32 @@ class SelectMovieModalContent extends Component {
>
<TextInput
className={styles.filterInput}
placeholder="Filter movie"
placeholder="Search movies"
name="filter"
value={filter}
autoFocus={true}
onChange={this.onFilterChange}
/>
<Scroller className={styles.scroller}>
{
items.map((item) => {
return item.title.toLowerCase().includes(filter) ?
(
<SelectMovieRow
key={item.id}
id={item.id}
title={item.title}
year={item.year}
onMovieSelect={onMovieSelect}
/>
) :
null;
})
}
<Scroller
registerScroller={this.setScrollerRef}
className={styles.scroller}
>
<div>
{
showLoading || !scroller ?
<LoadingIndicator /> :
<VirtualTable
header={
<div />
}
items={suggestions}
isSmallScreen={false}
scroller={scroller}
rowRenderer={this.rowRenderer}
/>
}
</div>
</Scroller>
</ModalBody>

@ -4,24 +4,55 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
import SelectMovieModalContent from './SelectMovieModalContent';
function createMapStateToProps() {
function createCleanMovieSelector() {
return createSelector(
createAllMoviesSelector(),
(items) => {
return {
items: [...items].sort((a, b) => {
if (a.sortTitle < b.sortTitle) {
return -1;
}
return items.map((movie) => {
const {
id,
title,
titleSlug,
sortTitle,
year,
images,
alternateTitles = []
} = movie;
return {
id,
title,
titleSlug,
sortTitle,
year,
images,
alternateTitles,
firstCharacter: title.charAt(0).toLowerCase()
};
}).sort((a, b) => {
if (a.sortTitle < b.sortTitle) {
return -1;
}
if (a.sortTitle > b.sortTitle) {
return 1;
}
if (a.sortTitle > b.sortTitle) {
return 1;
}
return 0;
});
}
);
}
return 0;
})
function createMapStateToProps() {
return createDeepEqualSelector(
createCleanMovieSelector(),
(movies) => {
return {
items: movies
};
}
);

@ -1,4 +1,5 @@
.movie {
padding: 8px;
width: 100%;
border-bottom: 1px solid $borderColor;
}

Loading…
Cancel
Save