feat: show an alert when connection with whatsapp brokes

frontend/src/context/Auth/useAuth.js

@@ -11,6 +11,48 @@ const useAuth = () => {
 	const [isAuth, setIsAuth] = useState(false);
 	const [loading, setLoading] = useState(true);
 
+	api.interceptors.request.use(
+		config => {
+			const token = localStorage.getItem("token");
+			if (token) {
+				config.headers["Authorization"] = `Bearer ${JSON.parse(token)}`;
+				setIsAuth(true);
+			}
+			return config;
+		},
+		error => {
+			Promise.reject(error);
+		}
+	);
+
+	api.interceptors.response.use(
+		response => {
+			return response;
+		},
+		async error => {
+			const originalRequest = error.config;
+			if (error?.response?.status === 403 && !originalRequest._retry) {
+				originalRequest._retry = true;
+
+				const { data } = await api.post("/auth/refresh_token");
+				if (data) {
+					localStorage.setItem("token", JSON.stringify(data.token));
+					api.defaults.headers.Authorization = `Bearer ${data.token}`;
+				}
+				return api(originalRequest);
+			}
+			if (error?.response?.status === 401) {
+				localStorage.removeItem("token");
+				localStorage.removeItem("username");
+				localStorage.removeItem("profile");
+				localStorage.removeItem("userId");
+				api.defaults.headers.Authorization = undefined;
+				setIsAuth(false);
+			}
+			return Promise.reject(error);
+		}
+	);
+
 	useEffect(() => {
 		const token = localStorage.getItem("token");
 		if (token) {
@@ -18,48 +60,6 @@ const useAuth = () => {
 			setIsAuth(true);
 		}
 		setLoading(false);
-
-		api.interceptors.request.use(
-			config => {
-				const token = localStorage.getItem("token");
-				if (token) {
-					config.headers["Authorization"] = `Bearer ${JSON.parse(token)}`;
-					setIsAuth(true);
-				}
-				return config;
-			},
-			error => {
-				Promise.reject(error);
-			}
-		);
-
-		api.interceptors.response.use(
-			response => {
-				return response;
-			},
-			async error => {
-				const originalRequest = error.config;
-				if (error?.response?.status === 403 && !originalRequest._retry) {
-					originalRequest._retry = true;
-
-					const { data } = await api.post("/auth/refresh_token");
-					if (data) {
-						localStorage.setItem("token", JSON.stringify(data.token));
-						api.defaults.headers.Authorization = `Bearer ${data.token}`;
-					}
-					return api(originalRequest);
-				}
-				if (error?.response?.status === 401) {
-					localStorage.removeItem("token");
-					localStorage.removeItem("username");
-					localStorage.removeItem("profile");
-					localStorage.removeItem("userId");
-					api.defaults.headers.Authorization = undefined;
-					setIsAuth(false);
-				}
-				return Promise.reject(error);
-			}
-		);
 	}, []);
 
 	const handleLogin = async (e, user) => {
@@ -106,7 +106,7 @@ const useAuth = () => {
 		history.push("/login");
 	};
 
-	return { isAuth, loading, handleLogin, handleLogout };
+	return { isAuth, setIsAuth, loading, handleLogin, handleLogout };
 };
 
 export default useAuth;

frontend/src/context/WhatsApp/WhatsAppsContext.js

@@ -0,0 +1,17 @@
+import React, { createContext } from "react";
+
+import useWhatsApps from "./useWhatsApps";
+
+const WhatsAppsContext = createContext();
+
+const WhatsAppsProvider = ({ children }) => {
+	const { loading, whatsApps } = useWhatsApps();
+
+	return (
+		<WhatsAppsContext.Provider value={{ whatsApps, loading }}>
+			{children}
+		</WhatsAppsContext.Provider>
+	);
+};
+
+export { WhatsAppsContext, WhatsAppsProvider };

frontend/src/context/WhatsApp/useWhatsApps.js

@@ -0,0 +1,114 @@
+import { useState, useEffect, useReducer } from "react";
+import { toast } from "react-toastify";
+import openSocket from "socket.io-client";
+
+import api from "../../services/api";
+import { i18n } from "../../translate/i18n";
+
+const reducer = (state, action) => {
+	if (action.type === "LOAD_WHATSAPPS") {
+		const whatsApps = action.payload;
+
+		return [...whatsApps];
+	}
+
+	if (action.type === "UPDATE_WHATSAPPS") {
+		const whatsApp = action.payload;
+		const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
+
+		if (whatsAppIndex !== -1) {
+			state[whatsAppIndex] = whatsApp;
+			return [...state];
+		} else {
+			return [whatsApp, ...state];
+		}
+	}
+
+	if (action.type === "UPDATE_SESSION") {
+		const whatsApp = action.payload;
+		const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
+
+		if (whatsAppIndex !== -1) {
+			state[whatsAppIndex].status = whatsApp.status;
+			state[whatsAppIndex].updatedAt = whatsApp.updatedAt;
+			state[whatsAppIndex].qrcode = whatsApp.qrcode;
+			state[whatsAppIndex].retries = whatsApp.retries;
+			return [...state];
+		} else {
+			return [...state];
+		}
+	}
+
+	if (action.type === "DELETE_WHATSAPPS") {
+		const whatsAppId = action.payload;
+
+		const whatsAppIndex = state.findIndex(s => s.id === whatsAppId);
+		if (whatsAppIndex !== -1) {
+			state.splice(whatsAppIndex, 1);
+		}
+		return [...state];
+	}
+
+	if (action.type === "RESET") {
+		return [];
+	}
+};
+
+const useWhatsApps = () => {
+	const [whatsApps, dispatch] = useReducer(reducer, []);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		setLoading(true);
+		const fetchSession = async () => {
+			try {
+				const { data } = await api.get("/whatsapp/");
+				dispatch({ type: "LOAD_WHATSAPPS", payload: data });
+				setLoading(false);
+			} catch (err) {
+				setLoading(false);
+				const errorMsg = err.response?.data?.error;
+				if (errorMsg) {
+					if (i18n.exists(`backendErrors.${errorMsg}`)) {
+						toast.error(i18n.t(`backendErrors.${errorMsg}`));
+					} else {
+						toast.error(err.response.data.error);
+					}
+				} else {
+					toast.error("Unknown error");
+				}
+			}
+		};
+		fetchSession();
+	}, []);
+
+	useEffect(() => {
+		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+		socket.on("whatsapp", data => {
+			if (data.action === "update") {
+				dispatch({ type: "UPDATE_WHATSAPPS", payload: data.whatsapp });
+			}
+		});
+
+		socket.on("whatsapp", data => {
+			if (data.action === "delete") {
+				dispatch({ type: "DELETE_WHATSAPPS", payload: data.whatsappId });
+			}
+		});
+
+		socket.on("whatsappSession", data => {
+			if (data.action === "update") {
+				dispatch({ type: "UPDATE_SESSION", payload: data.session });
+			}
+		});
+
+		return () => {
+			socket.disconnect();
+		};
+	}, []);
+
+	return { whatsApps, loading };
+};
+
+export default useWhatsApps;