[Chatterbox - Client]

const app = {
  server: `http://3.36.72.17:3000/${githubID}/messages`,
  init: () => {
    app.handleSubmit()
  },
  fetch: (callback) => {
    console.log('fetch합니다.')
    window
    .fetch(app.server)
    .then(data => data.json())
    .then(callback)
  },
  clearMessages: () => {
    console.log('브라우저상의 메세지 모두삭제')
    document.querySelector('#chats').innerHTML = ''
  },
  clearForms: () => { //새 메시지를 작성 후 send로 post요청을 위해 post버튼을 누르면 사라지게 만든다.
    console.log('내가 새로 만든 메세지 value값 삭제')
    document.querySelector('.inputUser').value = ''
    document.querySelector('.inputChat').value = ''
  },
  send: (message, callback) => {
    console.log('post요청')
    window.
    fetch(app.server, {
      method: 'POST',
      body: JSON.stringify(message),
      headers:{'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(callback)
  },
  renderMessage: ({username, text, date, roomname}) => { 
    // 브라우저상에 흩뿌려주는 기능 한 덩어리씩 흩뿌려야하니까
    // 큰 틀 <div>하나로 다 감싼다.
    console.log('흩뿌리기')
    const temp = `<div class='chat'>
    <div>${username}</div>
    <div>${text}</div>
    <div>${date}</div>
    <div>${roomname}</div>
    </div>`
    document.querySelector('#chats').innerHTML = 
    temp + document.querySelector('#chats').innerHTML 
    // 기존 데이터값에 새로 추가하는 데이터(메세지)를 붙여서 렌더링
  },
  handleSubmit: () => {
    // submit 이벤트처리
    console.log('submit 이벤트가 처리됩니다.')
    let button = document.querySelector('.submit')
    button.addEventListener("submit", app.handleChange)
  },
  handleChange: (e) => {
    console.log('새 메세지 post요청')
    e.preventDefault() // 기본동작을 제어하는것 페이지 깜빡임 방지
    app.clearMessages() // 기존 브라우저에 보이는 메시지들 삭제
    app.send({ // 내가 새로 쓴 메시지들 post요청
      username: document.querySelector('.inputUser').value,
      text: document.querySelector('.inputChat').value,
      date: new Date(),
      roomname: 'secrets room'
    },() => {
      app.fetch(data => // fetch메소드 사용해서 데이터값들 가져옴
        data.forEach(app.renderMessage)) // 가져온 값들을 브라우저상에 흩뿌려줌
        app.clearForms() // text창 클리어~
    }
    )
  }
};
app.init();