react_code_sample_2.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { FormatCurrency } from 'num-format';
import { Grid } from 'semantic-ui-react';
import TypeCheck from 'typecheck-extended';
import _ from 'lodash';

import { UnderlineHeader } from '../../../../components/CustomUIElements';
import Guarantors from './components/Guarantors';
import GuarantorDetailsModal from './components/GuarantorDetailsModal';
import DeleteGuarantorModal from './components/DeleteGuarantorModal';
import { entityDetailsToState } from '../../services/AddToState/services/borrowersToState';

import { ConcatName } from '../../../../services/Entities';
import {
  Entities,
  Loans,
  LoanRequest,
  Relationships,
} from '../../../../services/ApiLib';

export class GuarantorComponentObj extends Component {
  constructor(props) {
    super(props);
    this.getLoanRequests = this.getLoanRequests.bind(this);
    this.onSuccessRequest = this.onSuccessRequest.bind(this);
    this.onError = this.onError.bind(this);
    this.closeGuarantorModal = this.closeGuarantorModal.bind(this);
    this.getThirdGuarantors = this.getThirdGuarantors.bind(this);
    this.lookupThirdGuarantor = this.lookupThirdGuarantor.bind(this);
    this.handleSelectedGuarantor = this.handleSelectedGuarantor.bind(this);
    this.renderModal = this.renderModal.bind(this);
    this.renderDeleteModal = this.renderDeleteModal.bind(this);
    this.onThirdPostSuccess = this.onThirdPostSuccess.bind(this);
    this.putThirdGuarantor = this.putThirdGuarantor.bind(this);
    this.updateGuarantorThirdRelationship = this.updateGuarantorThirdRelationship.bind(this);
    this.onDeleteSuccessThird = this.onDeleteSuccessThird.bind(this);
    this.deleteThirdPartyGuarantor = this.deleteThirdPartyGuarantor.bind(this);
    this.closeDeleteModal = this.closeDeleteModal.bind(this);
    this.setThirdGuarantors = this.setThirdGuarantors.bind(this);
    this.setBorrowers = this.setBorrowers.bind(this);
    this.setOwnerGuarantorInfo = this.setOwnerGuarantorInfo.bind(this);
    this.lookupOwnerGuarantor = this.lookupOwnerGuarantor.bind(this);
  }

  componentDidMount() {
    this.getLoanRequests();
  }

  componentDidUpdate(prevProps) {
    const {
      currentLoanRequest,
      loanRequestsObj,
    } = this.props;

    if (loanRequestsObj[currentLoanRequest]) {
      this.putThirdGuarantor(prevProps);
    }
  }

  onSuccessRequest({ data }) {
    this.props.dispatch({
      type: 'LOR_GUARANTORS_SAVE_LOAN_REQUEST',
      data,
    });

    this.getBorrowers(this.props.loanAppUuid);
    data.forEach((loanReq) => {
      this.getThirdGuarantors(loanReq.uuid);
    });
  }

  onThirdPostSuccess({ data }, { ownerUuid, loanReqUuid }) {
    this.props.dispatch({
      type: 'LOR_SAVE_THIRD_GUARANTOR_REL_UUID',
      relationship_uuid: data.uuid,
      id: ownerUuid,
      loanReqUuid,
    });
    this.props.dispatch({
      type: 'LOR_SAVE_CURRENT_LOAN_REQUEST',
      loanReqUuid: '',
    });
    this.props.loanRequests.forEach((loanReq) => {
      this.getThirdGuarantors(loanReq.uuid);
    });
  }

  onError(err) {
    // TODO make this onError appropriate to Guarantors render
    this.props.dispatch({
      type: 'LOR_ENTITY_SEARCH_ERROR_MSG',
      msg: 'Network Request Failed',
    });
    console.warn('see error:', err);
  }

  onDeleteSuccessThird() {
    this.props.dispatch({
      type: 'LOR_SAVE_CURRENT_EDIT_THIRD',
      entityUuid: '',
    });
    this.props.loanRequests.forEach((loanReq) => {
      this.getThirdGuarantors(loanReq.uuid);
    });
  }

  setBorrowers({ data }) {
    this.props.loanRequests.forEach((loanRequest) => {
      data.forEach((loanApp) => {
        this.props.dispatch({
          type: 'LOR_SAVE_PRIMARY_BORROWER_INST_UUID',
          institutionUuid: loanApp.institution_uuid,
        });
        loanApp.owners.forEach((owner) => {
          this.props.dispatch({
            type: 'LOR_GUARANTORS_SAVE_OWNERS',
            id: loanRequest.uuid,
            owner,
          });
          this.props.dispatch({
            type: 'LOR_GUARANTORS_SAVE_PRIMARY_BORROWER_UUID',
            borrower: loanApp.entity_uuid,
          });
          entityDetailsToState(loanApp.entity_uuid, this.props.dispatch, 'stepper');
          this.lookupOwnerGuarantor(owner.entity_uuid, loanApp.entity_uuid, loanRequest.uuid);
        });
      });
    });
    this.props.dispatch({
      type: 'LOR_GUARANTORS_OWNERS_DONE_LOADING',
    });
  }

  getBorrowers(loanAppUuid) {
    TypeCheck(loanAppUuid, 'string');
    const relationship = {
      rel_type: 'owner',
    };
    const { jwt } = this.props;
    Loans.getRelationships(
      jwt,
      this.setBorrowers,
      () => { },
      loanAppUuid,
      null,
      relationship,
    );
  }

  setThirdGuarantors({ data }, { loanRequestUuid }) {
    this.props.dispatch({
      type: 'LOR_GUARANTORS_SAVE_GUARANTORS',
      guarantor: data,
      id: loanRequestUuid,
    });
    this.props.dispatch({
      type: 'LOR_GUARANTORS_THIRD_DONE_LOADING',
    });
    data.forEach((relData) => {
      entityDetailsToState(relData.entity_uuid, this.props.dispatch, 'stepper');
    });
  }

  setOwnerGuarantorInfo({ data }, { borrower, loanRequest }) {
    this.props.dispatch({
      type: 'LOR_SAVE_LOOKUP_OWNER_GUARANTOR_INFO',
      id: data.uuid,
      name: ConcatName(data),
      tin: data.tin,
      loanRequestId: loanRequest,
      borrower,
    });
  }

  getLoanRequests() {
    const { jwt, loanAppUuid } = this.props;
    const { onSuccessRequest, onError } = this;
    LoanRequest.get(jwt, onSuccessRequest, onError, null, null, { loan_app_uuid: loanAppUuid });
  }

  getThirdGuarantors(loanReqId) {
    TypeCheck(loanReqId, 'string');
    const relationship = {
      rel_type: 'guarantor',
    };
    const { jwt } = this.props;
    Loans.getRelationships(
      jwt,
      this.setThirdGuarantors,
      (err) => { console.log('err:', err); },
      loanReqId,
      { loanRequestUuid: loanReqId },
      relationship,
    );
  }

  deleteThirdPartyGuarantor(entityUuid, loanReqId) {
    const { jwt } = this.props;

    this.props.dispatch({
      type: 'LOR_DELETE_THIRD_PARTY_GUARANTOR',
      id: entityUuid,
      loanReqId,
    });

    if (this.props.deleteGuarantor.relationship_uuid) {
      Relationships.remove(
        this.props.deleteGuarantor.relationship_uuid,
        jwt,
        this.onDeleteSuccessThird,
        this.onError,
        { thirdUuid: entityUuid },
      );
    }
    this.closeDeleteModal();
  }

  lookupOwnerGuarantor(ownerUuid, borrowerUuid, loanReqUuid) {
    TypeCheck(ownerUuid, 'string');
    const { jwt } = this.props;
    Entities.get(
      jwt,
      this.setOwnerGuarantorInfo,
      this.onError,
      ownerUuid,
      null,
      {
        borrower: borrowerUuid,
        loanRequest: loanReqUuid,
      },
    );
  }

  closeDeleteModal() {
    this.props.dispatch({
      type: 'LOR_CLOSE_DELETE_GUARANTOR_MODAL',
    });
  }

  putThirdGuarantor(prevProps) {
    const {
      currentEditRowThird,
      currentLoanRequest,
      loanRequestsObj,
    } = this.props;

    const curIndex = loanRequestsObj[currentLoanRequest].guarantors
      .findIndex(g => g.entity_uuid === currentEditRowThird);

    const thirdGuar = loanRequestsObj[currentLoanRequest].guarantors[curIndex];
    const prevThirdGuar = prevProps.loanRequestsObj[currentLoanRequest].guarantors[curIndex];

    if (!_.isEqual(prevThirdGuar, thirdGuar)) {
      const amtGuar = parseInt(thirdGuar.amount_guaranteed, 10);
      const pctGuar = parseInt(thirdGuar.percent_guaranteed, 10);
      let body;
      if (thirdGuar.percent_guaranteed) {
        body = {
          full_vs_limited: thirdGuar.full_vs_limited,
          amount_or_percent: thirdGuar.amount_or_percent,
          percent_guaranteed: pctGuar,
        };
      } else if (thirdGuar.amount_guaranteed) {
        body = {
          full_vs_limited: thirdGuar.full_vs_limited,
          amount_or_percent: thirdGuar.amount_or_percent,
          amount_guaranteed: amtGuar,
        };
      } else {
        body = {
          full_vs_limited: thirdGuar.full_vs_limited,
          amount_or_percent: thirdGuar.amount_or_percent,
        };
      }
      this.updateGuarantorThirdRelationship(thirdGuar, body);
    }
  }

  updateGuarantorThirdRelationship(thirdGuar, body) {
    const { jwt } = this.props;

    if (thirdGuar.relationship_uuid) {
      Relationships.update(
        thirdGuar.relationship_uuid,
        jwt,
        undefined,
        this.onError,
        body,
      );
    }
  }

  closeGuarantorModal() {
    this.props.dispatch({
      type: 'LOR_CLOSE_GUARANTOR_MODAL',
    });
    this.clearSelectedGuarantor();
  }

  clearSelectedGuarantor() {
    this.props.dispatch({
      type: 'LOR_CLEAR_SELECTED_GUARANTOR',
    });
  }

  handleSelectedGuarantor(data) {
    this.props.dispatch({
      type: 'LOR_SAVE_GUARANTOR_UUID',
      guarantor: data,
    });
  }

  lookupThirdGuarantor(e, entityUuid, loanRequestUuid) {
    this.postGuarantorRelationship(entityUuid, loanRequestUuid);
    this.closeGuarantorModal();
  }

  postGuarantorRelationship(entityUuid, loanRequestUuid) {
    const {
      currentLoanRequest,
      jwt,
      institutionUuid,
    } = this.props;

    const relationshipGuarantor = {
      parent_uuid: currentLoanRequest,
      child_uuid: entityUuid,
      institution_uuid: institutionUuid,
      rel_type: 'guarantor',
    };

    Relationships.add(
      relationshipGuarantor,
      jwt,
      this.onThirdPostSuccess,
      this.onError,
      {
        ownerUuid: entityUuid,
        loanReqUuid: loanRequestUuid,
      },
    );
  }

  renderModal() {
    return (
      <GuarantorDetailsModal
        closeGuarantorModal={this.closeGuarantorModal}
        entitySearchErrorMsg={this.props.entitySearchErrorMsg}
        guarantorUuid={this.props.selectedGuarantorUuid}
        loanRequestUuid={this.props.currentLoanRequest}
        lookupThirdGuarantor={this.lookupThirdGuarantor}
        onError={this.onError}
        open={this.props.openGuarantorModal}
        selectedEntityCallback={this.handleSelectedGuarantor}
        primaryBorrowerInst={this.props.primaryBorrowerInst}
      />
    );
  }

  renderDeleteModal() {
    return (
      <DeleteGuarantorModal
        open={this.props.deleteGuarantorModalOpen}
        closeDeleteModal={this.closeDeleteModal}
        guarantor={this.props.deleteGuarantor}
        deleteThirdPartyGuarantor={this.deleteThirdPartyGuarantor}
        loanReqId={this.props.deleteLoanReqId}
        entityDetails={this.props.entityDetailsLookup}
      />
    );
  }

  render() {
    return (
      <div>
        {this.renderModal()}
        {this.renderDeleteModal()}
        {(this.props.loanRequests).map((loanRequest, i) => (
          <div key={loanRequest.uuid} style={{ marginTop: '1em' }}>
            <h1>
              Guarantors for Loan Request
              {` ${i + 1} - ${FormatCurrency(loanRequest.loan_amount || 0, false)}`}
            </h1>
            <UnderlineHeader />
            <Grid>
              <Grid.Row columns={2}>
                <Grid.Column>
                </Grid.Column>
              </Grid.Row>
            </Grid>
            <Guarantors
              loanAppUuid={this.props.loanAppUuid}
              loanRequestUuid={loanRequest.uuid}
              openGuarantorModal={this.openGuarantorModal}
              readOnly={this.props.readOnly}
            />
          </div>
        ), this)
        }
      </div>
    );
  }
}

GuarantorComponentObj.propTypes = {
  currentLoanRequest: PropTypes.string.isRequired,
  currentEditRowThird: PropTypes.string.isRequired,
  dispatch: PropTypes.func.isRequired,
  entityDetailsLookup: PropTypes.objectOf(PropTypes.object).isRequired,
  entitySearchErrorMsg: PropTypes.string.isRequired,
  jwt: PropTypes.string.isRequired,
  loanAppUuid: PropTypes.string.isRequired,
  loanRequests: PropTypes.arrayOf(PropTypes.object).isRequired,
  loanRequestsObj: PropTypes.objectOf(PropTypes.object).isRequired,
  institutionUuid: PropTypes.string.isRequired,
  selectedGuarantorUuid: PropTypes.string.isRequired,
  openGuarantorModal: PropTypes.bool.isRequired,
  deleteGuarantorModalOpen: PropTypes.bool.isRequired,
  deleteGuarantor: PropTypes.shape({
    entity_uuid: PropTypes.string,
    relationship_uuid: PropTypes.string,
  }).isRequired,
  deleteLoanReqId: PropTypes.string.isRequired,
  primaryBorrowerInst: PropTypes.string.isRequired,
  readOnly: PropTypes.bool.isRequired,
};

const mapStateToProps = state => (
  {
    jwt: state.auth.jwt,
    loanRequests: state.LorGuarantorReducer.loanRequests,
    loanRequestsObj: state.LorGuarantorReducer.loanRequestsObj,
    openGuarantorModal: state.LorGuarantorReducer.openGuarantorModal,
    entitySearchErrorMsg: state.LorGuarantorReducer.entitySearchErrorMsg,
    entityDetailsLookup: state.LorEntityDetailsReducer.entityDetailsLookup,
    selectedGuarantorUuid: state.LorGuarantorReducer.selectedGuarantorUuid,
    currentLoanRequest: state.LorGuarantorReducer.currentLoanRequest,
    currentEditRowThird: state.LorGuarantorReducer.currentEditRowThird,
    institutionUuid: state.auth.institutionUuid,
    thirdPartyGuarantors: state.LorGuarantorReducer.thirdPartyGuarantors,
    deleteGuarantorModalOpen: state.LorGuarantorReducer.deleteGuarantorModalOpen,
    deleteLoanReqId: state.LorGuarantorReducer.deleteLoanReqId,
    deleteGuarantor: state.LorGuarantorReducer.deleteGuarantor,
    primaryBorrowerInst: state.LorGuarantorReducer.primaryBorrowerInst,
  }
);

const GuarantorComponent = connect(mapStateToProps)(GuarantorComponentObj);

export default GuarantorComponent;