app/addons/documents/changes/components/ChangesScreen.js

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import ChangeRow from './ChangeRow';

export default class ChangesScreen extends React.Component {
  constructor (props) {
    super(props);
    this.props.loadChanges(this.props.databaseName);
  }

  showingSubsetMsg () {
    const { isShowingSubset, changes } = this.props;
    let msg = '';
    if (isShowingSubset) {
      let numChanges = changes.length;
      msg = <p className="changes-result-limit">Limiting results to latest <b>{numChanges}</b> changes.</p>;
    }
    return msg;
  }

  getRows () {
    const { changes, loaded, databaseName } = this.props;
    if (!changes.length && loaded) {
      return (
        <p className="no-doc-changes">
          There are no document changes to display.
        </p>
      );
    }

    return changes.map((change, i) => {
      return <ChangeRow change={change} key={i} databaseName={databaseName} />;
    });
  }

  render () {
    return (
      <div>
        <div className="js-changes-view">
          {this.showingSubsetMsg()}
          {this.getRows()}
        </div>
      </div>
    );
  }
}

ChangesScreen.propTypes = {
  changes: PropTypes.array.isRequired,
  loaded: PropTypes.bool.isRequired,
  databaseName: PropTypes.string.isRequired,
  isShowingSubset: PropTypes.bool.isRequired,
  loadChanges: PropTypes.func.isRequired
};