Fixed: Selecting edition for books in manual import

frontend/src/InteractiveImport/Edition/SelectEditionModalContent.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
 import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
@@ -9,7 +10,8 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { scrollDirections } from 'Helpers/Props';
-import SelectEditionRow from './SelectEditionRow';
+import translate from 'Utilities/String/translate';
+import SelectEditionRowConnector from './SelectEditionRowConnector';
 import styles from './SelectEditionModalContent.css';
 
 const columns = [
@@ -33,15 +35,30 @@ class SelectEditionModalContent extends Component {
   render() {
     const {
       books,
+      isPopulated,
+      isFetching,
+      error,
       onEditionSelect,
       onModalClose,
       ...otherProps
     } = this.props;
 
+    if (!isPopulated && !error) {
+      return (<LoadingIndicator />);
+    }
+
+    if (!isFetching && error) {
+      return (
+        <div>
+          {translate('LoadingEditionsFailed')}
+        </div>
+      );
+    }
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Manual Import - Select Edition
+          {translate('ManualImportSelectEdition')}
         </ModalHeader>
 
         <ModalBody
@@ -60,7 +77,7 @@ class SelectEditionModalContent extends Component {
               {
                 books.map((item) => {
                   return (
-                    <SelectEditionRow
+                    <SelectEditionRowConnector
                       key={item.book.id}
                       matchedEditionId={item.matchedEditionId}
                       columns={columns}
@@ -76,7 +93,7 @@ class SelectEditionModalContent extends Component {
 
         <ModalFooter>
           <Button onPress={onModalClose}>
-            Cancel
+            {translate('Cancel')}
           </Button>
         </ModalFooter>
       </ModalContent>
@@ -86,6 +103,9 @@ class SelectEditionModalContent extends Component {
 
 SelectEditionModalContent.propTypes = {
   books: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isFetching: PropTypes.bool,
+  isPopulated: PropTypes.bool,
+  error: PropTypes.object,
   onEditionSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/InteractiveImport/Edition/SelectEditionModalContentConnector.js

@@ -1,27 +1,71 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearEditions, fetchEditions } from 'Store/Actions/editionActions';
 import {
   saveInteractiveImportItem,
   updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import SelectEditionModalContent from './SelectEditionModalContent';
 
 function createMapStateToProps() {
-  return {};
+  return createSelector(
+    (state) => state.editions,
+    (editions) => {
+      const {
+        isFetching,
+        isPopulated,
+        error
+      } = editions;
+
+      return {
+        isFetching,
+        isPopulated,
+        error
+      };
+    }
+  );
 }
 
 const mapDispatchToProps = {
+  fetchEditions,
+  clearEditions,
   updateInteractiveImportItem,
   saveInteractiveImportItem
 };
 
 class SelectEditionModalContentConnector extends Component {
 
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    registerPagePopulator(this.populate);
+    this.populate();
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.populate);
+    this.unpopulate();
+  }
+  //
+  // Control
+
+  populate = () => {
+    const bookId = this.props.books.map((b) => b.book.id);
+
+    this.props.fetchEditions({ bookId });
+  }
+
+  unpopulate = () => {
+    this.props.clearEditions();
+  }
+
   //
   // Listeners
 
   onEditionSelect = (bookId, foreignEditionId) => {
-    console.log(`book: ${bookId} id: ${foreignEditionId} ${typeof foreignEditionId}`);
     const ids = this.props.importIdsByBook[bookId];
 
     ids.forEach((id) => {
@@ -55,6 +99,8 @@ class SelectEditionModalContentConnector extends Component {
 SelectEditionModalContentConnector.propTypes = {
   importIdsByBook: PropTypes.object.isRequired,
   books: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchEditions: PropTypes.func.isRequired,
+  clearEditions: PropTypes.func.isRequired,
   updateInteractiveImportItem: PropTypes.func.isRequired,
   saveInteractiveImportItem: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired

frontend/src/InteractiveImport/Edition/SelectEditionRowConnector.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import SelectEditionRow from './SelectEditionRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { id }) => id,
+    (state) => state.editions,
+    (id, editionState) => {
+      const editions = editionState.items.filter((e) => e.bookId === id);
+      return { editions };
+    }
+  );
+}
+
+class SelectEditionRowConnector extends Component {
+  render() {
+    return (
+      <SelectEditionRow
+        {...this.props}
+      />
+    );
+  }
+}
+
+SelectEditionRowConnector.PropTypes = {
+  editions: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default connect(createMapStateToProps)(SelectEditionRowConnector);