Implemented signalR in project wiget in dashboard

src/components/Dashboard/Projects.jsx

@@ -1,8 +1,33 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
+import eventBus from "../../services/eventBus";
+import GlobalRepository from "../../repositories/GlobalRepository";
 
 const Projects = () => {
   const { projectsCardData } = useDashboardProjectsCardData();
+  const [projectData, setProjectsData] = useState(projectsCardData);
+
+  useEffect(() => {
+    setProjectsData(projectsCardData);
+  }, [projectsCardData]);
+
+  const handler = useCallback(
+    async (msg) => {
+        try {
+          const response =
+            await GlobalRepository.getDashboardProjectsCardData();
+          setProjectsData(response.data);
+        } catch (err) {
+          console.error(err);
+        }
+    },
+    [GlobalRepository]
+  );
+
+  useEffect(() => {
+    eventBus.on("project", handler);
+    return () => eventBus.off("project", handler);
+  }, [handler]);
 
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
@@ -15,13 +40,13 @@ const Projects = () => {
       <div className="d-flex justify-content-around align-items-start mt-n2">
         <div>
           <h4 className="mb-0 fw-bold">
-            {projectsCardData.totalProjects?.toLocaleString()}
+            {projectData.totalProjects?.toLocaleString()}
           </h4>
           <small className="text-muted">Total</small>
         </div>
         <div>
           <h4 className="mb-0 fw-bold">
-            {projectsCardData.ongoingProjects?.toLocaleString()}
+            {projectData.ongoingProjects?.toLocaleString()}
           </h4>
           <small className="text-muted">Ongoing</small>
         </div>
@@ -30,4 +55,4 @@ const Projects = () => {
   );
 };
 
-export default Projects;
+export default Projects;