UserEditView.js

import React, { useState, useEffect } from 'react';
import './UserEditView.css';

const MyAccountAdminView = () => {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    middleName: '',
    suffix: '',
    maidenName: '',
    nickname: '',
    gender: '',
    techAlumChapter: '',
    classYear: '',
    gradYear: '',
    gradSemester: '',
    degrees: [{ subject: '', degreeType: '', degreeYear: '', degreeDescription: '', degreeDepartment: '', degreeCollege: '' }],
    addresses: [{ address1: '', address2: '', city: '', state: '', country: '', zipCode: '', preferredAddress: false }],
    contacts: [{ contactNumber: '', contactType: '', preferredContact: false }],
    involvements: ['', ''],
  });

  const techAlumChapters = ['Chapter A', 'Chapter B', 'Chapter C'];
  const degreeTypes = ['AS', 'BS', 'MS', 'PhD'];
  const genders = ['male', 'female', 'other'];
  const contactTypes = ['phone', 'email'];

  useEffect(() => {
    const savedData = JSON.parse(localStorage.getItem('myAccountData'));
    if (savedData) {
      setFormData({
        ...formData,
        ...savedData,
        degrees: savedData.degrees || formData.degrees,
        addresses: savedData.addresses || formData.addresses,
        contacts: savedData.contacts || formData.contacts,
        involvements: savedData.involvements || formData.involvements,
      });
    }
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleDegreeChange = (index, e) => {
    const updatedDegrees = [...formData.degrees];
    updatedDegrees[index][e.target.name] = e.target.value;
    setFormData({ ...formData, degrees: updatedDegrees });
  };

  const handleAddDegree = () => {
    setFormData({
      ...formData,
      degrees: [...formData.degrees, { subject: '', degreeType: '', degreeYear: '', degreeDescription: '', degreeDepartment: '', degreeCollege: '' }]
    });
  };

  const handleDeleteDegree = (index) => {
    const updatedDegrees = formData.degrees.filter((_, i) => i !== index);
    setFormData({ ...formData, degrees: updatedDegrees });
  };

  const handleAddressChange = (index, e) => {
    const updatedAddresses = [...formData.addresses];
    updatedAddresses[index][e.target.name] = e.target.value;
    setFormData({ ...formData, addresses: updatedAddresses });
  };

  const handleAddAddress = () => {
    setFormData({
      ...formData,
      addresses: [...formData.addresses, { address1: '', address2: '', city: '', state: '', country: '', zipCode: '', preferredAddress: false }]
    });
  };

  const handleDeleteAddress = (index) => {
    const updatedAddresses = formData.addresses.filter((_, i) => i !== index);
    setFormData({ ...formData, addresses: updatedAddresses });
  };

  const handleContactChange = (index, e) => {
    const updatedContacts = [...formData.contacts];
    updatedContacts[index][e.target.name] = e.target.value;
    setFormData({ ...formData, contacts: updatedContacts });
  };

  const handleAddContact = () => {
    setFormData({
      ...formData,
      contacts: [...formData.contacts, { contactNumber: '', contactType: '', preferredContact: false }]
    });
  };

  const handleDeleteContact = (index) => {
    const updatedContacts = formData.contacts.filter((_, i) => i !== index);
    setFormData({ ...formData, contacts: updatedContacts });
  };

  const handleSave = () => {
    localStorage.setItem('myAccountData', JSON.stringify(formData));
    alert('Your information has been saved!');
  };

  const handleClear = () => {
    setFormData({
      firstName: '',
      lastName: '',
      middleName: '',
      suffix: '',
      maidenName: '',
      nickname: '',
      gender: '',
      techAlumChapter: '',
      classYear: '',
      gradYear: '',
      gradSemester: '',
      degrees: [{ subject: '', degreeType: '', degreeYear: '', degreeDescription: '', degreeDepartment: '', degreeCollege: '' }],
      addresses: [{ address1: '', address2: '', city: '', state: '', country: '', zipCode: '', preferredAddress: false }],
      contacts: [{ contactNumber: '', contactType: '', preferredContact: false }],
      involvements: ['', ''],
    });
  };

  return (
    <div className="my-account-container">
      <h1>My Account Information</h1>
      <form className="account-form">
        <h2>Personal Information</h2>
        <label>First Name</label>
        <input name="firstName" placeholder="First Name" value={formData.firstName} onChange={handleChange} required />
        
        <label>Last Name</label>
        <input name="lastName" placeholder="Last Name" value={formData.lastName} onChange={handleChange} required />
        
        <label>Middle Name</label>
        <input name="middleName" placeholder="Middle Name" value={formData.middleName} onChange={handleChange} />
        
        <label>Maiden Name</label>
        <input name="maidenName" placeholder="Maiden Name" value={formData.maidenName} onChange={handleChange} />

        <label>Suffix</label>
        <input name="suffix" placeholder="Suffix" value={formData.suffix} onChange={handleChange} />
        
        <label>Nickname</label>
        <input name="nickname" placeholder="Nickname" value={formData.nickname} onChange={handleChange} />
        
        <label>Gender</label>
        <select name="gender" value={formData.gender} onChange={handleChange} required>
          <option value="">Select Gender</option>
          {genders.map(gender => <option key={gender} value={gender}>{gender}</option>)}
        </select>
  
        <label>Tech Alumni Chapter</label>
        <select name="techAlumChapter" value={formData.techAlumChapter} onChange={handleChange}>
          <option value="">Select Chapter</option>
          {techAlumChapters.map(chapter => <option key={chapter} value={chapter}>{chapter}</option>)}
        </select>
  
        <label>Class Year</label>
        <input 
          name="classYear" 
          placeholder="Class Year" 
          value={formData.classYear} 
          onChange={handleChange} 
          required 
          type="number" 
        />
        
        <label>Grad Year</label>
        <input 
          name="gradYear" 
          placeholder="Grad Year" 
          value={formData.gradYear} 
          onChange={handleChange} 
          required 
          type="number" 
        />
        
        <label>Grad Semester</label>
        <input 
          name="gradSemester" 
          placeholder="Grad Semester" 
          value={formData.gradSemester} 
          onChange={handleChange} 
          maxLength="6" 
        />

      <h2>Degrees</h2>
      {formData.degrees.map((degree, index) => (
        <div key={index} className="form-section">
          <label>Subject</label>
          <input 
            name="subject" 
            placeholder="Subject" 
            value={degree.subject} 
            onChange={(e) => handleDegreeChange(index, e)} 
            required 
          />
          
          <label>Degree Type</label>
          <select 
            name="degreeType" 
            value={degree.degreeType} 
            onChange={(e) => handleDegreeChange(index, e)} 
            required
          >
            <option value="">Select Degree Type</option>
            {degreeTypes.map(type => (
              <option key={type} value={type}>{type}</option>
            ))}
          </select>
          
          <label>Degree Year</label>
          <input 
            name="degreeYear" 
            type="number"
            min="1900"
            max={new Date().getFullYear()} 
            placeholder="Degree Year/Expected Graduation" 
            value={degree.degreeYear} 
            onChange={(e) => handleDegreeChange(index, e)} 
            required 
          />
          
          <label>Degree Description</label>
          <input 
            name="degreeDescription" 
            placeholder="Degree Description" 
            value={degree.degreeDescription} 
            onChange={(e) => handleDegreeChange(index, e)} 
            maxLength="255" 
          />

          <label>Degree Department</label>
          <input 
            name="degreeDepartment" 
            placeholder="Degree Department" 
            value={degree.degreeDepartment} 
            onChange={(e) => handleDegreeChange(index, e)} 
          />
          
          <label>Degree College</label>
          <input 
            name="degreeCollege" 
            placeholder="Degree College" 
            value={degree.degreeCollege} 
            onChange={(e) => handleDegreeChange(index, e)} 
          />

          <button type="button" onClick={() => handleDeleteDegree(index)}>Delete Degree</button>
        </div>
      ))}

      <button type="button" onClick={handleAddDegree}>Add Degree</button>

      {/* Add similar sections for addresses and contacts */}
      {/* Example of addresses: */}
      <h2>Addresses</h2>
      {formData.addresses.map((address, index) => (
        <div key={index} className="form-section">
          <label>Address Line 1</label>
          <input 
            name="address1" 
            placeholder="Address Line 1" 
            value={address.address1} 
            onChange={(e) => handleAddressChange(index, e)} 
            required 
          />
          {/* More address fields here */}
          <button type="button" onClick={() => handleDeleteAddress(index)}>Delete Address</button>
        </div>
      ))}

      <button type="button" onClick={handleAddAddress}>Add Address</button>

      {/* Contacts and Involvements sections here, with similar structures */}

      <button type="button" onClick={handleSave}>Save User Information</button>
      <button type="button" onClick={handleClear}>Clear</button>
      </form>
    </div>
  );
};

export default MyAccountAdminView;