Socket.io enabled to real-time data exchange

Md-Rubel-Ahmed-Rana · Jul 6, 2024 · 61b8c3f · 61b8c3f
1 parent c9184ad
commit 61b8c3f
Show file tree

Hide file tree

Showing 17 changed files with 171 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ The Team Management App is a web-based application designed to facilitate team c
 ## Live Links
 
 - [Frontend](https://team-manager-eight.vercel.app)
-- [Backend](https://team-management-app-server-with-redis.onrender.com)
+- [Backend](https://api-team-manager.onrender.com)
 
 ###### Login to website
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
     "react-icons": "^4.10.1",
     "react-redux": "^9.1.0",
     "react-select": "^5.8.0",
+    "socket.io-client": "^4.7.5",
     "sweetalert2": "^11.7.18",
     "swiper": "^11.0.5",
     "tailwind-scrollbar": "^3.0.5"

diff --git a/frontend/src/components/pages/dashboard/invitation/PendingInvitation.tsx b/frontend/src/components/pages/dashboard/invitation/PendingInvitation.tsx
@@ -27,7 +27,7 @@ const PendingInvitation = () => {
       memberId: user?.id,
     });
     if (result?.data?.success) {
-      // socket.emit("notification", result?.data?.data);
+      socket.emit("notification", result?.data?.data);
       Swal.fire({
         position: "center",
         icon: "success",
@@ -45,7 +45,7 @@ const PendingInvitation = () => {
     });
     if (result?.data?.success) {
       // send notification viw socket
-      // socket.emit("notification", result?.data?.data);
+      socket.emit("notification", result?.data?.data);
 
       Swal.fire({
         position: "center",

diff --git a/frontend/src/components/pages/dashboard/leaveRequest/ProjectLeaveRequest.tsx b/frontend/src/components/pages/dashboard/leaveRequest/ProjectLeaveRequest.tsx
@@ -12,8 +12,6 @@ const ProjectLeaveRequest = () => {
   );
   const requests = requestsData?.data;
 
-  console.log("project", requests);
-
   return (
     <div>
       {requests?.length > 0 &&

diff --git a/frontend/src/components/pages/projects/desktop/AddMemberToProject.tsx b/frontend/src/components/pages/projects/desktop/AddMemberToProject.tsx
@@ -40,7 +40,7 @@ const AddMemberToProject = ({ isOpen, setIsOpen, projectId, team }: Props) => {
     const result: any = await addNewMember(memberData);
 
     if (result?.data?.success) {
-      // socket.emit("notification", result?.data?.data);
+      socket.emit("notification", result?.data?.data);
       Swal.fire({
         position: "center",
         icon: "success",

diff --git a/frontend/src/components/pages/projects/desktop/ProjectPage.tsx b/frontend/src/components/pages/projects/desktop/ProjectPage.tsx
@@ -34,8 +34,6 @@ const Projects = () => {
     user?.id
   );
 
-  console.log("Project for task", project);
-
   const handleLeaveRequest = async () => {
     Swal.fire({
       title: "So sad",
@@ -69,9 +67,9 @@ const Projects = () => {
   }, [query?.id]);
 
   // connect to socket team room
-  // useEffect(() => {
-  //   socket.emit("task-room", project?.id);
-  // }, [socket, project?.id]);
+  useEffect(() => {
+    socket.emit("task-room", project?.id);
+  }, [socket, project?.id]);
 
   return (
     <div className="flex h-screen">

diff --git a/frontend/src/components/pages/tasks/CreateTaskModal.tsx b/frontend/src/components/pages/tasks/CreateTaskModal.tsx
@@ -31,9 +31,9 @@ const CreateTaskModal = ({ isOpen, setIsOpen, project, status }: any) => {
     data.project = project.id;
     const result: any = await createTask(data);
     if (result?.data?.success) {
-      // window.location.reload();
-      // socket.emit("task", result?.data?.data?.data);
-      // socket.emit("notification", result?.data?.data?.notification);
+      window.location.reload();
+      socket.emit("task", result?.data?.data?.data);
+      socket.emit("notification", result?.data?.data?.notification);
       Swal.fire({
         position: "center",
         icon: "success",

diff --git a/frontend/src/components/pages/tasks/ParentTask.tsx b/frontend/src/components/pages/tasks/ParentTask.tsx
@@ -94,12 +94,7 @@ const ParentTask = ({ project }: Props) => {
     // Fetch tasks only if project id is available
     if (project?.id) {
       fetch(
-        `https://api-team-manager.onrender.com/task/by-project/${project.id}`,
-        {
-          headers: {
-            authorization: token || "",
-          },
-        }
+        `https://api-team-manager.onrender.com/task/by-project/${project.id}`
       )
         .then((res) => res.json())
         .then((data: any) => {
@@ -163,16 +158,15 @@ const ParentTask = ({ project }: Props) => {
   };
 
   // Listen for new tasks from socket
-  // useEffect(() => {
-  //   socket.on("task", (newTask: any) => {
-  //     console.log("New task data", newTask);
-  //     addNewTask(newTask);
-  //   });
-
-  //   return () => {
-  //     socket.off("task");
-  //   };
-  // }, [socket]);
+  useEffect(() => {
+    socket.on("task", (newTask: any) => {
+      addNewTask(newTask);
+    });
+
+    return () => {
+      socket.off("task");
+    };
+  }, [socket]);
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>

diff --git a/frontend/src/components/pages/teams/addMember/AddMemberModal.tsx b/frontend/src/components/pages/teams/addMember/AddMemberModal.tsx
@@ -53,7 +53,7 @@ const AddMemberModal = ({ isOpen, setIsOpen, team }: any) => {
     if (result?.data?.success) {
       closeModal();
       // send invitation notification
-      // socket.emit("notification", result?.data?.data);
+      socket.emit("notification", result?.data?.data);
       Swal.fire({
         position: "center",
         icon: "success",

diff --git a/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx b/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx
@@ -83,7 +83,7 @@ const MessageForm = ({ teamId, type }: Props) => {
       };
 
       const emitData: IMessage = { ...message, poster };
-      // socket.emit("message", emitData);
+      socket.emit("message", emitData);
       setRealTimeMessages((prev: IMessage[]) => [...prev, emitData]);
 
       setImagePreview([]);

diff --git a/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx b/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx
@@ -26,7 +26,6 @@ const ShowMessages = ({ messages }: Props) => {
   const [editedMessage, setEditedMessage] = useState<string | undefined>("");
   const [imageModalOpen, setImageModalOpen] = useState<boolean>(false);
   const [selectedImage, setSelectedImage] = useState<string>("");
-  const [onlineUsers, setOnlineUsers] = useState({});
   const [isEditMessage, setIsEditMessage] = useState<{
     id: string | undefined;
     status: boolean;
@@ -67,30 +66,30 @@ const ShowMessages = ({ messages }: Props) => {
     }
   };
 
-  // useEffect(() => {
-  //   const handleMessage = (data: IMessage) => {
-  //     setRealTimeMessages((prev: IMessage[]) => [...prev, data]);
-  //   };
+  useEffect(() => {
+    const handleMessage = (data: IMessage) => {
+      setRealTimeMessages((prev: IMessage[]) => [...prev, data]);
+    };
 
-  //   socket.on("message", handleMessage);
+    socket?.on("message", handleMessage);
 
-  //   return () => {
-  //     socket.off("message", handleMessage);
-  //   };
-  // }, [setRealTimeMessages, socket]);
+    return () => {
+      socket?.off("message", handleMessage);
+    };
+  }, [setRealTimeMessages, socket]);
 
   // keep updated message in state
-  // useEffect(() => {
-  //   setRealTimeMessages(messages);
-  // }, [messages, setRealTimeMessages]);
+  useEffect(() => {
+    setRealTimeMessages(messages);
+  }, [messages, setRealTimeMessages]);
 
   // keep user in the bottom of the message
-  // useEffect(() => {
-  //   if (messagesContainerRef.current) {
-  //     messagesContainerRef.current.scrollTop =
-  //       messagesContainerRef.current.scrollHeight;
-  //   }
-  // }, [realTimeMessages, socket]);
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight;
+    }
+  }, [realTimeMessages, socket]);
 
   return (
     <div

diff --git a/frontend/src/components/pages/teams/showTeam/TeamDetailsPage.tsx b/frontend/src/components/pages/teams/showTeam/TeamDetailsPage.tsx
@@ -28,9 +28,9 @@ const TeamDetailsPage = () => {
   };
 
   // connect to socket team room
-  // useEffect(() => {
-  //   socket.emit("join-room", team?.id);
-  // }, [socket, team?.id]);
+  useEffect(() => {
+    socket?.emit("join-room", team?.id);
+  }, [socket, team?.id]);
 
   useEffect(() => {
     setActiveNav(router?.query?.collaborate);

diff --git a/frontend/src/components/shared/Navbar.tsx b/frontend/src/components/shared/Navbar.tsx
@@ -18,7 +18,6 @@ const Navbar = () => {
   const { theme, setTheme } = useTheme();
   const { data }: any = useLoggedInUserQuery({});
   const user: IUser = data?.data;
-  console.log("User from navbar", user);
   const [isOpen, setIsOpen] = useState(false);
   const [toggle, setToggle] = useState(false);
   const { data: notifiedData } = useGetNotificationQuery(user?.id);
@@ -32,16 +31,15 @@ const Navbar = () => {
     window.location.replace("/");
   };
 
-  // useEffect(() => {
-  //   const handleNotification = (data: INotification) => {
-  //     console.log("New notification", data);
-  //     setUnreadNotifications((prev: INotification[]) => [...prev, data]);
-  //   };
-  //   socket.on("notification", handleNotification);
-  //   return () => {
-  //     socket.off("notification", handleNotification);
-  //   };
-  // }, [socket]);
+  useEffect(() => {
+    const handleNotification = (data: INotification) => {
+      setUnreadNotifications((prev: INotification[]) => [...prev, data]);
+    };
+    socket?.on("notification", handleNotification);
+    return () => {
+      socket?.off("notification", handleNotification);
+    };
+  }, [socket]);
 
   useEffect(() => {
     const unread = notifications.filter((notified) => !notified.read);