<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Helmet } from 'react-helmet';
import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl';
import Waypoint from 'react-waypoint';

import {
    fetchCollection,
    fetchCollectionXrefMatches,
    fetchNextCollectionXrefMatches,
    fetchCollectionXrefIndex } from 'src/actions';
import Entity from 'src/components/EntityScreen/Entity';
import Screen from 'src/components/common/Screen';
import Date from 'src/components/common/Date';
import Country from 'src/components/common/Country';
import ScreenLoading from 'src/components/common/ScreenLoading';
import SectionLoading from 'src/components/common/SectionLoading';
import Breadcrumbs from 'src/components/common/Breadcrumbs';
import { matchesKey } from 'src/selectors';
import getPath from 'src/util/getPath';

import './CollectionXrefScreen.css';


class CollectionXrefScreen extends Component {
  constructor() {
    super()

    this.onOtherChange = this.onOtherChange.bind(this)
    this.onLoadMore = this.onLoadMore.bind(this)
  }

  componentDidMount() {
    this.fetchData()
  }

  componentDidUpdate(prevProps) {
    const { collectionId, otherId } = this.props;
    if (collectionId !== prevProps.collectionId || otherId !== prevProps.otherId) {
      this.fetchData();
    }
  }

  fetchData() {
    const { collectionId, otherId } = this.props;
    this.props.fetchCollection({ id: collectionId });
    this.props.fetchCollection({ id: otherId });
    this.props.fetchCollectionXrefMatches(collectionId, otherId);
    this.props.fetchCollectionXrefIndex(collectionId);
  }

  onOtherChange({ target }) {
    const { collection, otherId, history } = this.props;
    if (otherId !== target.value) {
      history.push({
        pathname: getPath(collection.links.ui) + '/xref/' + target.value
      })
    }
  }

  onLoadMore() {
    const { collectionId, otherId, matches } = this.props;
    if (matches.next && !matches.isExpanding) {
      this.props.fetchNextCollectionXrefMatches(collectionId, otherId, matches);
    } 
  }

  render() {
    const { collection, other, index, matches } = this.props;
    const loading = collection === undefined || collection.isFetching || other === undefined || other.isFetching;

    if (loading || !matches || !index) {
      return <ScreenLoading />;
    }
    
    return (
      <Screen>
        <Helmet>
          <title>{collection.label}</title>
        </Helmet>
        <Breadcrumbs collection={collection} />
        <table className="CollectionXrefScreen data-table">
          <thead>
            <tr>
              <th></th><commit_msg>Make redux store do some caching.<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Helmet } from 'react-helmet';
import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl';
import Waypoint from 'react-waypoint';

import {
    fetchCollection,
    fetchCollectionXrefMatches,
    fetchNextCollectionXrefMatches,
    fetchCollectionXrefIndex } from 'src/actions';
import Entity from 'src/components/EntityScreen/Entity';
import Screen from 'src/components/common/Screen';
import Date from 'src/components/common/Date';
import Country from 'src/components/common/Country';
import ScreenLoading from 'src/components/common/ScreenLoading';
import SectionLoading from 'src/components/common/SectionLoading';
import Breadcrumbs from 'src/components/common/Breadcrumbs';
import { matchesKey } from 'src/selectors';
import getPath from 'src/util/getPath';

import './CollectionXrefScreen.css';


class CollectionXrefScreen extends Component {
  constructor() {
    super()

    this.onOtherChange = this.onOtherChange.bind(this)
    this.onLoadMore = this.onLoadMore.bind(this)
  }

  componentDidMount() {
    this.fetchData()
  }

  componentDidUpdate(prevProps) {
    const { collectionId, otherId } = this.props;
    if (collectionId !== prevProps.collectionId || otherId !== prevProps.otherId) {
      this.fetchData();
    }
  }

  fetchData() {
    const { collectionId, otherId, index } = this.props;
    const { collection, other } = this.props;
    if (!collection || !collection.id) {
      this.props.fetchCollection({ id: collectionId });
    }
    if (!other || !other.id) {
      this.props.fetchCollection({ id: otherId });
    }
    if (!index || !index.total) {
      this.props.fetchCollectionXrefIndex(collectionId);
    }
    this.props.fetchCollectionXrefMatches(collectionId, otherId);
  }

  onOtherChange({ target }) {
    const { collection, otherId, history } = this.props;
    if (otherId !== target.value) {
      history.push({
        pathname: getPath(collection.links.ui) + '/xref/' + target.value
      })
    }
  }

  onLoadMore() {
    const { collectionId, otherId, matches } = this.props;
    if (matches.next && !matches.isExpanding) {
      this.props.fetchNextCollectionXrefMatches(collectionId, otherId, matches);
    } 
  }

  render() {
    const { collection, other, index, matches } = this.props;
    const loading = !collection || !collection.id || !other || !other.id || !matches || !index;
    if (loading) {
      return <ScreenLoading />;
    }
    
    return (
      <Screen>
        <Helmet>
          <title>{collection.label}</title>
        </Helmet>
        <Breadcrumbs collection={collection} />
        <table className="CollectionXrefScreen data-table">
          <thead>
            <tr>
              <th></th>
{'fraction_non_alphanumeric': 0.1278155166249553, 'fraction_numerical': 0.0, 'mean_word_length': 3.4617224880382773, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5552592', 'n_tokens_mistral': 1650, 'n_tokens_neox': 1631, 'n_words': 356}