From 10ca58bb697bd2b9057490ef3cf864b44d89dc48 Mon Sep 17 00:00:00 2001 From: Vidwa De Seram Date: Sun, 7 Jan 2024 10:42:43 +0530 Subject: [PATCH 1/2] chat done --- admin/package-lock.json | 213 ++++++++++++++++++++++++++++++++++ admin/package.json | 3 + admin/src/App.js | 52 +++++---- admin/src/pages/Chat.js | 156 ++++++++++++++++--------- client/package-lock.json | 80 +++++++++++++ client/package.json | 1 + client/src/App.js | 44 +++---- client/src/components/Chat.js | 78 ++++++++++--- 8 files changed, 513 insertions(+), 114 deletions(-) diff --git a/admin/package-lock.json b/admin/package-lock.json index 5e74bd2..41c5a25 100644 --- a/admin/package-lock.json +++ b/admin/package-lock.json @@ -12,11 +12,14 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.6.4", + "fs": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", "react-loader-spinner": "^6.1.6", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", + "socket.io": "^4.7.3", + "socket.io-client": "^4.7.3", "sweetalert2": "^11.10.2", "web-vitals": "^2.1.4" } @@ -3483,6 +3486,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -4095,6 +4103,19 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==" + }, + "node_modules/@types/cors": { + "version": "2.8.17", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz", + "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==", + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/eslint": { "version": "8.56.0", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.0.tgz", @@ -5765,6 +5786,14 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/base64id": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", + "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==", + "engines": { + "node": "^4.5.0 || >= 5.9" + } + }, "node_modules/batch": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", @@ -6404,6 +6433,18 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -7292,6 +7333,94 @@ "node": ">= 0.8" } }, + "node_modules/engine.io": { + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.4.tgz", + "integrity": "sha512-KdVSDKhVKyOi+r5uEabrDLZw2qXStVvCsEB/LN3mw4WFi6Gx50jTyuxYVCwAAC0U46FdnzP/ScKRBTXb/NiEOg==", + "dependencies": { + "@types/cookie": "^0.4.1", + "@types/cors": "^2.8.12", + "@types/node": ">=10.0.0", + "accepts": "~1.3.4", + "base64id": "2.0.0", + "cookie": "~0.4.1", + "cors": "~2.8.5", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0" + }, + "engines": { + "node": ">=10.2.0" + } + }, + "node_modules/engine.io-client": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz", + "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz", + "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/engine.io/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/engine.io/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/enhanced-resolve": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", @@ -8773,6 +8902,11 @@ "node": ">= 0.6" } }, + "node_modules/fs": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", + "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==" + }, "node_modules/fs-extra": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", @@ -15971,6 +16105,77 @@ "node": ">=8" } }, + "node_modules/socket.io": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.3.tgz", + "integrity": "sha512-SE+UIQXBQE+GPG2oszWMlsEmWtHVqw/h1VrYJGK5/MC7CH5p58N448HwIrtREcvR4jfdOJAY4ieQfxMr55qbbw==", + "dependencies": { + "accepts": "~1.3.4", + "base64id": "~2.0.0", + "cors": "~2.8.5", + "debug": "~4.3.2", + "engine.io": "~6.5.2", + "socket.io-adapter": "~2.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.2.0" + } + }, + "node_modules/socket.io-adapter": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz", + "integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==", + "dependencies": { + "ws": "~8.11.0" + } + }, + "node_modules/socket.io-adapter/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/socket.io-client": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.3.tgz", + "integrity": "sha512-nU+ywttCyBitXIl9Xe0RSEfek4LneYkJxCeNnKCuhwoH4jGXO1ipIUw/VA/+Vvv2G1MTym11fzFC0SxkrcfXDw==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18370,6 +18575,14 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/admin/package.json b/admin/package.json index b2625f1..eb55359 100644 --- a/admin/package.json +++ b/admin/package.json @@ -7,11 +7,14 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.6.4", + "fs": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", "react-loader-spinner": "^6.1.6", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", + "socket.io": "^4.7.3", + "socket.io-client": "^4.7.3", "sweetalert2": "^11.10.2", "web-vitals": "^2.1.4" }, diff --git a/admin/src/App.js b/admin/src/App.js index 7dd40fd..f0cc9f1 100644 --- a/admin/src/App.js +++ b/admin/src/App.js @@ -31,44 +31,46 @@ import { UserContext } from "./pages/auth/UserContext"; // Import UserContext import { UserProvider } from "./pages/auth/UserContext"; const App = () => { - const { updateUserData } = useContext(UserContext); + const { updateUserData, userData } = useContext(UserContext); const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { const checkUserLoggedIn = async () => { - const token = localStorage.getItem("admin-token"); - if (token) { - try { - const profileResponse = await axios.get( - `${process.env.REACT_APP_API_PATH}/users/profile`, - { headers: { Authorization: `Bearer ${token}` } } - ); + if (!userData) { + const token = localStorage.getItem("admin-token"); + if (token) { + try { + const profileResponse = await axios.get( + `${process.env.REACT_APP_API_PATH}/users/profile`, + { headers: { Authorization: `Bearer ${token}` } } + ); - if (profileResponse.data && profileResponse.data.type === "ADMIN") { - updateUserData(profileResponse.data); - setIsLoggedIn(true); - } else { + if (profileResponse.data && profileResponse.data.type === "ADMIN") { + updateUserData(profileResponse.data); + setIsLoggedIn(true); + } else { + Swal.fire({ + title: "Access Denied", + text: "You are not authorized to access the admin panel.", + icon: "error", + confirmButtonText: "OK", + }); + localStorage.removeItem("admin-token"); + setIsLoggedIn(false); + } + } catch (error) { + console.error("Error fetching admin data:", error); Swal.fire({ - title: "Access Denied", - text: "You are not authorized to access the admin panel.", + title: "Error", + text: "An error occurred while fetching user data.", icon: "error", confirmButtonText: "OK", }); - localStorage.removeItem("admin-token"); setIsLoggedIn(false); } - } catch (error) { - console.error("Error fetching admin data:", error); - Swal.fire({ - title: "Error", - text: "An error occurred while fetching user data.", - icon: "error", - confirmButtonText: "OK", - }); + } else { setIsLoggedIn(false); } - } else { - setIsLoggedIn(false); } }; diff --git a/admin/src/pages/Chat.js b/admin/src/pages/Chat.js index 6e0b068..9200cb2 100644 --- a/admin/src/pages/Chat.js +++ b/admin/src/pages/Chat.js @@ -1,64 +1,114 @@ -import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; -import '../css/Chat.css'; // Update the import to the correct path of your CSS file +import React, { useState, useEffect } from "react"; +import "../css/Chat.css"; +import io from "socket.io-client"; -const clients = [ - { id: 1, name: 'Client 1' }, - { id: 2, name: 'Client 2' }, - { id: 3, name: 'Client 3' }, - { id: 4, name: 'Client 4' }, - // ... more clients -]; +const socket = io(`${process.env.REACT_APP_API_PATH_CHAT}/chat`); const ChatBox = () => { - const [selectedClient, setSelectedClient] = useState(clients[0].id); - const [messages, setMessages] = useState([]); - const [input, setInput] = useState(''); + const [clients, setClients] = useState([]); + const [selectedClient, setSelectedClient] = useState(null); + const [messages, setMessages] = useState([]); + const [input, setInput] = useState(""); - const sendMessage = (event) => { - event.preventDefault(); - if (input.trim()) { - setMessages([...messages, { text: input, sender: 'client', clientId: selectedClient }]); - setInput(''); + useEffect(() => { + socket.emit("connectAdmin"); + + socket.on("messageFromClient", (payload) => { + if (payload && payload.clientId && payload.message) { + setMessages((prevMessages) => [ + ...prevMessages, + { + text: payload.message, + sender: "client", + clientId: payload.clientId, + }, + ]); + + // Add new client to the list if not already present + setClients((prevClients) => { + const isClientExisting = prevClients.some( + (client) => client.id === payload.clientId + ); + if (!isClientExisting) { + return [ + ...prevClients, + { id: payload.clientId, name: `Client ${payload.clientId}` }, + ]; + } + return prevClients; + }); + + // Automatically select the new client if no client is currently selected + if (!selectedClient) { + setSelectedClient(payload.clientId); } + } + }); + + return () => { + socket.off("messageFromClient"); }; + }, [selectedClient]); - return ( -
-
- {clients.map((client) => ( -
setSelectedClient(client.id)} - className={`client ${client.id === selectedClient ? 'active' : ''}`} - > - {client.name} -
- ))} -
-
-
- {messages - .filter((message) => message.clientId === selectedClient) - .map((message, index) => ( -
- {message.text} -
- ))} -
-
- setInput(e.target.value)} - placeholder="Text message" - /> - -
-
+ const sendMessageToClient = (clientId, message) => { + if (clientId && socket.connected) { + socket.emit("sendMessageToClient", { clientId, message }); + } + }; + + const sendMessage = (event) => { + event.preventDefault(); + if (input.trim() && selectedClient) { + sendMessageToClient(selectedClient, input); + setMessages([ + ...messages, + { text: input, sender: "admin", clientId: selectedClient }, + ]); + setInput(""); + } + }; + + return ( +
+
+ {clients.map((client) => ( +
setSelectedClient(client.id)} + className={`client ${client.id === selectedClient ? "active" : ""}`} + > + {client.name} +
+ ))} +
+
+
+ Chat with {selectedClient ? `Client ${selectedClient}` : "a client"} +
+
+ {messages + .filter((message) => message.clientId === selectedClient) + .map((message, index) => ( +
+ {message.text} +
+ ))}
- ); +
+ setInput(e.target.value)} + placeholder="Text message" + /> + +
+
+
+ ); }; export default ChatBox; diff --git a/client/package-lock.json b/client/package-lock.json index d10d23d..1c08fe7 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -31,6 +31,7 @@ "react-slick": "^0.29.0", "redux": "^5.0.1", "slick-carousel": "^1.8.1", + "socket.io-client": "^4.7.3", "sweetalert2": "^11.10.2", "swiper": "^11.0.5", "web-vitals": "^2.1.4" @@ -4156,6 +4157,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -7681,6 +7687,46 @@ "node": ">= 0.8" } }, + "node_modules/engine.io-client": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz", + "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz", + "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", @@ -16329,6 +16375,32 @@ "jquery": ">=1.8.0" } }, + "node_modules/socket.io-client": { + "version": "4.7.3", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.3.tgz", + "integrity": "sha512-nU+ywttCyBitXIl9Xe0RSEfek4LneYkJxCeNnKCuhwoH4jGXO1ipIUw/VA/+Vvv2G1MTym11fzFC0SxkrcfXDw==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18793,6 +18865,14 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/client/package.json b/client/package.json index cdb50bf..6cf06dc 100644 --- a/client/package.json +++ b/client/package.json @@ -26,6 +26,7 @@ "react-slick": "^0.29.0", "redux": "^5.0.1", "slick-carousel": "^1.8.1", + "socket.io-client": "^4.7.3", "sweetalert2": "^11.10.2", "swiper": "^11.0.5", "web-vitals": "^2.1.4" diff --git a/client/src/App.js b/client/src/App.js index 8bfa052..3b03817 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,6 +1,6 @@ import "./App.css"; import React, { useEffect, useState, useContext } from "react"; -import { useLocation } from 'react-router-dom'; +import { useLocation } from "react-router-dom"; //BrowserRouter import { @@ -75,30 +75,31 @@ function App() { return null; } - useEffect(() => { const fetchUserData = async () => { - const token = localStorage.getItem("token"); - if (token) { - console.log(token); - try { - const profileResponse = await axios.get( - `${process.env.REACT_APP_API_PATH}/users/profile`, - { - headers: { - Authorization: `Bearer ${token}`, // Use the token from localStorage - }, - } - ); - setUserData(profileResponse.data); + if (!userData) { + const token = localStorage.getItem("token"); + if (token) { + console.log(token); + try { + const profileResponse = await axios.get( + `${process.env.REACT_APP_API_PATH}/users/profile`, + { + headers: { + Authorization: `Bearer ${token}`, // Use the token from localStorage + }, + } + ); + setUserData(profileResponse.data); - // Assuming profileResponse.data contains the user object - if (profileResponse.data) { - dispatch(login()); - setIsUserLoggedIn(true); // Set logged in state to true + // Assuming profileResponse.data contains the user object + if (profileResponse.data) { + dispatch(login()); + setIsUserLoggedIn(true); // Set logged in state to true + } + } catch (error) { + console.error("Error fetching user data:", error); } - } catch (error) { - console.error("Error fetching user data:", error); } } }; @@ -145,7 +146,6 @@ function App() { } /> -