import React from 'react';
import { connect } from "react-redux"
import { createPerson } from '../../actions/peopleActions';

@connect(
  (store) => {
    return {
      people: store.people.people,
    };
  },
  (dispatch) => {
    return {
      createPerson: () => {
        dispatch(createPerson());
      }
    }
  }
)
export default class PeopleSearch extends React.Component {

  createPerson = () => {
    this.props.createPerson();
    /*****************
    This is where I want to be able to execute only once the new person
    is created and get the ID of the newly created record. But currently,
    this next line outputs the people array as it exists before the new
    record is created.
    *****************/
    console.log("After createPerson, with: ", this.props.people);
  };

    render = () => {
    return (
      <div>
          <button onClick={this.createPerson}>
            Create Person
          </button>
      </div>);
  }
}

import axios from "axios";
    import cookie from "react-cookie";

    import config from "../config.js";

    export function createPerson(fName, mName, lName, sexAtBirth, notes) {

    const body = {
        object: {
            fName,
            mName,
            lName,
            sexAtBirth,
            notes
        }
    };
    return (dispatch) => {
        dispatch({type: "CREATE_PERSON"});
        axios.post(config.api_url + "/api/v2/person/create", body, axiosConfig)
            .then((response) => {
                dispatch({type: "CREATE_PERSON_FULFILLED", payload: response.data})
            })
            .catch((err) => {
                dispatch({type: "CREATE_PERSON_REJECTED", payload: err})
            })
    }
}

export default function reducer(
    state={
        people: [],
        fetching: false,
        error: null,
    },
    action = ""
) {
    case "CREATE_PERSON": {
        return {
            ...state,
            fetching: true
        };
    }
    case "CREATE_PERSON_FULFILLED": {
        return {
            ...state,
            fetching: false,
            people: [
                ...state.people,
                action.payload
            ]
        };
    }
    case "CREATE_PERSON_REJECTED": {
        return {
            ...state,
            fetching: false,
            error: action.payload
        };
    }
}