<commit_before>import { Component, PropTypes } from "react";
import Moment from "moment";
import { Link } from "react-router";

import Split, { Left, Right } from "../../../../blocks/split";

import { Spinner } from "../../../../components/loading";
import SideBySide from "../../../../components/cards/SideBySide";
import Meta from "../../../../components/meta";
import AccountType from "../../../../components/accountType";

export default class Layout extends Component {

  static contextTypes = {
    shouldAnimate: PropTypes.bool,
  }

  formatDate = (date) => {
    return Moment(new Date(date)).format("MMM D, YYYY");
  }

  monentize = (value, fixed) => {
    if (typeof value === "number") value = `${value}`;
    if (!value.length) return "$0.00";

    value = value.replace(/[^\d.-]/g, "");

    const decimals = value.split(".")[1];
    if ((decimals && decimals.length >= 2) || fixed) {
      value = Number(value).toFixed(2);
      value = String(value);
    }

    value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return `$${value}`;
  }

  render() {
    const { loadingEntries, entries } = this.props;
    return (
      <div>
        <Split nav classes={["background--light-primary"]}>

          <Meta title="Giving History" />

          <Right background="//dg0ddngxdz549.cloudfront.net/images/cached/images/remote/http_s3.amazonaws.com/ns.images/all/heroes/newspring/campuses/Florence.1.2x1_1700_850_90_c1.jpg"
            mobile={false}
          />

        </Split>
        <Left scroll ref="container" classes={["background--light-secondary"]}>

          <div className="soft-double-sides@lap-and-up soft-double-ends@lap-and-up soft background--light-primary">
            {(() => {
              if (process.env.WEB) {
                return (
                  <Link to="/give/history" className="locked-top locked-left soft-double@lap-and-up soft h7 text-dark-secondary plain" >
                    <i className="icon-arrow-back soft-half-right display-inline-block" style={{ verticalAlign: "middle" }} />
                    <span className="display-inline-block" style={{ verticalAlign: "middle", marginTop: "3px" }}>Back</span>
                  </Link>
                );
              }
            })()}
            <div className="text-left soft-double-top hard-left@lap-and-up soft-half-bottom soft@anchored ">
              <div className="soft-double-ends@anchored">
                {(() => {
                  const { transaction } = this.props;
                  if (!transaction) {
                    // loading
                    return (
                      <div className="text-center soft">
                        <Spinner styles={{ width: "40px", height: "40px" }} />
                      </div>
                    );
                  }
                  const { account } = transaction.details[0];
                  const { person } = transaction;
                  return (
                    <div className="text-center">
                      <p className="push-half-bottom"><em>{this.formatDate(transaction.date)}</em></p>
                      <h3 className="text-dark-secondary">{account.name}</h3>

                      <h1 className="text-dark-primary">{this.monentize(transaction.details[0].amount)}</h1>

                      <h6 className="push-bottom text-dark-tertiary">{person.nickName || person.firstName} {person.lastName}</h6>

                      {(() => {
                        const detail = transaction.payment;
                        if (detail && detail.accountNumber) {
                          return (
                            <h4 className="text-dark-secondary">
                              {detail.accountNumber.slice(-4)}&nbsp;

                              {(() => {
                                if (detail.paymentType && detail.paymentType === "ACH") {
                                  return (
                                    <AccountType width="30px" height="20px" type="Bank" />
                                  );
                                } else if (detail.paymentType) {
                                  return (
                                    <AccountType width="30px" height="20px" type={detail.paymentType} />
                                  );
                                }
                              })()}

                            </h4>
                          );
                        }
                      })()}
                      <p className="text-center soft-ends soft-double@anchored flush-bottom soft-ends soft-sides@portable">
                        Thank you so much for your contributions! It is because of your generosity that we are able to continue telling stories of the greatness of Jesus and seeing lives changed.
                      </p>
                    </div>
                  );
                })()}
              </div>
            </div>
          </div>
          <div className="soft-half soft-sides@portable soft-double-sides@anchored">

            <h4 className="soft soft-double-ends text-center@lap-and-up flush-bottom">
              Recent Articles About Giving
            </h4>
              {(() => {
                if (loadingEntries) (
                  <div className="one-whole soft text-center"><Spinner /></div>
                );
                return (
                  <div className="grid">
                    {entries && entries.map((entry, key) => (
                      <div key={key} className="grid__item one-whole push-half-bottom push-bottom@portable hard-bottom">
                        <SideBySide
                          classes={["push-bottom@lap-and-up"]}
                          images={entry.content.images}
                          defaultImage={entry.content.images[0].url}
                        >
                          <h4 className="push-half-top@portable push-top@anchored">
                            {entry.title}
                          </h4>

                          <p><small dangerouslySetInnerHTML={{ __html: entry.meta.summary }} /></p>
                          {(() => {
                            if (process.env.WEB) {
                              return (
                                <a
                                  target="_blank"
                                  href={`https://newspring.cc/articles/${entry.meta.urlTitle}`}
                                  className="h6 btn--small btn--dark-tertiary soft-sides@portable one-whole@handheld"
                                >
                                  Read more
                                </a>
                              );
                            }

                            if (process.env.NATIVE) {
                              return (
                                <Link
                                  to={`/articles/${entry.entryId}`}
                                  className="h6 btn--small btn--dark-tertiary soft-sides@portable one-whole@handheld"
                                >
                                  Read more
                                </Link>
                              );
                            }
                          })()}


                        </SideBySide>
                      </div>
                    ))}
                  </div>
                );
              })()}

          </div>


        </Left>
      </div>

    );
  }
}<commit_msg>lint give history details layout<commit_after>import { Component, PropTypes } from "react";
import moment from "moment";
import { Link } from "react-router";

import Split, { Left, Right } from "../../../../blocks/split";

import { Spinner } from "../../../../components/loading";
import SideBySide from "../../../../components/cards/SideBySide";
import Meta from "../../../../components/meta";
import AccountType from "../../../../components/accountType";

export default class Layout extends Component {

  static propTypes = {
    loadingEntries: PropTypes.bool.isRequired,
    entries: PropTypes.object.isRequired,
    transaction: PropTypes.object.isRequired,
  }

  formatDate = (date) => (
    moment(new Date(date)).format("MMM D, YYYY")
  )

  monentize = (value, fixed) => {
    let strVal = typeof value === "number" ? `${value}` : value;
    if (!strVal.length) return "$0.00";

    strVal = strVal.replace(/[^\d.-]/g, "");

    const decimals = strVal.split(".")[1];
    if ((decimals && decimals.length >= 2) || fixed) {
      strVal = Number(strVal).toFixed(2);
      strVal = String(strVal);
    }

    strVal = strVal.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return `$${strVal}`;
  }

  /* eslint-disable max-len */
  render() {
    const { loadingEntries, entries } = this.props;
    return (
      <div>
        <Split nav classes={["background--light-primary"]}>

          <Meta title="Giving History" />

          <Right
            background="//dg0ddngxdz549.cloudfront.net/images/cached/images/remote/http_s3.amazonaws.com/ns.images/all/heroes/newspring/campuses/Florence.1.2x1_1700_850_90_c1.jpg"
            mobile={false}
          />

        </Split>
        <Left scroll ref="container" classes={["background--light-secondary"]}>

          <div
            className={
              "soft-double-sides@lap-and-up soft-double-ends@lap-and-up " +
              "soft background--light-primary"
            }
          >
            {(() => {
              if (process.env.WEB) {
                return (
                  <Link
                    to="/give/history"
                    className={
                      "locked-top locked-left soft-double@lap-and-up " +
                      "soft h7 text-dark-secondary plain"
                    }
                  >
                    <i
                      className="icon-arrow-back soft-half-right display-inline-block"
                      style={{ verticalAlign: "middle" }}
                    />
                    <span
                      className="display-inline-block"
                      style={{ verticalAlign: "middle", marginTop: "3px" }}
                    >
                      Back
                    </span>
                  </Link>
                );
              }
              return null;
            })()}
            <div
              className={
                "text-left soft-double-top hard-left@lap-and-up " +
                "soft-half-bottom soft@anchored"
              }
            >
              <div className="soft-double-ends@anchored">
                {(() => {
                  const { transaction } = this.props;
                  if (!transaction) {
                    // loading
                    return (
                      <div className="text-center soft">
                        <Spinner styles={{ width: "40px", height: "40px" }} />
                      </div>
                    );
                  }
                  const { account } = transaction.details[0];
                  const { person } = transaction;
                  return (
                    <div className="text-center">
                      <p className="push-half-bottom">
                        <em>{this.formatDate(transaction.date)}</em>
                      </p>
                      <h3 className="text-dark-secondary">{account.name}</h3>

                      <h1 className="text-dark-primary">
                        {this.monentize(transaction.details[0].amount)}
                      </h1>

                      <h6 className="push-bottom text-dark-tertiary">
                        {person.nickName || person.firstName} {person.lastName}
                      </h6>

                      {(() => {
                        const detail = transaction.payment;
                        if (detail && detail.accountNumber) {
                          return (
                            <h4 className="text-dark-secondary">
                              {detail.accountNumber.slice(-4)}&nbsp;

                              {(() => {
                                if (detail.paymentType && detail.paymentType === "ACH") {
                                  return (
                                    <AccountType width="30px" height="20px" type="Bank" />
                                  );
                                } else if (detail.paymentType) {
                                  return (
                                    <AccountType
                                      width="30px"
                                      height="20px"
                                      type={detail.paymentType}
                                    />
                                  );
                                }
                                return null;
                              })()}

                            </h4>
                          );
                        }
                        return null;
                      })()}
                      <p
                        className={
                          "text-center soft-ends soft-double@anchored " +
                          "flush-bottom soft-ends soft-sides@portable"
                        }
                      >
                        Thank you so much for your contributions! It is because of your generosity that we are able to continue telling stories of the greatness of Jesus and seeing lives changed.
                      </p>
                    </div>
                  );
                })()}
              </div>
            </div>
          </div>
          <div className="soft-half soft-sides@portable soft-double-sides@anchored">

            <h4 className="soft soft-double-ends text-center@lap-and-up flush-bottom">
              Recent Articles About Giving
            </h4>
              {(() => {
                if (loadingEntries) {
                  return <div className="one-whole soft text-center"><Spinner /></div>;
                }
                return (
                  <div className="grid">
                    {entries && entries.map((entry, key) => (
                      <div
                        key={key}
                        className={
                          "grid__item one-whole push-half-bottom push-bottom@portable hard-bottom"
                        }
                      >
                        <SideBySide
                          classes={["push-bottom@lap-and-up"]}
                          images={entry.content.images}
                          defaultImage={entry.content.images[0].url}
                        >
                          <h4 className="push-half-top@portable push-top@anchored">
                            {entry.title}
                          </h4>

                          <p><small dangerouslySetInnerHTML={{ __html: entry.meta.summary }} /></p>
                          {(() => {
                            if (process.env.WEB) {
                              return (
                                <a
                                  rel="noopener noreferrer"
                                  target="_blank"
                                  href={`https://newspring.cc/articles/${entry.meta.urlTitle}`}
                                  className={
                                    "h6 btn--small btn--dark-tertiary " +
                                    "soft-sides@portable one-whole@handheld"
                                  }
                                >
                                  Read more
                                </a>
                              );
                            }

                            if (process.env.NATIVE) {
                              return (
                                <Link
                                  to={`/articles/${entry.entryId}`}
                                  className={
                                    "h6 btn--small btn--dark-tertiary " +
                                    "soft-sides@portable one-whole@handheld"
                                  }
                                >
                                  Read more
                                </Link>
                              );
                            }

                            return null;
                          })()}


                        </SideBySide>
                      </div>
                    ))}
                  </div>
                );
              })()}

          </div>


        </Left>
      </div>

    );
  }
  /* eslint-enable max-len */
}
{'fraction_non_alphanumeric': 0.12322246324415521, 'fraction_numerical': 0.006869125090383225, 'mean_word_length': 0.9553487276154571, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 147, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 39, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6805651', 'n_tokens_mistral': 4084, 'n_tokens_neox': 3823, 'n_words': 703}