All files / components/sample-documents sample-documents.jsx

93.33% Statements 14/15
50% Branches 1/2
100% Functions 0/0
93.33% Lines 14/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 1081x 1x 1x 1x 1x 1x 1x   1x                                                                     4x   4x                                           4x   4x                                           4x                             1x  
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import CheckCircle from 'components/check-circle';
import CrossCircle from 'components/cross-circle';
import DocumentPreview from 'components/document-preview';
import LoadingOverlay from 'components/loading-overlay';
 
import styles from './sample-documents.less';
 
/**
 * The Sample Documents editor component.
 */
class SampleDocuments extends Component {
  static displayName = 'SampleDocuments';
 
  static propTypes = {
    sampleDocuments: PropTypes.shape({
      matching: PropTypes.object,
      notmatching: PropTypes.object,
      isLoading: PropTypes.bool
    })
  };
 
  /**
   * Should the component update?
   *
   * @param {Object} nextProps - The next properties.
   *
   * @returns {Boolean} If the component should update.
   */
  shouldComponentUpdate(nextProps) {
    return (
      nextProps.sampleDocuments.isLoading !== this.props.sampleDocuments.isLoading
    );
  }
 
  /**
   * Render matching documents.
   *
   * @returns {React.Component} The component.
   */
  renderMatchingDocuments() {
    const title = 'Sample Document That Passed Validation';
 
    return (
      <div className={classnames(
        styles['document-container'],
        styles['matching-documents']
      )}>
        <CheckCircle />
        <span className={classnames(styles['matching-documents-title'])}>
          {title}
        </span>
        <DocumentPreview
          document={this.props.sampleDocuments.matching}
        />
      </div>
    );
  }
 
  /**
   * Render not matching documents.
   *
   * @returns {React.Component} The component.
   */
  renderNotMatchingDocuments() {
    const title = 'Sample Document That Failed Validation';
 
    return (
      <div className={classnames(
        styles['document-container'],
        styles['notmatching-documents']
      )}>
        <CrossCircle />
        <span className={classnames(styles['matching-documents-title'])}>
          {title}
        </span>
        <DocumentPreview
          document={this.props.sampleDocuments.notmatching}
        />
      </div>
    );
  }
 
  /**
   * Render ValidationEditor component.
   *
   * @returns {React.Component} The rendered component.
   */
  render() {
    return (
      <div className={classnames(styles['sample-documents'])}>
        <div className={classnames(styles['sample-documents-content'])}>
          { this.props.sampleDocuments.isLoading ?
            <LoadingOverlay text="Sampling Document..." /> :
            null
          }
          {this.renderMatchingDocuments()}
          {this.renderNotMatchingDocuments()}
        </div>
      </div>
    );
  }
}
 
export default SampleDocuments;