text: import React, { useState } from 'react'
  import Page from './Page'
  import Axios from 'axios'
  
  function HomeGuest () {
      // putting user entered data into state
      const [ username, setUsername ] = useState()
      const [ email, setEmail ] = useState()
      const [ password, setPassword ] = useState()
  
      // use axios service to connect to database and a user
      // using async function to await a response from the axios call before moving on
      // using axios post method to send the data, an object with 3 fields
      // the full post url is http://localhost:8080/register
      //   fixed with Axios.defaults.baseURL = 'http://localhost:8080' in main.js
      async function handleSubmit (evt) {
          evt.preventDefault()
          try {
              await Axios.post('/register', {
                  username : username,
                  email    : email,
                  password : password,
              })
              console.log('user was successfully created')
          } catch (e) {
              console.log('there was an error')
          }
      }
  
      // for the home page, Container component is sending a prop of wide=true for this rendering of it
      return (
          <Page title='Welcome!' wide={true}>
              <div className='row align-items-center'>
                  <div className='col-lg-7 py-3 py-md-5'>
                      <h1 className='display-3'>Remember Writing?</h1>
                      <p className='lead text-muted'>
                          Are you sick of short tweets and impersonal &ldquo;shared&rdquo; posts that are reminiscent of
                          the late 90&rsquo;s email forwards? We believe getting back to actually writing is the key to
                          enjoying the internet again.
                      </p>
                  </div>
                  <div className='col-lg-5 pl-lg-5 pb-3 py-lg-5'>
                      <form onSubmit={handleSubmit}>
                          <div className='form-group'>
                              <label htmlFor='username-register' className='text-muted mb-1'>
                                  <small>Username</small>
                              </label>
                              <input
                                  onChange={(e) => setUsername(e.target.value)}
                                  id='username-register'
                                  name='username'
                                  className='form-control'
                                  type='text'
                                  placeholder='Pick a username'
                                  autoComplete='off'
                              />
                          </div>
                          <div className='form-group'>
                              <label htmlFor='email-register' className='text-muted mb-1'>
                                  <small>Email</small>
                              </label>
                              <input
                                  onChange={(e) => setEmail(e.target.value)}
                                  id='email-register'
                                  name='email'
                                  className='form-control'
                                  type='text'
                                  placeholder='you@example.com'
                                  autoComplete='off'
                              />
                          </div>
                          <div className='form-group'>
                              <label htmlFor='password-register' className='text-muted mb-1'>
                                  <small>Password</small>
                              </label>
                              <input
                                  onChange={(e) => setPassword(e.target.value)}
                                  id='password-register'
                                  name='password'
                                  className='form-control'
                                  type='password'
                                  placeholder='Create a password'
                              />
                          </div>
                          <button type='submit' className='py-3 mt-4 btn btn-lg btn-success btn-block'>
                              Sign up for ComplexApp
                          </button>
                      </form>
                  </div>
              </div>
          </Page>
      )
  }
  
  export default HomeGuest
  