ft(Chat): user can chat on barefoot nomad

[Finishes #169817577]

.eslintignore

@@ -0,0 +1 @@
+src/public/chat/js/

package.json

@@ -71,6 +71,7 @@
     "find-up": "^4.1.0",
     "istanbul-lib-instrument": "^3.3.0",
     "jsonwebtoken": "^8.5.1",
+    "moment": "^2.24.0",
     "morgan": "^1.9.1",
     "node-mocks-http": "^1.8.1",
     "passport": "^0.4.1",

src/app.js

@@ -12,6 +12,7 @@ app.use(express.urlencoded({ extended: false }));
 app.use(express.json());
 app.use(passport.initialize());
 
+
 // running all event listeners
 NotificationListeners();
 

src/controllers/chat.controller.js

@@ -0,0 +1,77 @@
+import { Op } from 'sequelize';
+import { users, io } from '../helpers/eventEmmiters/socket';
+import ResponseService from '../services/response.service';
+import ChatService from '../services/chat.service';
+import UserService from '../services/user.service';
+
+/** Class representing comments controller. */
+class ChatController {
+  /**
+   * Save a new message.
+   * @param {object} req request
+   * @param {object} res response
+   * @returns {object} response object
+   */
+  static async saveMessage(req, res) {
+    const newMessage = await ChatService.saveMessage({ ...req.body, sender: req.userData.email });
+    ChatService.sendMessage(req.body.receiver, req.userData.email, req.body.message);
+
+    ResponseService.setSuccess(200, 'message added successfully', newMessage);
+    ResponseService.send(res);
+  }
+
+  /**
+   * gets all messages for a user
+   * @param {object} req request
+   * @param {object} res response
+   * @returns {object} response
+   */
+  static async getMessages(req, res) {
+    const message = await ChatService.getMessages({
+      [Op.or]: [{ receiver: req.userData.email }, { sender: req.userData.email }]
+    });
+
+    ResponseService.setSuccess(200, 'messages fetched successfully', message);
+    ResponseService.send(res);
+  }
+
+  /**
+   * gets all messages for a user
+   * @param {object} req request
+   * @param {object} res response
+   * @returns {object} response
+   */
+  static async getAllUsers(req, res) {
+    const allUsers = await UserService.getAllUsers();
+
+
+    const chatUsers = allUsers.map((user) => {
+      const chatUser = {
+        id: user.id,
+        firstName: user.firstName,
+        lastName: user.lastName,
+        email: user.email,
+        profilePicture: user.profilePicture
+      };
+
+      const onlineUser = users[user.email];
+
+      if (onlineUser) {
+        chatUser.isOnline = true;
+        return chatUser;
+      }
+      chatUser.isOnline = false;
+      return chatUser;
+    });
+
+    const sortedUsers = chatUsers.sort((a, b) => a.isOnline.toString()
+      .localeCompare(b.isOnline.toString())).reverse();
+
+    io.emit('updateUsersList', sortedUsers);
+
+    ResponseService.setSuccess(200, 'All users', sortedUsers);
+    return ResponseService.send(res);
+  }
+}
+
+export default ChatController;

src/helpers/eventEmmiters/socket.js

@@ -1,6 +1,15 @@
+import moment from 'moment';
+
 const io = require('socket.io')();
+
 const socketioJwt = require('socketio-jwt');
 
+const generateMessage = (from, text) => ({
+  from,
+  text,
+  createdAt: moment().valueOf()
+});
+
 const users = {};
 const startSocket = (server) => {
   io.attach(server);
@@ -12,15 +21,15 @@ const startSocket = (server) => {
       timeout: 15000 // 15 seconds to send the authentication message
     }))
     .on('authenticated', (socket) => {
-      socket.emit('success', socket.decoded_token.email); // Emit success message for front-end
+      socket.emit('success', socket.decoded_token); // Emit success message for front-end
       socket.on('new-user', (user) => { // save a new user for future needs
-        userName = user;
-        users[user] = socket;
-        io.sockets.emit('user-connected', `${user} has joined.`);
+        userName = user.email;
+        users[user.email] = socket;
+        socket.broadcast.emit('user-connected', generateMessage('Admin', `${user.firstName} ${user.lastName} Joined!`));
       });
       socket.on('private message', (msg) => {
-        const fromMsg = { from: userName, txt: msg.txt };
-        users[msg.to].emit('private message', fromMsg);
+        socket.emit('newMessage', generateMessage(`You --> ${msg.to}`, msg.text));
+        users[msg.to].emit('newMessage', generateMessage(`${userName}--> ${msg.to}`, msg.text));
       });
       socket.on('disconnect', () => {
         delete users[userName];

src/migrations/20200126114026-create-chat.js

@@ -0,0 +1,33 @@
+const chatMigrations = {
+  up: (queryInterface, Sequelize) => queryInterface.createTable('Chats', {
+    id: {
+      allowNull: false,
+      autoIncrement: true,
+      primaryKey: true,
+      type: Sequelize.INTEGER
+    },
+    sender: {
+      type: Sequelize.STRING
+    },
+    receiver: {
+      type: Sequelize.STRING
+    },
+    message: {
+      type: Sequelize.STRING
+    },
+    isRead: {
+      type: Sequelize.BOOLEAN,
+      defaultValue: false,
+    },
+    createdAt: {
+      allowNull: false,
+      type: Sequelize.DATE
+    },
+    updatedAt: {
+      allowNull: false,
+      type: Sequelize.DATE
+    }
+  }),
+  down: (queryInterface) => queryInterface.dropTable('Chats')
+};
+export default chatMigrations;

src/models/chat.js

@@ -0,0 +1,12 @@
+export default (sequelize, DataTypes) => {
+  const Chat = sequelize.define('Chat', {
+    sender: DataTypes.STRING,
+    receiver: DataTypes.STRING,
+    message: DataTypes.STRING,
+    isRead: DataTypes.BOOLEAN
+  }, {});
+  Chat.associate = () => {
+    // associations can be defined here
+  };
+  return Chat;
+};

src/public/chat.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
+    <meta name="viewport" content="width=device-width, inital-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="./css/styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  </head>
+  <body class="chat">
+
+    <div class="chat__sidebar">
+      <h3>People</h3>
+      <div id="users"></div>
+    </div>
+
+    <div class="chat__main">
+      <ol id="messages" class="chat__messages"></ol>
+
+      <div class="chat__footer">
+        <form id="message-form">
+          <input name="message" type="text" placeholder="Message" autofocus autocomplete="off"/>
+          <button id="submit-btn">Send</button>
+        </form>
+      </div>
+    </div>
+
+    <script id="message-template" type="text/template">
+      <li class="message">
+        <div class="message__title">
+          <h4>{{from}}</h4>
+          <span>{{createdAt}}</span>
+        </div>
+        <div class="message__body">
+          <p>{{text}}</p>
+        </div>
+      </li>
+    </script>
+
+    <!-- <script src="/socket.io/socket.io.js"></script> -->
+    <script defer type="module" src="./script.js"></script>
+    <script type="text/javascript" src="./chat/js/libs/moment.js"></script>
+    <script type="text/javascript" src="./chat/js/libs/mustache.js"></script>
+  </body>
+</html>

src/public/chat/js/libs/http-requests.js

@@ -0,0 +1,40 @@
+const messageContainer = document.getElementById('message-container');
+
+export const saveMessages = async (API, token, data) => {
+  const response = await fetch(API, {
+    method: 'POST', 
+    mode: 'cors', 
+    cache: 'no-cache', 
+    credentials: 'same-origin', 
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: token,
+    },
+    redirect: 'follow', 
+    referrerPolicy: 'no-referrer', 
+    body: JSON.stringify(data) 
+  });
+
+  const result = await response.json(); 
+
+  return result;
+};
+
+export const getAllUsers = async (API, token) => {
+  const response = await fetch(API, {
+    method: 'GET', 
+    mode: 'cors', 
+    cache: 'no-cache', 
+    credentials: 'same-origin',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: token,
+    },
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+  });
+
+  const result = await response.json();
+
+  return result;
+};