120 lines
3.5 KiB
React
120 lines
3.5 KiB
React
import React, { useState, useEffect } from 'react';
|
|
import styles from './ModifyForm.module.css';
|
|
|
|
function ModifyForm({ contactDetails, setContactDetails }) {
|
|
const [formData, setFormData] = useState({
|
|
firstname: '',
|
|
lastname: '',
|
|
nickname: '',
|
|
});
|
|
|
|
// Initialize form with contactDetails when component mounts or contactDetails changes
|
|
useEffect(() => {
|
|
if (contactDetails) {
|
|
setFormData({
|
|
firstname: contactDetails.firstname || '',
|
|
lastname: contactDetails.lastname || '',
|
|
nickname: contactDetails.nickname || '',
|
|
});
|
|
}
|
|
}, [contactDetails]);
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
const updatedFormData = {
|
|
...formData,
|
|
[name]: value,
|
|
};
|
|
|
|
setFormData(updatedFormData);
|
|
|
|
// Update parent state with the updated form data
|
|
setContactDetails(updatedFormData);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.modifyForm}>
|
|
<h3 className={styles.sectionTitle}>Edit Contact Information</h3>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="firstname" className={styles.formLabel}>
|
|
First Name
|
|
<span className={styles.requiredIndicator}>*</span>
|
|
</label>
|
|
<div className={styles.inputContainer}>
|
|
<input
|
|
type="text"
|
|
id="firstname"
|
|
name="firstname"
|
|
value={formData.firstname}
|
|
onChange={handleChange}
|
|
className={styles.formInput}
|
|
placeholder="Enter contact's first name"
|
|
required
|
|
minLength="2"
|
|
/>
|
|
<span className={styles.inputIcon}>👤</span>
|
|
</div>
|
|
<div className={styles.validationHint}>
|
|
Required • Minimum 2 characters
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="lastname" className={styles.formLabel}>
|
|
Last Name
|
|
<span className={styles.requiredIndicator}>*</span>
|
|
</label>
|
|
<div className={styles.inputContainer}>
|
|
<input
|
|
type="text"
|
|
id="lastname"
|
|
name="lastname"
|
|
value={formData.lastname}
|
|
onChange={handleChange}
|
|
className={styles.formInput}
|
|
placeholder="Enter contact's last name"
|
|
required
|
|
minLength="2"
|
|
/>
|
|
<span className={styles.inputIcon}>📇</span>
|
|
</div>
|
|
<div className={styles.validationHint}>
|
|
Required • Minimum 2 characters
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="nickname" className={styles.formLabel}>
|
|
Nickname
|
|
<span className={styles.optionalIndicator}>(Optional)</span>
|
|
</label>
|
|
<div className={styles.inputContainer}>
|
|
<input
|
|
type="text"
|
|
id="nickname"
|
|
name="nickname"
|
|
value={formData.nickname}
|
|
onChange={handleChange}
|
|
className={styles.formInput}
|
|
placeholder="Enter a friendly nickname (optional)"
|
|
/>
|
|
<span className={styles.inputIcon}>🌟</span>
|
|
</div>
|
|
<div className={styles.validationHint}>
|
|
Optional • Leave empty if not needed
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.formInfo}>
|
|
<p>
|
|
Fields marked with <span className={styles.requiredIndicator}>*</span>{' '}
|
|
are required. Nickname is optional and can be left blank.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ModifyForm;
|