MyAccountAdminView.js

import React, { useState, useEffect } from 'react';
import './MyAccountAdminView.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(savedData);
    }
  }, []);

  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: '' }]
    });
  };

  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!');
    // Update this with the backend call later we need to use PUT for updating
    // and use POST for creating the new entry
  };

  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</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>
  
        <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 />
            
            <label>Address Line 2</label>
            <input name="address2" placeholder="Address Line 2" value={address.address2} onChange={(e) => handleAddressChange(index, e)} />
            
            <label>City</label>
            <input name="city" placeholder="City" value={address.city} onChange={(e) => handleAddressChange(index, e)} required />
            
            <label>State</label>
            <input name="state" placeholder="State" value={address.state} onChange={(e) => handleAddressChange(index, e)} required />
            
            <label>Country</label>
            <input name="country" placeholder="Country" value={address.country} onChange={(e) => handleAddressChange(index, e)} required />
            
            <label>Zip Code</label>
            <input name="zipCode" placeholder="Zip Code" value={address.zipCode} onChange={(e) => handleAddressChange(index, e)} />
            
            <label>
              Preferred Address
              <input type="checkbox" name="preferredAddress" checked={address.preferredAddress} onChange={(e) => handleAddressChange(index, { ...e, target: { name: 'preferredAddress', value: e.target.checked } })} />
            </label>
            <button type="button" onClick={() => handleDeleteAddress(index)}>Delete Address</button>
          </div>
        ))}
        <button type="button" onClick={handleAddAddress}>Add Address</button>
  
        <h2>Contacts</h2>
        {formData.contacts.map((contact, index) => (
          <div key={index} className="form-section">
            <label>Contact Number</label>
            <input 
              name="contactNumber" 
              placeholder="Contact Number" 
              value={contact.contactNumber} 
              onChange={(e) => handleContactChange(index, e)} 
              required 
            />
            
            <label>Contact Type</label>
            <select 
              name="contactType" 
              value={contact.contactType} 
              onChange={(e) => handleContactChange(index, e)} 
              required
            >
              <option value="">Select Contact Type</option>
              {contactTypes.map(type => <option key={type} value={type}>{type}</option>)}
            </select>
            
            <label>
              Preferred Contact
              <input 
                type="checkbox" 
                name="preferredContact" 
                checked={contact.preferredContact} 
                onChange={(e) => handleContactChange(index, { ...e, target: { name: 'preferredContact', value: e.target.checked } })} 
              />
            </label>
            <button type="button" onClick={() => handleDeleteContact(index)}>Delete Contact</button>
          </div>
        ))}
        <button type="button" onClick={handleAddContact}>Add Contact</button>
  
        <h2>Involvements</h2>
        {formData.involvements.map((involvement, index) => (
          <div key={index}>
            <label>Involvement</label>
            <input 
              name={`involvement${index}`} 
              placeholder="Involvement" 
              value={involvement} 
              onChange={(e) => {
                const updatedInvolvements = [...formData.involvements];
                updatedInvolvements[index] = e.target.value;
                setFormData({ ...formData, involvements: updatedInvolvements });
              }} 
            />
          </div>
        ))}
  
        <button type="button" onClick={handleSave}>Save/Update</button>
        <button type="button" onClick={handleSave}>Create User</button>
        <button type="button" onClick={handleClear}>Clear</button>
      </form>
    </div>
  );
  
  
};

export default MyAccountAdminView;