<commit_before>import React from 'react';

import { connect } from 'react-redux';

import { Link } from 'react-router';

import { PageHeader, Well, Row, Col, Form, FormGroup, Alert, Button } from 'react-bootstrap';
import _ from 'lodash';

import * as Action from '../actionTypes';
import * as Api from '../api';
import * as Constant from '../constants';
import store from '../store';

import Main from './Main.jsx';
import Spinner from '../components/Spinner.jsx';
import ColDisplay from '../components/ColDisplay.jsx';
import SortTable from '../components/SortTable.jsx';
import FormInputControl from '../components/FormInputControl.jsx';

var BusinessPortal = React.createClass({
  propTypes: {
    user: React.PropTypes.object,
    business: React.PropTypes.object,
    uiOwners: React.PropTypes.object,
  },

  getInitialState() {
    return {
      loading: false,
      validating: false,
      success: false,
      errors: {},

      // owners
      uiOwners : {
        sortField: this.props.uiOwners.sortField || 'name',
        sortDesc: this.props.uiOwners.sortDesc  === true,
      },
    };
  },

  componentDidMount() {
    this.fetch();
  },

  fetch() {
    this.setState({ loading: true, success: false });

    return Api.getBusiness().finally(() => {
      if (!_.isEmpty(this.props.business)) {
        this.setState({ success: true });
      }
      this.setState({ loading: false });
    });
  },

  updateState(state, callback) {
    this.setState(state, callback);
  },

  updateOwnersUIState(state, callback) {
    this.setState({ uiOwners: { ...this.state.uiOwners, ...state }}, () => {
      store.dispatch({ type: Action.UPDATE_OWNERS_UI, owners: this.state.uiOwners });
      if (callback) { callback(); }
    });
  },

  validateOwner(e) {
    e.preventDefault();

    this.setState({ validating: true, errors: {} });

    Api.validateOwner(this.state.secretKey, this.state.postalCode).then(() => {
      // clear input fields
      this.inputPostalCode.value = '';
      this.inputSecretKey.value = '';
    }).catch((err) => {
      console.error(err);
      this.setState({ errors: { secretKey: err } });
    }).finally(() => {
      this.setState({ validating: false });
    });
  },

  render() {
    return <Main showNav={false}>
      <div id="business-portal">
        <PageHeader>Business Portal</PageHeader>
        { this.state.loading && <div className="spinner-container"><Spinner/></div> }
        { !this.state.loading && this.state.success && this.renderPage() }
        { !this.state.loading && !this.state.success && this.renderError() }
      </div>
    </Main>;
  },

  renderPage() {
    var business = this.props.business;
    const hasErrors = Object.keys(this.state.errors).length > 0;

    return <div>
      <Row>
        <Col md={12}>
          <Well id="business-info">
            <h3>Business Information</h3>
            {(() => {
              return <div>
                <Row>
                  <Col lg={6} md={6} sm={12} xs={12}>
                    <ColDisplay labelProps={{ xs: 4 }} fieldProps={{ xs: 8 }} label="Legal Name">{ business.bceidLegalName }</ColDisplay>
                  </Col>
                  <Col lg={6} md={6} sm={12} xs={12}>
                    <ColDisplay labelProps={{ xs: 4 }} fieldProps={{ xs: 8 }} label="Doing Business As">{ business.bceidDoingBusinessAs }</ColDisplay>
                  </Col>
                </Row>
              </div>;
            })()}
          </Well>
        </Col>
        <Col md={12}>
          <Well id="owners">
            <h3>HETS District Owners Associated With Your BCeID</h3>
            {(() => {
              if (_.isEmpty(this.props.business.owners)) { return <Alert bsStyle="success">No district owners associated</Alert>; }

              var owners = _.sortBy(this.props.business.owners, this.state.uiOwners.sortField);
              if (this.state.uiOwners.sortDesc) {
                _.reverse(owners);
              }

              var headers = [
                { field: 'name',         title: 'Name'  },
                { field: 'contact',      title: 'Primary Contact' },
                { field: 'districtName', title: 'District' },
                { field: 'localArea',    title: 'Local Area'  },
              ];

              return <SortTable id="owner-list" sortField={ this.state.uiOwners.sortField } sortDesc={ this.state.uiOwners.sortDesc } onSort={ this.updateOwnersUIState } headers={ headers }>
                {
                  _.map(owners, (owner) => {<commit_msg>fix owner list on business portal page not sorting properly<commit_after>import React from 'react';

import { connect } from 'react-redux';

import { Link } from 'react-router';

import { PageHeader, Well, Row, Col, Form, FormGroup, Alert, Button } from 'react-bootstrap';
import _ from 'lodash';

import * as Action from '../actionTypes';
import * as Api from '../api';
import * as Constant from '../constants';
import store from '../store';

import Main from './Main.jsx';
import Spinner from '../components/Spinner.jsx';
import ColDisplay from '../components/ColDisplay.jsx';
import SortTable from '../components/SortTable.jsx';
import FormInputControl from '../components/FormInputControl.jsx';

var BusinessPortal = React.createClass({
  propTypes: {
    user: React.PropTypes.object,
    business: React.PropTypes.object,
    uiOwners: React.PropTypes.object,
  },

  getInitialState() {
    return {
      loading: false,
      validating: false,
      success: false,
      errors: {},

      // owners
      uiOwners : {
        sortField: this.props.uiOwners.sortField || 'organizationName',
        sortDesc: this.props.uiOwners.sortDesc  === true,
      },
    };
  },

  componentDidMount() {
    this.fetch();
  },

  fetch() {
    this.setState({ loading: true, success: false });

    return Api.getBusiness().finally(() => {
      if (!_.isEmpty(this.props.business)) {
        this.setState({ success: true });
      }
      this.setState({ loading: false });
    });
  },

  updateState(state, callback) {
    this.setState(state, callback);
  },

  updateOwnersUIState(state, callback) {
    this.setState({ uiOwners: { ...this.state.uiOwners, ...state }}, () => {
      store.dispatch({ type: Action.UPDATE_OWNERS_UI, owners: this.state.uiOwners });
      if (callback) { callback(); }
    });
  },

  validateOwner(e) {
    e.preventDefault();

    this.setState({ validating: true, errors: {} });

    Api.validateOwner(this.state.secretKey, this.state.postalCode).then(() => {
      // clear input fields
      this.inputPostalCode.value = '';
      this.inputSecretKey.value = '';
    }).catch((err) => {
      console.error(err);
      this.setState({ errors: { secretKey: err } });
    }).finally(() => {
      this.setState({ validating: false });
    });
  },

  render() {
    return <Main showNav={false}>
      <div id="business-portal">
        <PageHeader>Business Portal</PageHeader>
        { this.state.loading && <div className="spinner-container"><Spinner/></div> }
        { !this.state.loading && this.state.success && this.renderPage() }
        { !this.state.loading && !this.state.success && this.renderError() }
      </div>
    </Main>;
  },

  renderPage() {
    var business = this.props.business;
    const hasErrors = Object.keys(this.state.errors).length > 0;

    return <div>
      <Row>
        <Col md={12}>
          <Well id="business-info">
            <h3>Business Information</h3>
            {(() => {
              return <div>
                <Row>
                  <Col lg={6} md={6} sm={12} xs={12}>
                    <ColDisplay labelProps={{ xs: 4 }} fieldProps={{ xs: 8 }} label="Legal Name">{ business.bceidLegalName }</ColDisplay>
                  </Col>
                  <Col lg={6} md={6} sm={12} xs={12}>
                    <ColDisplay labelProps={{ xs: 4 }} fieldProps={{ xs: 8 }} label="Doing Business As">{ business.bceidDoingBusinessAs }</ColDisplay>
                  </Col>
                </Row>
              </div>;
            })()}
          </Well>
        </Col>
        <Col md={12}>
          <Well id="owners">
            <h3>HETS District Owners Associated With Your BCeID</h3>
            {(() => {
              if (_.isEmpty(this.props.business.owners)) { return <Alert bsStyle="success">No district owners associated</Alert>; }

              var owners = _.sortBy(this.props.business.owners, this.state.uiOwners.sortField);
              if (this.state.uiOwners.sortDesc) {
                _.reverse(owners);
              }

              var headers = [
                { field: 'organizationName',   title: 'Name'  },
                { field: 'primaryContactName', title: 'Primary Contact' },
                { field: 'districtName',       title: 'District' },
                { field: 'localAreaName',      title: 'Local Area'  },
              ];

              return <SortTable id="owner-list" sortField={ this.state.uiOwners.sortField } sortDesc={ this.state.uiOwners.sortDesc } onSort={ this.updateOwnersUIState } headers={ headers }>
                {
                  _.map(owners, (owner) => {
{'fraction_non_alphanumeric': 0.1607181957521349, 'fraction_numerical': 0.005474052988832932, 'mean_word_length': 2.226774991169198, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 93, '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': '2541365', 'n_tokens_mistral': 2760, 'n_tokens_neox': 2670, 'n_words': 585}