New: Select Multiple Languages on Manual Import

frontend/src/InteractiveImport/Language/SelectLanguageModalContent.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import { inputTypes } from 'Helpers/Props';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Form from 'Components/Form/Form';
@@ -11,71 +11,130 @@ 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 styles from './SelectLanguageModalContent.css';
 
-function SelectLanguageModalContent(props) {
-  const {
-    languageId,
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    onModalClose,
-    onLanguageSelect
-  } = props;
+class SelectLanguageModalContent extends Component {
 
-  const languageOptions = items.map(( language ) => {
-    return {
-      key: language.id,
-      value: language.name
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      languageIds
+    } = props;
+
+    this.state = {
+      languageIds
     };
-  });
+  }
 
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        Manual Import - Select Language
-      </ModalHeader>
+  //
+  // Listeners
 
-      <ModalBody>
-        {
-          isFetching &&
-            <LoadingIndicator />
-        }
+  onLanguageChange = ({ value, name }) => {
+    const {
+      languageIds
+    } = this.state;
 
-        {
-          !isFetching && !!error &&
-            <div>Unable to load languages</div>
-        }
+    const changedId = parseInt(name);
 
-        {
-          isPopulated && !error &&
-            <Form>
-              <FormGroup>
-                <FormLabel>Language</FormLabel>
+    let newLanguages = languageIds;
 
-                <FormInputGroup
-                  type={inputTypes.SELECT}
-                  name="language"
-                  value={languageId}
-                  values={languageOptions}
-                  onChange={onLanguageSelect}
-                />
-              </FormGroup>
-            </Form>
-        }
-      </ModalBody>
+    if (value) {
+      newLanguages.push(changedId);
+    }
 
-      <ModalFooter>
-        <Button onPress={onModalClose}>
-          Cancel
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
+    if (!value) {
+      newLanguages = languageIds.filter((i) => i !== changedId);
+    }
+
+    this.setState({ languageIds: newLanguages });
+  }
+
+  onLanguageSelect = () => {
+    this.props.onLanguageSelect(this.state);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      onModalClose
+    } = this.props;
+
+    const {
+      languageIds
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Select Language
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to load languages</div>
+          }
+
+          {
+            isPopulated && !error &&
+              <Form>
+                {
+                  items.map(( language ) => {
+                    return (
+                      <FormGroup
+                        key={language.id}
+                        size={sizes.EXTRA_SMALL}
+                        className={styles.languageInput}
+                      >
+                        <FormLabel>{language.name}</FormLabel>
+                        <FormInputGroup
+                          type={inputTypes.CHECK}
+                          name={language.id.toString()}
+                          value={languageIds.includes(language.id)}
+                          onChange={this.onLanguageChange}
+                        />
+                      </FormGroup>
+                    );
+                  })
+                }
+              </Form>
+          }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+
+          <Button
+            kind={kinds.SUCCESS}
+            onPress={this.onLanguageSelect}
+          >
+            Select Languges
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
 }
 
 SelectLanguageModalContent.propTypes = {
-  languageId: PropTypes.number.isRequired,
+  languageIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
@@ -84,4 +143,8 @@ SelectLanguageModalContent.propTypes = {
   onModalClose: PropTypes.func.isRequired
 };
 
+SelectLanguageModalContent.defaultProps = {
+  languages: []
+};
+
 export default SelectLanguageModalContent;