import React, { Component, useEffect, useState } from "react"; import { FormGroup } from "react-bootstrap"; import _ from "lodash"; import { useHistory } from "react-router-dom"; /* Import Components */ import Input from "../components/Input"; import Button from "../components/Button"; const { REACT_APP_PROXY } = process.env; const handleClearForm = () => { // Logic for resetting the form }; const PersonFormContainer = (props) => { const [buttonDisabled, setButtonDisabled] = useState(false); const [person, setPerson] = React.useState(props.person); const [errors, setErrors] = React.useState([]); const [coop, setCoop] = React.useState(props.coop); const history = useHistory(); useEffect(() => { setPerson(props.person); }, [props]); const handleInput = (e) => { let value = e.target.value; let name = e.target.name; if (name.indexOf("[") === -1) { setValue(name, value); } else { const personCopy = JSON.parse(JSON.stringify(person)); const keys = name.split(/[\[\].]+/); _.set(personCopy, name, value); console.log("changed person to ..."); console.log(personCopy); setPerson(personCopy); } }; const updateValue = (obj, name, value, index = 0) => { if (name.length - 1 > index) { const isArray = Array.isArray(obj[name[index]]); obj[name[index]] = this.updateValue( isArray ? [...obj[name[index]]] : { ...obj[name[index]] }, name, value, index + 1 ); } else { obj = { ...obj, [name[index]]: value }; } return obj; }; /** * Verify phone field conforms to US phone (10 digits) * * @param e */ const handlePhoneInput = (e) => { let value = e.target.value.replace(/\D/, ""); value = value.length > 10 ? value.substring(0, 10) : value; let name = e.target.name; //update phone setValue(name, value); }; const setValue = (is, value) => { const personCopy = JSON.parse(JSON.stringify(person)); if (typeof is == "string") { console.log("setting string value"); _.set(personCopy, is, value); return setPerson(personCopy); } else if (is.length === 1 && value !== undefined) { _.set(personCopy, is, value); return setPerson(personCopy); } else if (is.length === 0) return person; else { console.log("is:" + is + " value:" + value); return setValue(is.slice(1), value); } }; const handleFormSubmit = (e) => { e.preventDefault(); setButtonDisabled(true); // Make a copy of the object in order to remove unneeded properties const url = person.id ? REACT_APP_PROXY + "/people/" + person.id + "/" : REACT_APP_PROXY + "/people/"; const method = person.id ? "PUT" : "POST"; fetch(url, { method: method, body: JSON.stringify({ id: person?.id, first_name: person.first_name, last_name: person.last_name, coops: person.coops.map((coop) => coop.id), contact_methods: [ { type: "PHONE", phone: person.phone, }, { type: "EMAIL", email: person.email, }, ], }), headers: { Accept: "application/json", "Content-Type": "application/json", }, }) .then((response) => { if (response.ok) { return response.json(); } else { throw response; } }) .then((data) => { const result = data; setButtonDisabled(false); history.push({ pathname: "/edit/" + person.coops[0].id + "/people", state: { coop: result, message: person.id ? "Updated successfully." : "Created successfully.", }, }); window.scrollTo(0, 0); }) .catch((err) => { setButtonDisabled(false); err.text().then((errorMessage) => { setErrors(JSON.parse(errorMessage)); }); }); }; /* This life cycle hook gets executed when the component mounts */ return ( <div className="form"> <h5>{person.coops[0]?.name}</h5> <form className="container-fluid" onSubmit={handleFormSubmit}> <FormGroup controlId="formBasicText"> <Input inputType={"text"} title={"First Name"} name={"first_name"} value={person.first_name} placeholder={"Enter first name"} handleChange={handleInput} errors={errors} />{" "} {/* First name of the person */} <Input inputType={"text"} title={"Last Name"} name={"last_name"} value={person.last_name} placeholder={"Enter last name"} handleChange={handleInput} errors={errors} />{" "} {/* Last name of the person */} <Input inputType={"text"} title={"Email"} name={"email"} value={person.email} placeholder={"Enter email"} handleChange={handleInput} errors={errors} />{" "} {/* Email of the person */} <Input inputType={"text"} title={"Phone"} name={"phone"} value={person.phone} placeholder={"Enter primary phone number"} handleChange={handlePhoneInput} errors={errors} />{" "} {/* Phone number of the person */} <Button disabled={buttonDisabled} action={handleFormSubmit} buttonType={"primary"} title={"Submit"} style={buttonStyle} />{" "} {/*Submit */} <Button action={handleClearForm} buttonType={"secondary"} title={"Clear"} style={buttonStyle} />{" "} {/* Clear the form */} </FormGroup> </form> </div> ); }; const buttonStyle = { margin: "10px 10px 10px 10px", }; export default PersonFormContainer;