tsk-10: Edit Contact (#23)

Closes #10 Reviewed-on: phoenix/textsender#23 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
2026-01-29 22:20:28 +00:00
parent 34644d1cd2
commit 0202425a09
15 changed files with 1952 additions and 787 deletions
@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import styles from './ModifyForm.module.css';
+
+function ModifyForm({ contactDetails, setContactDetails }) {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    nickname: '',
+  });
+
+  // Initialize form with contactDetails when component mounts or contactDetails changes
+  useEffect(() => {
+    if (contactDetails) {
+      setFormData({
+        first_name: contactDetails.first_name || '',
+        last_name: contactDetails.last_name || '',
+        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="first_name" 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}
+            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="last_name" 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}
+            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;