refactor

Author: SophieDeBenedetto

assets/js/socket.js

@@ -4,36 +4,50 @@ 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(() => updateUsers(presence))
 let driving = false;
 
-// connect to Presence here
-// set up your syncDiff function using updateUsers as a callback
+if (window.pointingParty.username) {
+  channel.join()
+    .receive('ok', resp => { console.log('Joined successfully', resp) })
+    .receive('error', resp => { console.log('Unable to join', resp) })
+}
 
 const startButton = document.querySelector('.start-button')
 startButton.addEventListener('click', event => {
   driving = true;
-  // send 'start_pointing' message to the channel here
+  channel.push('start_pointing', {})
 })
 
 document
   .querySelectorAll('.next-card')
   .forEach(elem => {
     elem.addEventListener('click', event => {
-      channel.push('next_card', {points: e.target.value})
+      channel.push('next_card', {points: event.target.value})
     })
   })
 
 document
   .querySelector('.calculate-points')
   .addEventListener('click', event => {
     const storyPoints = document.querySelector('.story-points')
-    // send 'user_estimated' to the channel here
+    channel.push('user_estimated', { points: storyPoints.value })
   })
 
-// call the relevant function defined below when you receive the following events from the channel:
-// 'next_card'
-// 'winner'
-// 'tie'
+channel.on('new_card', state => {
+  showCard(state)
+})
+
+channel.on('winner', state => {
+  showWinner(state)
+})
+
+channel.on('tie', state => {
+  showTie(state)
+})
 
 const showCard = state => {
   document

assets/js/users.js

@@ -1,39 +1,40 @@
 import { forEach, isNil, map, none } from 'ramda'
 
-const usersElem = document.querySelector('.users')
-
 const updateUsers = presence => {
+  const usersElem = document.querySelector('.users')
   usersElem.innerHTML = ''
 
-  // let users = list presences with the help of a listBy function
-  users.forEach(user => addUser(user))
+  const users = presence.list(userData)
+  forEach(addUser(usersElem))(users)
 
-  // 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
+  if (allHaveEstimated(users)) {
+    forEach(showPoints(usersElem))(users)
+  }
 }
 
-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}
-}
+const userData = (userId, { metas: [{ points }, ..._rest]}) => ({ userId, points })
 
-const showPoints = ({userId, points}) => {
+const showPoints = usersElem => ({userId, points}) => {
   const userElem = document.querySelector(`.${userId}.user-estimate`)
   userElem.innerHTML = points
 }
 
-const addUser = user => {
+const addUser = usersElem => ({userId, points}) => {
   const userElem = document.createElement('dt')
-  userElem.appendChild(document.createTextNode(user.username))
+  userElem.appendChild(document.createTextNode(userId))
   userElem.setAttribute('class', 'col-8')
 
   const estimateElem = document.createElement('dd')
-  estimateElem.setAttribute('class', `${user.username} user-estimate col-4`)
+  estimateElem.setAttribute('class', `${userId} user-estimate col-4`)
 
   usersElem.appendChild(userElem)
   usersElem.appendChild(estimateElem)
 }
 
+const allHaveEstimated = users => {
+  const pointsCollection = map(({ points }) => points)(users)
+
+  return none(isNil)(pointsCollection)
+}
+
 export default updateUsers

lib/pointing_party_web/channels/room_channel.ex

@@ -1,7 +1,8 @@
 defmodule PointingPartyWeb.RoomChannel do
   use PointingPartyWeb, :channel
 
-  alias PointingParty.Card
+  alias PointingParty.{Card, VoteCalculator}
+  alias PointingPartyWeb.Presence
 
   def join("room:lobby", _payload, socket) do
     send(self(), :after_join)
@@ -10,8 +11,8 @@ defmodule PointingPartyWeb.RoomChannel do
   end
 
   def handle_info(:after_join, socket) do
-    # handle Presence listing and tracking here
-
+    push(socket, "presence_state", Presence.list(socket))
+    {:ok, _} = Presence.track(socket, socket.assigns.username, %{})
     {:noreply, socket}
   end
 
@@ -33,12 +34,18 @@ defmodule PointingPartyWeb.RoomChannel do
 
   def handle_in("start_pointing", _params, socket) do
     updated_socket = initialize_state(socket)
-    # broadcast the "new_card" message with a payload of %{card: current_card}
-
+    broadcast!(updated_socket, "new_card", %{card: current_card(updated_socket)})
     {:reply, :ok, updated_socket}
   end
 
-  
+  intercept ["new_card"]
+
+  def handle_out("new_card", payload, socket) do
+    Presence.update(socket, socket.assigns.username, &(Map.put(&1, :points, nil)))
+    push(socket, "new_card", payload)
+    {:noreply, socket}
+  end
+
   defp current_card(socket) do
     socket.assigns
     |> Map.get(:current)

lib/pointing_party_web/channels/user_socket.ex

@@ -15,9 +15,9 @@ defmodule PointingPartyWeb.UserSocket do
   #
   # See `Phoenix.Token` documentation for examples in
   # performing token verification on connect.
-  def connect(_params, socket, _connect_info) do
-    {:ok, socket}
-  end
+  def connect(%{"username" => username}, socket, _connect_info) do
+   {:ok, assign(socket, :username, username)}
+ end
 
   # Socket id's are topics that allow you to identify all sockets for a given user:
   #