chat_ui (jQuery, ES6)

// jQuery selectors
const $sendMessage = $('#send-message')
const $messages = $('#messages')
const $room = $('#room')
const $roomList = $('#room-list')
const $sendForm = $('#send-form')

const socket = io.connect()
const chatApp = new Chat(socket)

const divEscapedContentElement = message => {
  return $('<div></div>').text(message)
}

const divSystemContentElement = message => {
  return $('<div></div>').html('<i>' + message + '</i>')
}

const processUserInput = chatApp => {
  const message = $sendMessage.val()
  if (isCommand(message)) {
    const systemMessage = chatApp.processCommand(message)
    if (systemMessage) {
      $messages.append(divSystemContentElement(systemMessage))
    }
  }
  else {
    // broadcast non-command input to other users
    chatApp.sendMessage($room.text(), message)
    $messages.append(divEscapedContentElement(message))
    $messages.scrollTop($messages.prop('scrollHeight'))
  }
  $sendMessage.val('')
}

// if user input starts with a slash, treat it as a command
const isCommand = message => {
  return message.charAt(0) === '/'
}



$(document).ready(() => {
  const documentMain = () => {
    socket.on('nameResult', displayNameChangeResults)
    socket.on('joinResult', displayRoomJoinResults)
    socket.on('message', displayReceivedMessage)
    socket.on('rooms', displayAvailableRoomsList)

    // request list of rooms intermittently
    setInterval(() => {
      socket.emit('rooms')
    }, 1000)

    $sendMessage.focus()

    // allow submitting the form to send a chat message
    $sendForm.submit(() => {
      processUserInput(chatApp)
      return false
    })
  }

  const displayNameChangeResults = result => {
    let message
    if (result.success) {
      message = 'You are now known as ' + result.name + '.'
    }
    else {
      message = result.message
    }
    $messages.append(divSystemContentElement(message))
  }

  const displayRoomJoinResults = result => {
    $room.text(result.room)
    $messages.append(divSystemContentElement('Room changed'))
  }

  const displayReceivedMessage = message => {
    const newMessage = $('<div></div>').text(message.text)
    $messages.append(newMessage)
  }

  const displayAvailableRoomsList = rooms => {
    $roomList.empty()
    for (let room in rooms) {
      room = room.substring(1, room.length)
      if (room !== '') {
        $roomList.append(divEscapedContentElement(room))
      }
    }
    // allow click of room name to change to that room
    $roomList.find('div').click(() => {
      chatApp.processCommand('/join ' + $(this).text())
      $sendMessage.focus()
    })
    allowClickingRoomNameToJoin()
  }

  const allowClickingRoomNameToJoin = () => {
    $roomList.find('div').click(() => {
      chatApp.processCommand('/join ' + $(this).text())
      $sendMessage.focus()
    })
  }

  documentMain()

})