Renames in Frontend

frontend/src/Author/Editor/Delete/DeleteAuthorModal.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DeleteAuthorModalContentConnector from './DeleteAuthorModalContentConnector';
+
+function DeleteAuthorModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <DeleteAuthorModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+DeleteAuthorModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default DeleteAuthorModal;

frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css

@@ -0,0 +1,13 @@
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.pathContainer {
+  margin-left: 5px;
+}
+
+.path {
+  margin-left: 5px;
+  color: $dangerColor;
+}

frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds } from 'Helpers/Props';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import Button from 'Components/Link/Button';
+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 './DeleteAuthorModalContent.css';
+
+class DeleteAuthorModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      deleteFiles: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDeleteFilesChange = ({ value }) => {
+    this.setState({ deleteFiles: value });
+  }
+
+  onDeleteAuthorConfirmed = () => {
+    const deleteFiles = this.state.deleteFiles;
+
+    this.setState({ deleteFiles: false });
+    this.props.onDeleteSelectedPress(deleteFiles);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      author,
+      onModalClose
+    } = this.props;
+    const deleteFiles = this.state.deleteFiles;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Delete Selected Author
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            <FormGroup>
+              <FormLabel>{`Delete Author Folder${author.length > 1 ? 's' : ''}`}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="deleteFiles"
+                value={deleteFiles}
+                helpText={`Delete Author Folder${author.length > 1 ? 's' : ''} and all contents`}
+                kind={kinds.DANGER}
+                onChange={this.onDeleteFilesChange}
+              />
+            </FormGroup>
+          </div>
+
+          <div className={styles.message}>
+            {`Are you sure you want to delete ${author.length} selected author${author.length > 1 ? 's' : ''}${deleteFiles ? ' and all contents' : ''}?`}
+          </div>
+
+          <ul>
+            {
+              author.map((s) => {
+                return (
+                  <li key={s.authorName}>
+                    <span>{s.authorName}</span>
+
+                    {
+                      deleteFiles &&
+                        <span className={styles.pathContainer}>
+                          -
+                          <span className={styles.path}>
+                            {s.path}
+                          </span>
+                        </span>
+                    }
+                  </li>
+                );
+              })
+            }
+          </ul>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+
+          <Button
+            kind={kinds.DANGER}
+            onPress={this.onDeleteAuthorConfirmed}
+          >
+            Delete
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+DeleteAuthorModalContent.propTypes = {
+  author: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onDeleteSelectedPress: PropTypes.func.isRequired
+};
+
+export default DeleteAuthorModalContent;

frontend/src/Author/Editor/Delete/DeleteAuthorModalContentConnector.js

@@ -0,0 +1,45 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createAllAuthorSelector from 'Store/Selectors/createAllAuthorsSelector';
+import { bulkDeleteAuthor } from 'Store/Actions/authorEditorActions';
+import DeleteAuthorModalContent from './DeleteAuthorModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { authorIds }) => authorIds,
+    createAllAuthorSelector(),
+    (authorIds, allAuthors) => {
+      const selectedAuthor = _.intersectionWith(allAuthors, authorIds, (s, id) => {
+        return s.id === id;
+      });
+
+      const sortedAuthor = _.orderBy(selectedAuthor, 'sortName');
+      const author = _.map(sortedAuthor, (s) => {
+        return {
+          authorName: s.authorName,
+          path: s.path
+        };
+      });
+
+      return {
+        author
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onDeleteSelectedPress(deleteFiles) {
+      dispatch(bulkDeleteAuthor({
+        authorIds: props.authorIds,
+        deleteFiles
+      }));
+
+      props.onModalClose();
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(DeleteAuthorModalContent);