<commit_before>import React, { Component } from 'react';
import {connect} from 'react-redux';
import OfferForm from '../components/OfferForm';
import { displayJob } from '../actions/Job_Display';
import { sendJob } from '../actions/Job_Matches';
import { reset } from 'redux-form';
import { changeOffer, clickJob, closeJob } from '../actions/Offer_Actions';
import ScatterPlot from '../components/scatter-plot';
import OfferDisplay from '../components/OfferDisplay';
import Modal from 'react-modal';


// Deafult styles for graph
const styles = {
  width: 1000,
  height: 900,
  padding: 30,
};

// Styles for Modal
const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};


// When a circle/plot is clicked, modify
// the clicked circles data

class Offer extends Component {
  updateCircle = (circle, dispatch) => {
    console.log(this.props);
    // console.log(dispatch);
  }

  handleSubmit(data, dispatch) {
    dispatch(changeOffer(data));

    dispatch(sendJob(data.title, data));

    // Resets form fields after submission
    dispatch(reset('offer'));
  };

  render() {
    const { offer, onJobClick, onJobClose } = this.props;
    const { display, userOffer } = offer;

    return (
      <div className="container">
        <Modal
          isOpen={display}
          onRequestClose={onJobClose}
          style={customStyles}>
          <h1>Offer Information</h1>
          <div className="text-center">
            <table className="table">
              <thead>
                <tr>
                  <th></th>
                  <th>Title</th>
                  <th>Salary (Avg.)</th>
                  <th>Equity (Avg.)</th>
                  <th>Location</th>
                </tr>
              </thead>
              <tbody>
                <tr className="success">
                  <td>OFFER:</td>
                  <td>{userOffer.title}</td>
                  <td>{userOffer.salary}</td>
                  <td>{userOffer.equity}</td>
                  <td>{userOffer.location}</td>
                </tr>
                <tr className="danger">
                  <td>LISTING:</td>
                  <td>{display.title}</td>
                  <td>{Math.floor((display.salary_max + display.salary_min)/2)}</td>
                  <td>{Math.floor((+display.equity_max + +display.equity_min)/2)}</td>
                  <td>San Francisco</td>
                </tr>
              </tbody>
            </table>
            <button className="btn btn-success text-center" onClick={onJobClose}>Close me!</button>
          </div>
        </Modal>
        <OfferForm onSubmit={this.handleSubmit} />
        <OfferDisplay data={offer} />
        <div className="row">
          <div className="col-md-12">
            <div className="panel-heading">

            </div>
            <div className="panel panel-default">
              <div className="panel-body" >
                <ScatterPlot {...this.props} {...styles} update={onJobClick} />
                <h4 id="equity">Equity</h4>
                <h4 id="salary">Salary</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

function mapStateToProps(state) {
  console.log(state);
  const { data, offer, job } = state;
  return {
    data,
    offer,
    job,
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    onJobClick: (job) => {
      dispatch(clickJob(job));
    },

    onJobClose: () => {
      dispatch(closeJob());
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Offer);
<commit_msg>(feat) created a method to save post offer to db<commit_after>import React, { Component } from 'react';
import {connect} from 'react-redux';
import OfferForm from '../components/OfferForm';
import { displayJob } from '../actions/Job_Display';
import { sendJob } from '../actions/Job_Matches';
import { reset } from 'redux-form';
import { changeOffer, clickJob, closeJob } from '../actions/Offer_Actions';
import ScatterPlot from '../components/scatter-plot';
import OfferDisplay from '../components/OfferDisplay';
import Modal from 'react-modal';
import axios from 'axios';

// Deafult styles for graph
const styles = {
  width: 1000,
  height: 900,
  padding: 30,
};

// Styles for Modal
const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};


// When a circle/plot is clicked, modify
// the clicked circles data

class Offer extends Component {
  updateCircle = (circle, dispatch) => {
    console.log(this.props);
    // console.log(dispatch);
  }

  saveOffer(data) {
    var email = JSON.parse(localStorage.profile).email;
    var offerObj = {
      title: data.title,
      location: data.location,
      salary: data.salary,
      equity: data.equity,
      userEmail: email
    };
    axios.post('/api/offers', offerObj)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (response) {
      console.log(response);
    });
    // "<KEY>"
  }



  handleSubmit(data, dispatch) {

    dispatch(changeOffer(data));

    dispatch(sendJob(data.title, data));
    this.saveOffer(data);
    // Resets form fields after submission
    dispatch(reset('offer'));
  };

  render() {
    const { offer, onJobClick, onJobClose } = this.props;
    const { display, userOffer } = offer;

    return (
      <div className="container">
        <Modal
          isOpen={display}
          onRequestClose={onJobClose}
          style={customStyles}>
          <h1>Offer Information</h1>
          <div className="text-center">
            <table className="table">
              <thead>
                <tr>
                  <th></th>
                  <th>Title</th>
                  <th>Salary (Avg.)</th>
                  <th>Equity (Avg.)</th>
                  <th>Location</th>
                </tr>
              </thead>
              <tbody>
                <tr className="success">
                  <td>OFFER:</td>
                  <td>{userOffer.title}</td>
                  <td>{userOffer.salary}</td>
                  <td>{userOffer.equity}</td>
                  <td>{userOffer.location}</td>
                </tr>
                <tr className="danger">
                  <td>LISTING:</td>
                  <td>{display.title}</td>
                  <td>{Math.floor((display.salary_max + display.salary_min)/2)}</td>
                  <td>{Math.floor((+display.equity_max + +display.equity_min)/2)}</td>
                  <td>San Francisco</td>
                </tr>
              </tbody>
            </table>
            <button className="btn btn-success text-center" onClick={onJobClose}>Close me!</button>
          </div>
        </Modal>
        <OfferForm onSubmit={this.handleSubmit.bind(this)} />
        <OfferDisplay data={offer} />
        <div className="row">
          <div className="col-md-12">
            <div className="panel-heading">

            </div>
            <div className="panel panel-default">
              <div className="panel-body" >
                <ScatterPlot {...this.props} {...styles} update={onJobClick} />
                <h4 id="equity">Equity</h4>
                <h4 id="salary">Salary</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

function mapStateToProps(state) {
  
  const { data, offer, job } = state;
  return {
    data,
    offer,
    job,
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    onJobClick: (job) => {
      dispatch(clickJob(job));
    },

    onJobClose: () => {
      dispatch(closeJob());
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Offer);

{'fraction_non_alphanumeric': 0.15007447864945384, 'fraction_numerical': 0.007199602780536246, 'mean_word_length': 1.7668269230769231, 'pattern_counts': {'":': 0, '<': 142, '<?xml version=': 0, '>': 150, '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': '7639159', 'n_tokens_mistral': 2471, 'n_tokens_neox': 2350, 'n_words': 482}