@performant-software/semantic-components 1.0.3 → 1.0.4-beta.0

package/types/components/FileUploadModal.js.flow

@@ -1,367 +1,275 @@
 // @flow
 
-import React, { Component, type ComponentType } from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  type ComponentType
+} from 'react';
 import {
   Button,
   Dimmer,
   Form,
   Item,
-  Loader,
-  Message,
+  Loader, Message,
   Modal
 } from 'semantic-ui-react';
 import _ from 'underscore';
-import i18n from '../i18n/i18n';
 import FileUpload from './FileUpload';
+import FileUploadStatus from './FileUploadStatus';
+import FileUploadProgress from './FileUploadProgress';
+import i18n from '../i18n/i18n';
 import ModalContext from '../context/ModalContext';
-import Toaster from './Toaster';
 
 type Props = {
   /**
-   * Content to display on the button used to open the modal
+   * If <code>true</code>, the modal will close once the upload has completed.
    */
-  button: string,
+  closeOnComplete?: boolean,
 
   /**
-   * Determines if the component should render a button as a trigger for the modal
+   * Component to render within the modal.
    */
-  includeButton?: boolean,
+  itemComponent: ComponentType<any>,
 
   /**
-   * Component to render within the modal
+   * Callback fired when a file is added.
    */
-  itemComponent: ComponentType<any>,
+  onAddFile: (file: File) => any,
 
   /**
-   * Callback fired when a file is added
+   * Callback fired when the close button is clicked.
    */
-  onAddFile: (file: File) => void,
+  onClose: () => void,
 
   /**
-   * Callback fired when the close button is clicked
+   * Callback fired when the save button is clicked. See <code>strategy</code> prop.
    */
-  onClose?: () => void,
+  onSave: (items: Array<any>) => Promise<any>,
 
   /**
-   * Callback fired when the save button is clicked
+   * An object with keys containing the names of properties that are required.
    */
-  onSave: (items: Array<any>) => Promise<any>,
+  required?: { [key: string]: string },
 
   /**
-   * An object with keys containing the names of properties that are required
+   * If <code>true</code>, a full page loader will display while uploading is in progress.
    */
-  required: { [string]: string },
+  showPageLoader?: boolean,
 
   /**
-   * Title value to display in the modal header
+   * The upload strategy to use. If <code>batch</code>, we'll execute one <code>onSave</code> request with each item
+   * as an array in the body. If <code>single</code>, we'll execute an <code>onSave</code> request for each item.
    */
-  title?: string
+  strategy?: string
 };
 
-type State = {
-  items: Array<any>,
-  modal: boolean,
-  saving: boolean
+const Strategy = {
+  batch: 'batch',
+  single: 'single'
 };
 
-const LIST_DELIMITER = ', ';
+const Status = {
+  pending: 'pending',
+  processing: 'processing',
+  complete: 'complete',
+  error: 'error'
+};
 
 /**
  * The <code>FileUploadModal</code> is a convenience wrapper for the <code>FileUpload</code> component, allowing
  * it to render in a modal.
  */
-class FileUploadModal extends Component<Props, State> {
+const FileUploadModal: ComponentType<any> = (props: Props) => {
+  const [items, setItems] = useState([]);
+  const [uploadCount, setUploadCount] = useState(0);
+  const [uploading, setUploading] = useState(false);
+  const [statuses, setStatuses] = useState({});
+
   /**
-   * Constructs a new FileUploadModal component.
-   *
-   * @param props
+   * Sets the <code>hasErrors</code> value to <code>true</code> if at least one item on the state contains errors.
    */
-  constructor(props: Props) {
-    super(props);
-
-    this.state = this.getInitialState();
-  }
+  const hasErrors = useMemo(() => !!_.find(items, (item) => !_.isEmpty(item.errors)), [items]);
 
   /**
-   * Returns the initial component state.
+   * Calls the <code>onAddFile</code> prop for each item in the passed collection of files and adds them
+   * to the items on the state.
    *
-   * @returns {{saving: boolean, items: [], modal: boolean}}
+   * @type {function(*): void}
    */
-  getInitialState() {
-    return {
-      items: [],
-      modal: !this.props.includeButton,
-      saving: false
-    };
-  }
+  const onAddFiles = useCallback((files) => (
+    setItems((prevItems) => [
+      ...prevItems,
+      ..._.map(files, props.onAddFile)
+    ])
+  ), []);
 
   /**
-   * Returns true if any of the items contain errors.
+   * Updates the passed association for the passed item.
    *
-   * @returns {boolean}
+   * @type {function(*, string, string, *): void}
    */
-  hasErrors() {
-    return !!_.find(this.state.items, (item) => !_.isEmpty(item.errors));
-  }
+  const onAssociationInputChange = useCallback((item: any, idAttribute: string, attribute: string, value: any) => (
+    setItems((prevItems) => _.map(prevItems, (i) => (i !== item ? i : {
+      ...i,
+      [idAttribute]: value.id,
+      [attribute]: value,
+      errors: _.without(item.errors, idAttribute)
+    })))
+  ), []);
 
   /**
-   * Adds the passed collection of files to the state. Typically files will be added as a property of another model.
-   * This component calls the onAddFiles prop to transform the items stored in the state.
+   * Calls the <code>onSave</code> prop with the current list of items.
    *
-   * @param files
+   * @type {function(): *}
    */
-  onAddFiles(files: Array<File>) {
-    this.setState((state) => ({
-      items: [
-        ...state.items,
-        ..._.map(files, this.props.onAddFile.bind(this))
-      ]
-    }));
-  }
+  const onBatchUpload = useCallback(() => (
+    props
+      .onSave(items)
+      .then(() => setUploadCount(1))
+  ), [items]);
 
   /**
-   * Updates the passed association for the passed item.
+   * Sets the uploading state <code>false</code> and calls the <code>onClose</code> prop if necessary.
    *
-   * @param item
-   * @param idAttribute
-   * @param attribute
-   * @param value
+   * @type {(function(): void)|*}
    */
-  onAssociationInputChange(item: any, idAttribute: string, attribute: string, value: any) {
-    this.setState((state) => ({
-      items: _.map(state.items, (i) => (i !== item ? i : ({
-        ...i,
-        [idAttribute]: value.id,
-        [attribute]: value,
-        errors: _.without(item.errors, idAttribute)
-      })))
-    }));
-  }
+  const onComplete = useCallback(() => {
+    setUploading(false);
 
-  /**
-   * Resets the state or calls the onClose prop.
-   */
-  onClose() {
-    if (this.props.onClose) {
-      this.props.onClose();
-    } else {
-      this.setState(this.getInitialState());
+    if (props.closeOnComplete) {
+      props.onClose();
     }
-  }
+  }, [props.closeOnComplete, props.onClose]);
 
   /**
    * Deletes the passed item from the state.
    *
-   * @param item
+   * @type {function(*): void}
    */
-  onDelete(item: any) {
-    this.setState((state) => ({
-      items: _.filter(state.items, (i) => i !== item)
-    }));
-  }
+  const onDelete = useCallback((item) => (
+    setItems((prevItems) => _.filter(prevItems, (i) => i !== item))
+  ), []);
 
   /**
-   * Clears the errors for all items in the state.
+   * Sets the status for the item at the passed index.
+   *
+   * @type {function(*, *): void}
    */
-  onDismissErrors() {
-    this.setState((state) => ({
-      items: _.map(state.items, (item) => _.omit(item, 'errors'))
-    }));
-  }
+  const setStatus = useCallback((index, status) => (
+    setStatuses((prevStatuses) => ({ ...prevStatuses, [index]: status }))
+  ));
 
   /**
-   * Validates the items and saves.
+   * Iterates of the list of items and sequentially calls the <code>onSave</code> prop for each.
+   *
+   * @type {function(): Promise<unknown>}
    */
-  onSave() {
-    this.setState((state) => ({
-      items: _.map(state.items, this.validateItem.bind(this))
-    }), this.save.bind(this));
-  }
+  const onSingleUpload = useCallback(async () => {
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+
+      // Update the status for the item
+      setStatus(i, Status.processing);
+
+      let error = false;
+
+      // Do the upload
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        await props.onSave(item);
+      } catch (e) {
+        error = true;
+      }
+
+      // Update the status for the item
+      if (error) {
+        setStatus(i, Status.error);
+      } else {
+        setStatus(i, Status.complete);
+      }
+
+      // Update the upload count
+      setUploadCount((prevCount) => prevCount + 1);
+    }
+
+    return Promise.resolve();
+  }, [items, props.onSave]);
 
   /**
    * Updates the text value for the passed item.
    *
-   * @param item
-   * @param attribute
-   * @param e
-   * @param value
+   * @type {function(*, string, Event, {value: *}): void}
    */
-  onTextInputChange(item: any, attribute: string, e: Event, { value }: { value: any }) {
-    this.setState((state) => ({
-      items: _.map(state.items, (i) => (i !== item ? i : ({
-        ...i,
-        [attribute]: value,
-        errors: _.without(item.errors, attribute)
-      })))
-    }));
-  }
+  const onTextInputChange = useCallback((item: any, attribute: string, e: Event, { value }: { value: any }) => (
+    setItems((prevItems) => _.map(prevItems, (i) => (i !== item ? i : {
+      ...i,
+      [attribute]: value,
+      errors: _.without(item.errors, attribute)
+    })))
+  ), []);
 
   /**
-   * Updates the passed item with the passed props.
+   * Updates the passed item with the passed object of attributes.
    *
-   * @param item
-   * @param props
+   * @type {function(*, *): void}
    */
-  onUpdate(item: any, props: any) {
-    this.setState((state) => ({
-      items: _.map(state.items, (i) => (i !== item ? i : ({
-        ...i,
-        ...props,
-        errors: _.without(item.errors, _.keys(props))
-      })))
-    }));
-  }
+  const onUpdate = useCallback((item, attributes) => (
+    setItems((prevItems) => _.map(prevItems, (i) => (i !== item ? i : { ...i, ...attributes })))
+  ), []);
 
   /**
-   * Renders the FileUploadModal component.
+   * Updates the passed item with the passed props.
    *
-   * @returns {*}
+   * @type {(function(): void)|*}
    */
-  render() {
-    return (
-      <>
-        { this.props.includeButton && (
-          <Button
-            content={this.props.button}
-            icon='cloud upload'
-            onClick={() => this.setState({ modal: true })}
-            primary
-          />
-        )}
-        { this.state.modal && (
-          <ModalContext.Consumer>
-            { (mountNode) => (
-              <Modal
-                centered={false}
-                className='file-upload-modal'
-                mountNode={mountNode}
-                open
-              >
-                <Dimmer
-                  active={this.state.saving}
-                  inverted
-                >
-                  <Loader
-                    content={i18n.t('FileUploadModal.loader')}
-                  />
-                </Dimmer>
-                { this.renderErrors() }
-                <Modal.Header
-                  content={this.props.title || i18n.t('FileUploadModal.title')}
-                />
-                <Modal.Content>
-                  <FileUpload
-                    onFilesAdded={this.onAddFiles.bind(this)}
-                  />
-                  { this.renderItems() }
-                </Modal.Content>
-                <Modal.Actions>
-                  <Button
-                    content={i18n.t('Common.buttons.save')}
-                    disabled={!(this.state.items && this.state.items.length)}
-                    primary
-                    onClick={this.onSave.bind(this)}
-                  />
-                  <Button
-                    basic
-                    content={i18n.t('Common.buttons.cancel')}
-                    onClick={this.onClose.bind(this)}
-                  />
-                </Modal.Actions>
-              </Modal>
-            )}
-          </ModalContext.Consumer>
-        )}
-      </>
-    );
-  }
+  const onUpload = useCallback(() => {
+    // Set the uploading indicator
+    setUploading(true);
+
+    // Upload the files
+    onValidate()
+      .then(() => (
+        props.strategy === Strategy.batch
+          ? onBatchUpload()
+          : onSingleUpload()
+      ))
+      .finally(onComplete);
+  }, [onBatchUpload, onComplete, onSingleUpload, props.strategy]);
 
   /**
-   * Renders the error modal.
+   * Validates the items on the state.
    *
-   * @returns {null|*}
+   * @type {function(): Promise<void>}
    */
-  renderErrors() {
-    if (!this.hasErrors()) {
-      return null;
-    }
+  const onValidate = useCallback(() => {
+    let error = false;
 
-    return (
-      <Toaster
-        onDismiss={this.onDismissErrors.bind(this)}
-        timeout={0}
-        type={Toaster.MessageTypes.negative}
-      >
-        <Message.Header
-          content={i18n.t('Common.messages.error.header')}
-        />
-        <Message.List>
-          { _.map(this.state.items, this.renderMessageItem.bind(this)) }
-        </Message.List>
-      </Toaster>
-    );
-  }
+    setItems((prevItems) => _.map(prevItems, (item) => {
+      const valid = validateItem(item);
 
-  /**
-   * Renders the passed item.
-   *
-   * @param item
-   *
-   * @returns {*}
-   */
-  renderItem(item: any) {
-    const FileItem = this.props.itemComponent;
-
-    return (
-      <FileItem
-        isError={(key) => _.contains(item.errors, key)}
-        isRequired={(key) => !!this.props.required[key]}
-        item={item}
-        onAssociationInputChange={this.onAssociationInputChange.bind(this, item)}
-        onDelete={this.onDelete.bind(this, item)}
-        onTextInputChange={this.onTextInputChange.bind(this, item)}
-        onUpdate={this.onUpdate.bind(this, item)}
-      />
-    );
-  }
+      if (!_.isEmpty(item.errors)) {
+        error = true;
+      }
 
-  /**
-   * Renders the list of items.
-   *
-   * @returns {null|*}
-   */
-  renderItems() {
-    if (!(this.state.items && this.state.items.length)) {
-      return null;
-    }
+      return valid;
+    }));
 
-    return (
-      <Item.Group
-        as={Form}
-        divided
-        noValidate
-        relaxed='very'
-      >
-        { _.map(this.state.items, this.renderItem.bind(this)) }
-      </Item.Group>
-    );
-  }
+    return error ? Promise.reject() : Promise.resolve();
+  }, [items]);
 
   /**
-   * Renders the errors message for the passed item.
-   *
-   * @param item
-   * @param index
+   * Renders the error message for the passed item.
    *
-   * @returns {null|*}
+   * @type {(function(*, *): (null|*))|*}
    */
-  renderMessageItem(item: any, index: number) {
+  const renderMessageItem = useCallback((item, index) => {
     if (_.isEmpty(item.errors)) {
       return null;
     }
 
     const filename = !_.isEmpty(item.name) ? item.name : `File ${index}`;
-    const fields = _.map(item.errors, (e) => this.props.required[e]).join(LIST_DELIMITER);
+    const fields = _.map(item.errors, (e) => props.required[e]).join(', ');
 
     return (
       <Message.Item
@@ -369,48 +277,17 @@ class FileUploadModal extends Component<Props, State> {
         key={index}
       />
     );
-  }
-
-  /**
-   * Saves the uploaded items.
-   */
-  save() {
-    if (this.hasErrors()) {
-      return;
-    }
-
-    this.setState({ saving: true }, () => {
-      this.props
-        .onSave(this.state.items)
-        .then(this.onClose.bind(this));
-    });
-  }
-
-  /**
-   * Validates the list of items.
-   */
-  validate() {
-    this.setState((state) => {
-      const items = _.map(state.items, this.validateItem.bind(this));
-
-      return {
-        items,
-        saving: !_.find(items, (item) => !_.isEmpty(item.errors))
-      };
-    }, this.save.bind(this));
-  }
+  }, []);
 
   /**
    * Validates the passed item.
    *
-   * @param item
-   *
-   * @returns {{errors: []}}
+   * @type {function(*): *&{errors: []}}
    */
-  validateItem(item: any) {
+  const validateItem = useCallback((item) => {
     const errors = [];
 
-    _.each(_.keys(this.props.required), (key) => {
+    _.each(_.keys(props.required), (key) => {
       const value = item[key];
       let invalid;
 
@@ -425,22 +302,119 @@ class FileUploadModal extends Component<Props, State> {
       }
     });
 
-    return { ...item, errors };
-  }
-}
+    return {
+      ...item,
+      errors
+    };
+  }, [props.required]);
 
-FileUploadModal.defaultProps = {
-  includeButton: true
+  /**
+   * Memoization and case correction for the <code>itemComponent</code> prop.
+   *
+   * @type {React$AbstractComponent<*, *>}
+   */
+  const UploadItem = useMemo(() => props.itemComponent, [props.itemComponent]);
+
+  return (
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          centered={false}
+          className='serial-upload-modal'
+          mountNode={mountNode}
+          open
+        >
+          { props.showPageLoader && (
+            <Dimmer
+              active={uploading}
+              inverted
+            >
+              <Loader
+                content={i18n.t('FileUploadModal.loader')}
+              />
+            </Dimmer>
+          )}
+          <Modal.Header>
+            { props.strategy === Strategy.batch && i18n.t('FileUploadModal.title') }
+            { props.strategy === Strategy.single && (
+              <FileUploadProgress
+                completed={uploadCount}
+                total={items.length}
+                uploading={uploading}
+              />
+            )}
+          </Modal.Header>
+          <Modal.Content
+            scrolling
+          >
+            { hasErrors && (
+              <Message
+                error
+              >
+                <Message.Header
+                  content={'An error occurred'}
+                />
+                <Message.List>
+                  { _.map(items, renderMessageItem) }
+                </Message.List>
+              </Message>
+            )}
+            <FileUpload
+              onFilesAdded={onAddFiles}
+            />
+            <Item.Group
+              as={Form}
+              divided
+              noValidate
+              relaxed='very'
+            >
+              { _.map(items, (item, index) => (
+                <UploadItem
+                  isError={(key) => _.contains(item.errors, key)}
+                  isRequired={(key) => !!(props.required && props.required[key])}
+                  item={item}
+                  key={index}
+                  onAssociationInputChange={onAssociationInputChange.bind(this, item)}
+                  onDelete={onDelete.bind(this, item)}
+                  onTextInputChange={onTextInputChange.bind(this, item)}
+                  onUpdate={onUpdate.bind(this, item)}
+                >
+                  { props.strategy === Strategy.single && (
+                    <FileUploadStatus
+                      status={statuses[index]}
+                    />
+                  )}
+                </UploadItem>
+              ))}
+            </Item.Group>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              content={i18n.t('Common.buttons.upload')}
+              disabled={uploading || uploadCount > 0}
+              icon='cloud upload'
+              loading={uploading && !props.showPageLoader}
+              onClick={onUpload}
+              primary
+            />
+            <Button
+              content={uploadCount > 0
+                ? i18n.t('Common.buttons.close')
+                : i18n.t('Common.buttons.cancel')}
+              disabled={uploading}
+              onClick={props.onClose}
+            />
+          </Modal.Actions>
+        </Modal>
+      )}
+    </ModalContext.Consumer>
+  );
 };
 
-export type FileUploadProps = {
-  isError: (key: string) => boolean,
-  isRequired: (key: string) => boolean,
-  item: any,
-  onAssociationInputChange: (idKey: string, valueKey: string, item: any) => void,
-  onDelete: (item: any) => void,
-  onTextInputChange: (item: any, value: any) => void,
-  onUpdate: (item: any, props: any) => void
+FileUploadModal.defaultProps = {
+  closeOnComplete: true,
+  strategy: Strategy.batch,
+  showPageLoader: true
 };
 
 export default FileUploadModal;