feat: added socket io to queues page

backend/src/controllers/QueueController.ts

@@ -1,4 +1,5 @@
 import { Request, Response } from "express";
+import { getIO } from "../libs/socket";
 import CreateQueueService from "../services/QueueService/CreateQueueService";
 import DeleteQueueService from "../services/QueueService/DeleteQueueService";
 import ListQueuesService from "../services/QueueService/ListQueuesService";
@@ -16,6 +17,12 @@ export const store = async (req: Request, res: Response): Promise<Response> => {
 
   const queue = await CreateQueueService({ name, color, greetingMessage });
 
+  const io = getIO();
+  io.emit("queue", {
+    action: "update",
+    queue
+  });
+
   return res.status(200).json(queue);
 };
 
@@ -35,6 +42,12 @@ export const update = async (
 
   const queue = await UpdateQueueService(queueId, req.body);
 
+  const io = getIO();
+  io.emit("queue", {
+    action: "update",
+    queue
+  });
+
   return res.status(201).json(queue);
 };
 
@@ -46,5 +59,11 @@ export const remove = async (
 
   await DeleteQueueService(queueId);
 
+  const io = getIO();
+  io.emit("queue", {
+    action: "delete",
+    queueId: +queueId
+  });
+
   return res.status(200).send();
 };

frontend/src/pages/Queues/index.js

@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
+
+import openSocket from "socket.io-client";
 
 import {
 	Button,
@@ -41,10 +43,54 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
+const reducer = (state, action) => {
+	if (action.type === "LOAD_QUEUES") {
+		const queues = action.payload;
+		const newQueues = [];
+
+		queues.forEach(queue => {
+			const queueIndex = state.findIndex(q => q.id === queue.id);
+			if (queueIndex !== -1) {
+				state[queueIndex] = queue;
+			} else {
+				newQueues.push(queue);
+			}
+		});
+
+		return [...state, ...newQueues];
+	}
+
+	if (action.type === "UPDATE_QUEUES") {
+		const queue = action.payload;
+		const queueIndex = state.findIndex(u => u.id === queue.id);
+
+		if (queueIndex !== -1) {
+			state[queueIndex] = queue;
+			return [...state];
+		} else {
+			return [queue, ...state];
+		}
+	}
+
+	if (action.type === "DELETE_QUEUE") {
+		const queueId = action.payload;
+		console.log("QUEUEID", queueId);
+		const queueIndex = state.findIndex(q => q.id === queueId);
+		if (queueIndex !== -1) {
+			state.splice(queueIndex, 1);
+		}
+		return [...state];
+	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
+};
+
 const Queues = () => {
 	const classes = useStyles();
 
-	const [queues, setQueue] = useState([]);
+	const [queues, dispatch] = useReducer(reducer, []);
 	const [loading, setLoading] = useState(false);
 
 	const [queueModalOpen, setQueueModalOpen] = useState(false);
@@ -56,8 +102,8 @@ const Queues = () => {
 			setLoading(true);
 			try {
 				const { data } = await api.get("/queue");
+				dispatch({ type: "LOAD_QUEUES", payload: data });
 
-				setQueue(data);
 				setLoading(false);
 			} catch (err) {
 				toastError(err);
@@ -66,6 +112,24 @@ const Queues = () => {
 		})();
 	}, []);
 
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+		socket.on("queue", data => {
+			if (data.action === "update" || data.action === "create") {
+				dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
+			}
+
+			if (data.action === "delete") {
+				dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
 	const handleOpenQueueModal = () => {
 		setQueueModalOpen(true);
 		setSelectedQueue(null);