Refactor JavaScript

Author: michaelstalker

assets/js/socket.js

@@ -10,17 +10,18 @@ let driving = false;
 // set up your syncDiff function using updateUsers as a callback
 
 const startButton = document.querySelector('.start-button')
-startButton.addEventListener('click', e => {
+startButton.addEventListener('click', event => {
   driving = true;
   // send 'start_pointing' message to the channel here
 })
 
-const nextCardButtons = document.getElementsByClassName('next-card')
-for (let i = 0;i < nextCardButtons.length; i++) {
-  nextCardButtons[i].addEventListener('click', e => {
+document
+  .querySelectorAll('.next-card')
+  .forEach(elem => {
+    elem.addEventListener('click', event => {
     // send 'finalized_points' message to the channel here
+    })
   })
-}
 
 document
   .querySelector('.calculate-points')
@@ -34,7 +35,7 @@ document
 // 'winner'
 // 'tie'
 
-function showCard(state) {
+const showCard = state => {
   document
     .querySelector('.start-button')
     .style.display = "none"
@@ -58,7 +59,7 @@ function showCard(state) {
     .innerHTML = state.card.description
 }
 
-function showWinner(state) {
+const showWinner = state => {
   document
     .querySelector('.winner')
     .style.display = "block"
@@ -76,7 +77,7 @@ function showWinner(state) {
     .disabled = !driving
 }
 
-function showTie(state) {
+const showTie = state => {
   document
     .querySelector('.tie')
     .style.display = "block"

assets/js/users.js

@@ -5,17 +5,15 @@ const usersElem = document.querySelector('.users')
 const updateUsers = presence => {
   usersElem.innerHTML = ''
 
-  // let user = list presences with the help of a listBy function
-  for(let i = 0; i < users.length; i++) {
-    addUser(users[i])
-  }
+  // let users = list presences with the help of a listBy function
+  users.forEach(user => addUser(user))
 
   // implement a feature that
   // 1. checks if all fo the users in the present list have voted, i.e. have points values that are not nil
   // 2. displays the user's vote next to their name if so
 }
 
-const listBy = (username, { metas: [{ points }, ..._rest]}) => {
+const listBy = (username, {metas: [{points}, ..._rest]}) => {
   // build out the listBy function so that it returns a list of users
   // where each user looks like this:
   // {username: username, points: points}
@@ -26,7 +24,7 @@ const showPoints = usersElem => ({userId, points}) => {
   userElem.innerHTML = points
 }
 
-function addUser(user) {
+const addUser = user => {
   const userElem = document.createElement('dt')
   userElem.appendChild(document.createTextNode(user.username))
   userElem.setAttribute('class', 'col-8')