+
+ {
+ showLoading || !scroller ?
+ :
+
+ }
+ items={suggestions}
+ isSmallScreen={false}
+ scroller={scroller}
+ rowRenderer={this.rowRenderer}
+ />
+ }
+
diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieModalContentConnector.js b/frontend/src/InteractiveImport/Movie/SelectMovieModalContentConnector.js
index fdb739838..b728d9422 100644
--- a/frontend/src/InteractiveImport/Movie/SelectMovieModalContentConnector.js
+++ b/frontend/src/InteractiveImport/Movie/SelectMovieModalContentConnector.js
@@ -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.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;
+ }
+
+ return 0;
+ });
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createDeepEqualSelector(
+ createCleanMovieSelector(),
+ (movies) => {
return {
- items: [...items].sort((a, b) => {
- if (a.sortTitle < b.sortTitle) {
- return -1;
- }
-
- if (a.sortTitle > b.sortTitle) {
- return 1;
- }
-
- return 0;
- })
+ items: movies
};
}
);
diff --git a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css
index f84778bb5..6ebc63656 100644
--- a/frontend/src/InteractiveImport/Movie/SelectMovieRow.css
+++ b/frontend/src/InteractiveImport/Movie/SelectMovieRow.css
@@ -1,4 +1,5 @@
.movie {
padding: 8px;
+ width: 100%;
border-bottom: 1px solid $borderColor;
}