Lesson: Working with Time

Andrew Mead · Andrew Mead · commit 96d6479d4937 · 2019-01-31T12:04:42.000-05:00
diff --git a/chat-app/public/index.html b/chat-app/public/index.html
@@ -16,7 +16,13 @@
 
         <script id="message-template" type="text/html">
             <div>
-                <p>{{message}}</p>
+                <p>{{createdAt}} - {{message}}</p>
+            </div>
+        </script>
+
+        <script id="location-message-template" type="text/html">
+            <div>
+                <p><a href="{{url}}" target="_blank">My current location</a></p>
             </div>
         </script>
 
diff --git a/chat-app/public/js/chat.js b/chat-app/public/js/chat.js
@@ -9,11 +9,21 @@ const $messages = document.querySelector('#messages')
 
 // Templates
 const messageTemplate = document.querySelector('#message-template').innerHTML
+const locationMessageTemplate = document.querySelector('#location-message-template').innerHTML
 
 socket.on('message', (message) => {
     console.log(message)
     const html = Mustache.render(messageTemplate, {
-        message
+        message: message.text,
+        createdAt: moment(message.createdAt).format('h:mm a')
+    })
+    $messages.insertAdjacentHTML('beforeend', html)
+})
+
+socket.on('locationMessage', (url) => {
+    console.log(url)
+    const html = Mustache.render(locationMessageTemplate, {
+        url
     })
     $messages.insertAdjacentHTML('beforeend', html)
 })
diff --git a/chat-app/src/index.js b/chat-app/src/index.js
@@ -3,6 +3,7 @@ const http = require('http')
 const express = require('express')
 const socketio = require('socket.io')
 const Filter = require('bad-words')
+const { generateMessage } = require('./utils/messages')
 
 const app = express()
 const server = http.createServer(app)
@@ -16,8 +17,8 @@ app.use(express.static(publicDirectoryPath))
 io.on('connection', (socket) => {
     console.log('New WebSocket connection')
 
-    socket.emit('message', 'Welcome!')
-    socket.broadcast.emit('message', 'A new user has joined!')
+    socket.emit('message', generateMessage('Welcome!'))
+    socket.broadcast.emit('message', generateMessage('A new user has joined!'))
 
     socket.on('sendMessage', (message, callback) => {
         const filter = new Filter()
@@ -26,17 +27,17 @@ io.on('connection', (socket) => {
             return callback('Profanity is not allowed!')
         }
 
-        io.emit('message', message)
+        io.emit('message', generateMessage(message))
         callback()
     })
 
     socket.on('sendLocation', (coords, callback) => {
-        io.emit('message', `https://google.com/maps?q=${coords.latitude},${coords.longitude}`)
+        io.emit('locationMessage', `https://google.com/maps?q=${coords.latitude},${coords.longitude}`)
         callback()
     })
 
     socket.on('disconnect', () => {
-        io.emit('message', 'A user has left!')
+        io.emit('message', generateMessage('A user has left!'))
     })
 })
 
diff --git a/chat-app/src/utils/messages.js b/chat-app/src/utils/messages.js
@@ -0,0 +1,10 @@
+const generateMessage = (text) => {
+    return {
+        text,
+        createdAt: new Date().getTime()
+    }
+}
+
+module.exports = {
+    generateMessage
+}
