tsk-4: Fix contacts not being saved (#14)

Closes #4

Reviewed-on: phoenix/textsender#14

src/components/ViewContactWizard/ModifyForm.jsx

@@ -3,8 +3,8 @@ import styles from './ModifyForm.module.css';
 
 function ModifyForm({ contactDetails, setContactDetails }) {
   const [formData, setFormData] = useState({
-    first_name: '',
-    last_name: '',
+    firstname: '',
+    lastname: '',
     nickname: '',
   });
 
@@ -12,8 +12,8 @@ function ModifyForm({ contactDetails, setContactDetails }) {
   useEffect(() => {
     if (contactDetails) {
       setFormData({
-        first_name: contactDetails.first_name || '',
-        last_name: contactDetails.last_name || '',
+        firstname: contactDetails.firstname || '',
+        lastname: contactDetails.lastname || '',
         nickname: contactDetails.nickname || '',
       });
     }
@@ -37,16 +37,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
       <h3 className={styles.sectionTitle}>Edit Contact Information</h3>
 
       <div className={styles.formGroup}>
-        <label htmlFor="first_name" className={styles.formLabel}>
+        <label htmlFor="firstname" className={styles.formLabel}>
           First Name
           <span className={styles.requiredIndicator}>*</span>
         </label>
         <div className={styles.inputContainer}>
           <input
             type="text"
-            id="first_name"
-            name="first_name"
-            value={formData.first_name}
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
             onChange={handleChange}
             className={styles.formInput}
             placeholder="Enter contact's first name"
@@ -61,16 +61,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
       </div>
 
       <div className={styles.formGroup}>
-        <label htmlFor="last_name" className={styles.formLabel}>
+        <label htmlFor="lastname" className={styles.formLabel}>
           Last Name
           <span className={styles.requiredIndicator}>*</span>
         </label>
         <div className={styles.inputContainer}>
           <input
             type="text"
-            id="last_name"
-            name="last_name"
-            value={formData.last_name}
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
             onChange={handleChange}
             className={styles.formInput}
             placeholder="Enter contact's last name"