Untitled

import { createRoot } from 'react-dom/client';

const style = {
  table: {
    borderCollapse: 'collapse'
  },
  tableCell: {
    border: '1px solid gray',
    margin: 0,
    padding: '5px 10px',
    width: 'max-content',
    minWidth: '150px'
  },
  form: {
    container: {
      padding: '20px',
      border: '1px solid #F0F8FF',
      borderRadius: '15px',
      width: 'max-content',
      marginBottom: '40px'
    },
    inputs: {
      marginBottom: '5px'
    },
    submitBtn: {
      marginTop: '10px',
      padding: '10px 15px',
      border:'none',
      backgroundColor: 'lightseagreen',
      fontSize: '14px',
      borderRadius: '5px',
      cursor: 'pointer',
    }
  }
}

function PhoneBookForm({ addEntryToPhoneBook }) {
  const [firstNameInput, setFirstNameInput] = useState('');
  const [lastNameInput, setLastNameInput] = useState('');
  const [phoneNumberInput, setPhoneNumberInput] = useState('');

  useEffect(() => {
    setFirstNameInput('Coder');
    setLastNameInput('Byte');
    setPhoneNumberInput('8885559999');
  },[]);
  
  return (
    <form onSubmit={e => { e.preventDefault() }} style={style.form.container}>
      <label>First name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userFirstname'
        name='userFirstname' 
        type='text'
        value={firstNameInput}
        onChange={(e) => setFirstNameInput(e.target.value)}
      />
      <br/>
      <label>Last name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userLastname'
        name='userLastname' 
        type='text'
        value={lastNameInput}
        onChange={(e) => setLastNameInput(e.target.value)} 
      />
      <br />
      <label>Phone:</label>
      <br />
      <input
        style={style.form.inputs}
        className='userPhone' 
        name='userPhone' 
        type='text'
        value={phoneNumberInput}
        onChange={(e) => setPhoneNumberInput(e.target.value)}
      />
      <br/>
      <input 
        style={style.form.submitBtn} 
        className='submitButton'
        type='submit' 
        value='Add User'
        onClick={() => addEntryToPhoneBook(firstNameInput, lastNameInput, phoneNumberInput)}
      />
    </form>
  )
}

function InformationTable({phoneBook}) {
  return (
    <table style={style.table} className='informationTable'>
      <thead> 
        <tr>
          <th style={style.tableCell}>First name</th>
          <th style={style.tableCell}>Last name</th>
          <th style={style.tableCell}>Phone</th>
        </tr>
        {phoneBook.map((entry, index) => {
          return (
            <tr key={index}>
              <th style={style.tableCell}>{entry.firstName}</th>
              <th style={style.tableCell}>{entry.lastName}</th>
              <th style={style.tableCell}>{entry.phoneNumber}</th>
            </tr>
          );
        })}
      </thead>
    </table>
  );
}

function Application(props) {
  const [phoneBook, setPhoneBook] = useState([]);

  const handleAddUser = (firstNameInput, lastNameInput, phoneNumberInput) => {
    const phoneBookInput = {
      firstName: firstNameInput,
      lastName: lastNameInput,
      phoneNumber: phoneNumberInput,
    };
    const addedPhoneBook = [...phoneBook, phoneBookInput];
    const sortedPhoneBook = addedPhoneBook.sort((a,b) => a.lastName.toLowerCase() > b.lastName.toLowerCase() ? 1 : -1);
    setPhoneBook(sortedPhoneBook);
  };

  return (
    <section>
      <PhoneBookForm addEntryToPhoneBook={handleAddUser}/>
      <InformationTable phoneBook={phoneBook} />
    </section>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<Application />);