<commit_before>import React from "react";
import {connect} from "react-redux";
import Select from "react-select";
import {browserHistory} from "react-router";
import Card from "../components/Card.jsx";
import AnchorList from "../components/AnchorList.jsx";
import {Link} from "react-router";
import {fetchProduct} from "../actions/productActions";
import {fetchCountries} from "../actions/countriesActions";
import {fetchProducts} from "../actions/productsActions";
import {fetchTradesByProduct} from "../actions/tradesActions";
import "./Detailed.css";
import "../components/Dropdown.css";
import ProductHeader from "../components/ProductHeader";
import Dropdown from "../components/Dropdown";
import {fetchData} from "datawheel-canon";
import {url} from "../api";
import {nest} from "d3-collection";

import Helmet from "react-helmet";
import header from "../helmet.js";

class ProductWithId extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "all",
      country: {
        label: "All",
        value: "all"
      }
    };
  }

  componentDidMount() {
    const id = this.props.params.productWithId;
    this.props.fetchCountries();
    this.props.fetchProducts();
    this.props.fetchTradesByProduct(id);
  }

  componentWillReceiveProps(newProps) {
    if (this.props.params.productWithId !== newProps.params.productWithId) {
      const id = newProps.params.productWithId;
      this.props.fetchCountries();
      this.props.fetchProducts();
      this.props.fetchTradesByProduct(id);
    }
  }

  handleOptionChange = selectedOption => {
    this.setState({selectedOption});
  }

  filterCompanies(trades) {
    const seen = [];
    const filteredResult = [];
    for (let i = 0; i < trades.length; i++) {
      const trade = trades[i];
      const unique = !seen.includes(trade.company_id);
      const tradeFlow = this.state.selectedOption === "all" || trade.trade_flow === `${this.state.selectedOption}s`;
      const country = this.state.country.value === "all" || this.state.country.value === trade.country_id;
      if (tradeFlow && country && unique) {
        seen.push(trade.company_id);
        trade.countries = trade.country_id ? [trade.country_id] : [];
        filteredResult.push(trade);
      }
      else {
        filteredResult.map(t => {
          if (t.company_id === trade.company_id && trade.country_id) {
            t.countries.push(trade.country_id);
          }
        });
      }
    }
    return filteredResult;
  }

  selectDropDown = country => {
    this.setState({country});
  }

  removeSelection = () => {
    this.setState({
      country: {
        label: "All",
        value: "all"
      },
      selectedOption: "all"
    });
  }

  compare(a, b, attr) {
    if (a[attr] < b[attr]) {
      return -1;
    }
    if (a[attr] > b[attr]) {
      return 1;
    }
    return 0;
  }

  introParagraph = () => {
    const {product, trades} = this.props.data;
    const tradesByCompany = nest()
      .key(d => d.company_id)
      .entries(trades)
      .map(c => c.values[0].Company);
    const exportsByCountry = nest()
      .key(d => d.product_id)
      .entries(trades.filter(t => t.trade_flow === "exports"))
      .map(c => c.values[0].Country);
    const importsByCountry = nest()
      .key(d => d.product_id)
      .entries(trades.filter(t => t.trade_flow === "imports"))
      .map(c => c.values[0].Country);

    const numCompanies = tradesByCompany.length;
    return numCompanies
      ? <p>
        {numCompanies === 1
          ? <span>There is one company trading {product.name} named <AnchorList items={tradesByCompany.slice(0, 3)} name={c => c.name} url={c => `/company/${c.slug}`} />.&nbsp;</span>
          : <span>There are {tradesByCompany.length} companies trading {product.name} including <AnchorList items={tradesByCompany.slice(0, 3)} name={c => c.name} url={c => `/company/${c.slug}`} />.&nbsp;</span>}
        {exportsByCountry.length
          ? exportsByCountry.length === 1
            ? <span>{numCompanies === 1 ? <span>This company exports them from</span> : <span>These companies export them from</span>} <AnchorList items={exportsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
            : <span>{numCompanies === 1 ? <span>This company exports them from {exportsByCountry.length} different countries</span> : <span>These companies export them from {exportsByCountry.length} different countries</span>} including <AnchorList items={exportsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
          : null}
        {importsByCountry.length
          ? importsByCountry.length === 1
            ? <span>They import them from one country, <AnchorList items={importsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
            : <span>They import them from {importsByCountry.length} different countries including <AnchorList items={importsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
          : null}<commit_msg>fixes error on product pages with companies but no countries<commit_after>import React from "react";
import {connect} from "react-redux";
import Select from "react-select";
import {browserHistory} from "react-router";
import Card from "../components/Card.jsx";
import AnchorList from "../components/AnchorList.jsx";
import {Link} from "react-router";
import {fetchProduct} from "../actions/productActions";
import {fetchCountries} from "../actions/countriesActions";
import {fetchProducts} from "../actions/productsActions";
import {fetchTradesByProduct} from "../actions/tradesActions";
import "./Detailed.css";
import "../components/Dropdown.css";
import ProductHeader from "../components/ProductHeader";
import Dropdown from "../components/Dropdown";
import {fetchData} from "datawheel-canon";
import {url} from "../api";
import {nest} from "d3-collection";

import Helmet from "react-helmet";
import header from "../helmet.js";

class ProductWithId extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: "all",
      country: {
        label: "All",
        value: "all"
      }
    };
  }

  componentDidMount() {
    const id = this.props.params.productWithId;
    this.props.fetchCountries();
    this.props.fetchProducts();
    this.props.fetchTradesByProduct(id);
  }

  componentWillReceiveProps(newProps) {
    if (this.props.params.productWithId !== newProps.params.productWithId) {
      const id = newProps.params.productWithId;
      this.props.fetchCountries();
      this.props.fetchProducts();
      this.props.fetchTradesByProduct(id);
    }
  }

  handleOptionChange = selectedOption => {
    this.setState({selectedOption});
  }

  filterCompanies(trades) {
    const seen = [];
    const filteredResult = [];
    for (let i = 0; i < trades.length; i++) {
      const trade = trades[i];
      const unique = !seen.includes(trade.company_id);
      const tradeFlow = this.state.selectedOption === "all" || trade.trade_flow === `${this.state.selectedOption}s`;
      const country = this.state.country.value === "all" || this.state.country.value === trade.country_id;
      if (tradeFlow && country && unique) {
        seen.push(trade.company_id);
        trade.countries = trade.country_id ? [trade.country_id] : [];
        filteredResult.push(trade);
      }
      else {
        filteredResult.map(t => {
          if (t.company_id === trade.company_id && trade.country_id) {
            t.countries.push(trade.country_id);
          }
        });
      }
    }
    return filteredResult;
  }

  selectDropDown = country => {
    this.setState({country});
  }

  removeSelection = () => {
    this.setState({
      country: {
        label: "All",
        value: "all"
      },
      selectedOption: "all"
    });
  }

  compare(a, b, attr) {
    if (a[attr] < b[attr]) {
      return -1;
    }
    if (a[attr] > b[attr]) {
      return 1;
    }
    return 0;
  }

  introParagraph = () => {
    const {product, trades} = this.props.data;
    const tradesByCompany = nest()
      .key(d => d.company_id)
      .entries(trades)
      .map(c => c.values[0].Company);
    const exportsByCountry = nest()
      .key(d => d.product_id)
      .entries(trades.filter(t => t.trade_flow === "exports" && t.country_id))
      .map(c => c.values[0].Country);
    const importsByCountry = nest()
      .key(d => d.product_id)
      .entries(trades.filter(t => t.trade_flow === "imports" && t.country_id))
      .map(c => c.values[0].Country);

    const numCompanies = tradesByCompany.length;
    return numCompanies
      ? <p>
        {numCompanies === 1
          ? <span>There is one company trading {product.name} named <AnchorList items={tradesByCompany.slice(0, 3)} name={c => c.name} url={c => `/company/${c.slug}`} />.&nbsp;</span>
          : <span>There are {tradesByCompany.length} companies trading {product.name} including <AnchorList items={tradesByCompany.slice(0, 3)} name={c => c.name} url={c => `/company/${c.slug}`} />.&nbsp;</span>}
        {exportsByCountry.length
          ? exportsByCountry.length === 1
            ? <span>{numCompanies === 1 ? <span>This company exports them from</span> : <span>These companies export them from</span>} <AnchorList items={exportsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
            : <span>{numCompanies === 1 ? <span>This company exports them from {exportsByCountry.length} different countries</span> : <span>These companies export them from {exportsByCountry.length} different countries</span>} including <AnchorList items={exportsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
          : null}
        {importsByCountry.length
          ? importsByCountry.length === 1
            ? <span>They import them from one country, <AnchorList items={importsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
            : <span>They import them from {importsByCountry.length} different countries including <AnchorList items={importsByCountry.slice(0, 3)} name={c => c.name} url={c => `/product/${c.id}`} />.&nbsp;</span>
          : null}
{'fraction_non_alphanumeric': 0.16487037576463734, 'fraction_numerical': 0.004854840275754928, 'mean_word_length': 3.1101356743814845, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 109, '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': '4908965', 'n_tokens_mistral': 3253, 'n_tokens_neox': 3179, 'n_words': 692}