import axios from "axios";
import React, { useState } from "react";
import baseUrl from "../../../array/base/config";
import { toast } from "react-toastify";
const relationshipOptions = [
"Father",
"Mother",
"Spouse",
"Daughter",
"Son",
"Brother",
"Sister",
];
/**
* AddFamilyForm component allows users to add a new family member.
*
* @param {Object} props - The component's props.
* @param {function} props.setShowCurrent - Function to set the current view.
* @param {function} props.apicall - Function to make an API call and update data.
* @returns {JSX.Element} - React component representing the add family member form.
*/
const AddFamilyForm = ({setShowCurrent, apicall}) => {
const [relationship, setRelationship] = useState();
const [firstName, setFirstName] = useState();
const [middleName, setMiddleName] = useState();
const [lastName, setLastName] = useState();
const [phone, setPhone] = useState();
const [birthdate, setBirthdate] = useState();
const [document_file, setDocument_file] = useState(null);
/**
* Handle change of relationship input.
* @param {Object} e - The event object.
*/
const handleRelationship = (e) => {
setRelationship(e.target.value);
};
/**
* Handle change of first name input.
* @param {Object} e - The event object.
*/
const handleFirstNameChange = (e) => {
setFirstName(e.target.value);
};
/**
* Handle change of middle name input.
* @param {Object} e - The event object.
*/
const handleMiddleNameChange = (e) => {
setMiddleName(e.target.value);
};
/**
* Handle change of last name input.
* @param {Object} e - The event object.
*/
const handleLastNameChange = (e) => {
setLastName(e.target.value);
};
/**
* Handle change of phone number input.
* @param {Object} e - The event object.
*/
const handlePhoneNumberChange = (e) => {
setPhone(e.target.value);
};
/**
* Handle change of birth date input.
* @param {Object} e - The event object.
*/
const handleBirthdateChange = (e) => {
setBirthdate(e.target.value);
};
/**
* Handle change of document file input.
* @param {Object} e - The event object.
*/
const handleFileChange = (e) => {
const document = e.target.files[0];
setDocument_file(document);
};
/**
* Handle the form submission.
* @param {Object} e - The event object.
*/
const handleSubmit = (e) => {
e.preventDefault();
console.log(
relationship,
firstName,
middleName,
lastName,
phone,
birthdate
);
const formData = new FormData();
relationship && formData.append("relationship", relationship);
firstName && formData.append("first_name", firstName);
middleName && formData.append("middle_name", middleName);
lastName && formData.append("last_name", lastName);
phone && formData.append("phone_number", phone);
birthdate && formData.append("birth_date", birthdate);
document_file && formData.append("document_file", document_file);
const detail = localStorage.getItem("token");
axios
.post(`${baseUrl}/api/shareholderfamily/`, formData, {
headers: {
Authorization: `Token ${detail}`,
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
toast.success("Family member added successfully!", {
position: "top-right",
autoClose: 5001,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
setShowCurrent('Family List')
apicall();
})
.catch((error) => {
console.error("Edit form error", error);
toast.error("Family member could not be added. Please try again.", {
position: "top-right",
autoClose: 5001,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
// handle error
});
};
return (
<div className="sharetransfer_card">
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="relationship">Relationship:</label>
<select
id="relationship"
// defaultValue={user?.salutation}
onChange={handleRelationship}
required
>
<option value="">Select relationship</option>
{relationshipOptions.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="firstName">First Name:</label>
<input
type="text"
id="firstName"
onChange={handleFirstNameChange}
required
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="middleName">Middle Name:</label>
<input
type="text"
id="middleName"
onChange={handleMiddleNameChange}
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="lastName">Last Name:</label>
<input
type="text"
id="lastName"
onChange={handleLastNameChange}
required
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="">Phone number: </label>
<input
type="number"
placeholder=""
onChange={handlePhoneNumberChange}
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="birthdate">Birth date:</label>
<input
type="date"
id="birthdate"
name="birthdate"
onChange={handleBirthdateChange}
required
/>
</div>
</div>
<div className="col-lg-4">
<label style={{ marginRight: "10px" }} htmlFor="file">
Document File:
</label>
{document_file && (
<input type="file" id="file" onChange={handleFileChange} />
)}
<div className="sharetransfer_form_group_img">
{document_file ? (
document_file?.name?.split(".").pop() === "pdf" ? (
<img src="/pdf_logo.jpg" alt="PDF icon" />
) : (
<img
src={URL.createObjectURL(document_file)}
alt="Selected file"
/>
)
) : (
<input type="file" id="file" onChange={handleFileChange} />
)}
</div>
</div>
</div>
<div className="row">
<div className="form-footer d-md-flex align-items-center justify-end">
{/* <div className="addFamilyCancel"> */}
<button
onClick={() => setShowCurrent("Family List")}
className="cancel-btn me-3"
>
Cancel
</button>
{/* </div> */}
<div className="">
<button type="submit" className="sharetransfer_button">
Add Family Member
</button>
</div>
</div>
</div>
</form>
</div>
);
};
export default AddFamilyForm;
Source