Only show points when all have voted

Author: michaelstalker

assets/js/socket.js

@@ -1,15 +1,13 @@
-import {Socket, Presence} from 'phoenix'
+import { Socket, Presence } from 'phoenix'
+import updateUsers  from './users'
 
 const socket = new Socket('/socket', {params: {username: window.pointingParty.username}})
 socket.connect()
 
 const channel = socket.channel('room:lobby', {})
 const presence = new Presence(channel)
 
-presence.onSync(() => {
-  const usersElem = document.querySelector('.users')
-  updateUsers(usersElem, presence)
-})
+presence.onSync(() => updateUsers(presence))
 
 if (window.pointingParty.username) {
   channel.join ()
@@ -23,26 +21,4 @@ calculateButton.addEventListener('click', event => {
   channel.push('user_estimated', { points: storyPoints.value })
 })
 
-channel.on("user_estimated", ({ points, userId }) => {
-  const user = document.querySelector(`.${userId} .user-estimate`)
-  user.innerHTML = points
-})
-
-const updateUsers = (usersElem, presence) => {
-  usersElem.innerHTML = ''
-  presence.list(updateUser(usersElem))
-}
-
-const updateUser = usersElem => (userId, _) => {
-  const userElem = document.createElement('li')
-  userElem.setAttribute('class', userId)
-  userElem.appendChild(document.createTextNode(userId))
-
-  const estimateElem = document.createElement('span')
-  estimateElem.setAttribute('class', 'user-estimate')
-  userElem.appendChild(estimateElem)
-
-  usersElem.appendChild(userElem)
-}
-
 export default socket

assets/js/users.js

@@ -0,0 +1,40 @@
+import { forEach, isNil, map, none } from 'ramda'
+
+const updateUsers = presence => {
+  const usersElem = document.querySelector('.users')
+  usersElem.innerHTML = ''
+
+  const users = presence.list(userData)
+  forEach(addUser(usersElem))(users)
+
+  if (allHaveEstimated(users)) {
+    forEach(showPoints(usersElem))(users)
+  }
+}
+
+const userData = (userId, { metas: [{ points }, ..._rest]}) => ({ userId, points })
+
+const showPoints = usersElem => ({userId, points}) => {
+  const userElem = document.querySelector(`.${userId} .user-estimate`)
+  userElem.innerHTML = points
+}
+
+const addUser = usersElem => ({userId, points}) => {
+  const userElem = document.createElement('li')
+  userElem.setAttribute('class', userId)
+  userElem.appendChild(document.createTextNode(userId))
+
+  const estimateElem = document.createElement('span')
+  estimateElem.setAttribute('class', 'user-estimate')
+  userElem.appendChild(estimateElem)
+
+  usersElem.appendChild(userElem)
+}
+
+const allHaveEstimated = users => {
+  const pointsCollection = map(({ points }) => points)(users)
+
+  return none(isNil)(pointsCollection)
+}
+
+export default updateUsers

assets/package-lock.json

@@ -6,6 +6,7 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "ramda": "^0.26.1",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },

assets/package.json

@@ -17,7 +17,7 @@ defmodule PointingPartyWeb.RoomChannel do
   end
 
   def handle_in("user_estimated", %{"points" => points}, socket) do
-    broadcast!(socket, "user_estimated", %{points: points, userId: socket.assigns.username})
+    Presence.update(socket, socket.assigns.username, fn old -> Map.put(old, :points, points) end)
 
     {:noreply, socket}
   end