เพิ่มหน้า Register

// เปลี่ยนจาก function submitData () { ... }
const submitData = () => {
  ...
}

เพิ่ม async ใน submitData
const submitData = async () => {
  ...
  let userData = {
    firstname: firstNameDOM.value,
    lastname: lastNameDOM.value,
    age: ageDOM.value,
    gender: genderDOM.value,
    description: descriptionDOM.value,
    interests: interest
  }

  // เราจะเริิ่ม code จากตรงนี้กัน
}

const submitData = async () => {
  ...
  let userData = {
    firstname: firstNameDOM.value,
    lastname: lastNameDOM.value,
    age: ageDOM.value,
    gender: genderDOM.value,
    description: descriptionDOM.value,
    interests: interest
  }

  // submit data
  try {
    const response = await axios.post(
      'http://localhost:8000/users',
      userData
    )
    console.log('response data', response.data)
  } catch (error) {
    console.error(error)
  }
}

...
    <!-- เพิ่มบน ปุ่มส่งข้อมูล ขึ้นมา -->
    <div id="response-message" class="message"></div>
    <div class="center">
      <button onclick="submitData()" class="button">ส่งข้อมูล</button>
    </div>
...

.message {
  padding: 10px;
  background-color: lightgray;
  margin: 10px 0;
  display: none;
}

.message.success {
  background-color: lightgreen;
  display: block;
}

.message.danger {
  background-color: lightcoral;
  display: block;
}

const submitData = async () => {
  ...
  // เพิ่ม
  let responseMessageDOM = document.getElementById('response-message')
  // ย้าย try มาอยู่ก่อนส่งข้อมูลทั้งหมด
  try {
    let interest = ''

    for (let i = 0; i < interestDOMs.length; i++) {
      interest += interestDOMs[i].value
      if (i != interestDOMs.length - 1) {
        interest += ', '
      }
    }

    let userData = {
      firstname: firstNameDOM.value,
      lastname: lastNameDOM.value,
      age: ageDOM.value,
      gender: genderDOM.value,
      description: descriptionDOM.value,
      interests: interest
    }

    const response = await axios.post(
      'http://localhost:8000/users',
      userData
    )
    // หลัง response จาก axios เรียบร้อย = แสดง error message ออกมา
    responseMessageDOM.innerText = 'เพิ่มข้อมูลเรียบร้อย !'
    responseMessageDOM.className = 'message success'
  } catch (error) {
    // เกิด error อะไรก็ตาม ให้แสดงว่ามีปัญหาเกิดขึ้นออกมา
    responseMessageDOM.innerText = 'มีปัญหาเกิดขึ้น'
    responseMessageDOM.className = 'message danger'
  }

const submitData = async () => {
  let firstNameDOM = document.querySelector('input[name=firstname]')
  let lastNameDOM = document.querySelector('input[name=lastname]')
  let ageDOM = document.querySelector('input[name=age]') 
  let genderDOM = document.querySelector('input[name=gender]:checked') || {}
  let interestDOMs = document.querySelectorAll('input[name=interest]:checked') || {}
  let descriptionDOM = document.querySelector('textarea[name=description]')
  ...
}

const validateData = (userData) => {
  let errors = []
  if (!userData.firstname) {
    errors.push('กรุณาใส่ชื่อจริง')
  }
  if (!userData.lastname) {
    errors.push('กรุณาใส่นามสกุล')
  }
  if (!userData.age) {
    errors.push('กรุณาใส่อายุ')
  }
  if (!userData.description) {
    errors.push('กรุณาใส่คำอธิบาย')
  }
  if (!userData.interests) {
    errors.push('กรุณาเลือกความสนใจอย่างน้อย 1 อย่าง')
  }
  return errors
}

const submitData = async () => {
  ...

  try {
    let userData = {
      firstname: firstNameDOM.value,
      lastname: lastNameDOM.value,
      age: ageDOM.value,
      gender: genderDOM.value,
      description: descriptionDOM.value,
      interests: interest
    }

    // เพิ่มการเรียกใช้ validate ขึ้นมา
    const errors = validateData(userData)

    // ถ้าเจอ error อย่างน้อย 1 ตัว
    if (errors.length > 0) {
      throw {
        message: 'กรอกข้อมูลไม่ครบ',
        errors: errors
      }
    }
  } catch (error) {
    let messageDOM = 'มีปัญหาเกิดขึ้น'
    if (error.errors && error.errors.length > 0) {
      messageDOM = '<div>'
      messageDOM += `<div>${error.message}</div>`
      messageDOM += '<ul>'
      for (let i = 0; i < error.errors.length; i++) {
        messageDOM += `<li>${error.errors[i]}</li>`
      }
      messageDOM += '</ul>'
      messageDOM += '</div>'
    }
    responseMessageDOM.innerHTML = messageDOM
    responseMessageDOM.className = 'message danger'
  }
}

const validateData = (userData) => {
  let errors = []
  if (!userData.firstname) {
    errors.push('กรุณาใส่ชื่อจริง')
  }
  if (!userData.lastname) {
    errors.push('กรุณาใส่นามสกุล')
  }
  if (!userData.age) {
    errors.push('กรุณาใส่อายุ')
  }
  if (!userData.description) {
    errors.push('กรุณาใส่คำอธิบาย')
  }
  if (!userData.interests) {
    errors.push('กรุณาเลือกความสนใจอย่างน้อย 1 อย่าง')
  }
  return errors
}

const validateData = (userData) => { ... }

app.post('/users', async (req, res) => {
  try {
    let user = req.body

    // เพิ่ม code สำหรับ validate
    const errors = validateData(user)

    if (errors.length > 0) {
      throw {
        errorMessage: 'กรอกข้อมูลไม่ครบ',
        errors: errors
      }
    }

    const results = await conn.query('INSERT INTO users SET ?', user)
    res.json({
      message: 'insert ok',
      data: results[0]
    })
  } catch (error) {
    const message = error.errorMessage || 'something wrong' // เพิ่ม handle message
    res.status(500).json({
      message: message,
      errors: error.errors || [] // ส่ง array error เข้าไปผ่าน body
    })
  }
})

const submitData = async () => {
  try {
    ...

    // ลอง comment Frontend เพื่อทดสอบ
    // const errors = validateData(userData)

    // if (errors.length > 0) {
    //   throw {
    //     message: 'กรอกข้อมูลไม่ครบ',
    //     errors: errors
    //   }
    // }

  } catch (error) {
    let messageDOM = 'มีปัญหาเกิดขึ้น'
    // ปรับตัวแปรให้รองรับใช้ได้ทั้ง 2 ฝั่ง โดย error.errors คือฝั่งของ Frontend
    let errors = error.errors || []
    let errorMessage = error.message

    // เพิ่ม code สำหรับรับ error message ของ Backend
    if (error.response && error.response.data) {
      errors = error.response.data.errors
      errorMessage = error.response.data.message
    }

    if (errors && errors.length > 0) {
      messageDOM = '<div>'
      messageDOM += `<div>${errorMessage}</div>`
      messageDOM += '<ul>'
      for (let i = 0; i < errors.length; i++) {
        messageDOM += `<li>${errors[i]}</li>`
      }
      messageDOM += '</ul>'
      messageDOM += '</div>'
    }
    responseMessageDOM.innerHTML = messageDOM
    responseMessageDOM.className = 'message danger'
  }
}