Implemented signalR in project Infrastructure management modules

src/components/Project/Infrastructure/BuildingModel.jsx

@@ -96,7 +96,9 @@ const BuildingModel = ({
   };
 
   useEffect(() => {
+    if(projects_Details){
       setBuildings(projects_Details.data?.buildings);
+    }
   }, [projects_Details]);
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">

src/components/Project/Infrastructure/InfraTable.jsx

@@ -5,9 +5,13 @@ import FloorModel from "./FloorModel";
 import showToast from "../../../services/toastService";
 import ProjectRepository from "../../../repositories/ProjectRepository";
 import eventBus from "../../../services/eventBus";
-import { cacheData, clearCacheKey } from "../../../slices/apiDataManager";
+import {
+  cacheData,
+  clearCacheKey,
+  getCachedData,
+} from "../../../slices/apiDataManager";
 
-const InfraTable = ({ buildings, projectId }) => {
+const InfraTable = ({ buildings, projectId, signalRHandler }) => {
   const [projectBuilding, setProjectBuilding] = useState([]);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
   const [showFloorModal, setShowFloorModal] = useState(false);
@@ -118,28 +122,23 @@ const InfraTable = ({ buildings, projectId }) => {
 
   const handler = useCallback(
     (msg) => {
-      console.log(msg.projectIds.some((item) => item == projectId));
       if (msg.projectIds.some((item) => item == projectId)) {
-        console.log("caling APi");
         try {
-          clearCacheKey("projectInfo");
           ProjectRepository.getProjectByprojectId(projectId)
             .then((response) => {
-              console.log("API Called");
               cacheData("projectInfo", {
                 projectId: projectId,
                 data: response.data,
               });
-
-              // console.log(response?.data?.buildings);
               setProjectBuilding(response?.data?.buildings);
-              showToast(msg.message,"info")
+              signalRHandler?.(response?.data);
+              showToast(msg.message, "info");
             })
             .catch((error) => {
               console.error(error);
             });
         } catch (e) {
-          console.error(error);
+          console.error(e);
         }
       }
     },

src/components/Project/ProjectInfra.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import "./ProjectInfra.css";
 import BuildingModel from "./Infrastructure/BuildingModel";
 import FloorModel from "./Infrastructure/FloorModel";
@@ -12,20 +12,20 @@ import ProjectModal from "./ProjectModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT_INFRA } from "../../utils/constants";
 import InfraTable from "./Infrastructure/InfraTable";
-import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
+import {
+  cacheData,
+  clearCacheKey,
+  getCachedData,
+} from "../../slices/apiDataManager";
 import { useProjectDetails } from "../../hooks/useProjects";
-import {useDispatch, useSelector} from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import {refreshData} from "../../slices/localVariablesSlice";
+import { refreshData } from "../../slices/localVariablesSlice";
+import eventBus from "../../services/eventBus";
 
-const ProjectInfra = ({
+const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
-  data,
+  const reloadedData = useSelector((store) => store.localVariables.reload);
-  onDataChange,
-  eachSiteEngineer,
-} ) =>
-{
-  const reloadedData = useSelector((store)=>store.localVariables.reload)
   const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const { projects_Details,refetch, loading } = useProjectDetails(data?.id);
+  const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
   const [project, setProject] = useState(projects_Details);
   const [modalConfig, setModalConfig] = useState({ type: null, data: null });
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -39,8 +39,8 @@ const ProjectInfra = ({
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [clearFormTrigger, setClearFormTrigger] = useState(false);
   const [CurrentBuilding, setCurrentBuilding] = useState("");
-  const [ showModal, setShowModal ] = useState( false );
+  const [showModal, setShowModal] = useState(false);
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useEffect(() => {
     setProject(projects_Details);
@@ -156,15 +156,15 @@ const ProjectInfra = ({
           );
           updatedProject.buildings = updatedBuildings;
           // workItem update, but having local state issue there for needed to calling api
-          clearCacheKey( "projectInfo" )
+          clearCacheKey("projectInfo");
-          refetch()
+          refetch();
 
           cacheData("projectInfo", {
             projectId: updatedProject.id,
             data: updatedProject,
           });
 
-          setProject( updatedProject );
+          setProject(updatedProject);
           // closeTaskModel()
         }
       })
@@ -173,11 +173,8 @@ const ProjectInfra = ({
       });
   };
 
-
   const submitData = async (infraObject) => {
-    try
+    try {
-    {
-      
       let response = await ProjectRepository.manageProjectInfra(infraObject);
       const entity = response.data;
 
@@ -209,9 +206,8 @@ const ProjectInfra = ({
         setProject((prevProject) => ({
           ...prevProject,
           buildings: updatedBuildings,
-        } ) );
+        }));
         // closeBuildingModel()
-        
       }
       // Handle the floor data
       else if (entity.floor) {
@@ -247,12 +243,11 @@ const ProjectInfra = ({
           projectId: updatedProject.id,
           data: updatedProject,
         });
-        setProject( updatedProject );
+        setProject(updatedProject);
         // closeFloorModel()
       }
       // Handle the work area data
-      else if ( entity.workArea )
+      else if (entity.workArea) {
-      {
         let buildingId = infraObject[0].workArea.buildingId;
 
         const { floorId, areaName, id } = entity.workArea;
@@ -291,7 +286,7 @@ const ProjectInfra = ({
           projectId: updatedProject.id,
           data: updatedProject,
         });
-        setProject( updatedProject );
+        setProject(updatedProject);
         // closeWorkAreaModel()
       }
       // Handle the task (workItem) data
@@ -303,7 +298,6 @@ const ProjectInfra = ({
     }
   };
 
- 
   const toggleBuilding = (id) => {
     setExpandedBuildings((prev) =>
       prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
@@ -344,15 +338,17 @@ const ProjectInfra = ({
   };
 
   const handleShow = () => setShowModal(true);
-  const handleClose = () => setShowModal( false );
+  const handleClose = () => setShowModal(false);
-  useEffect( () =>
+  useEffect(() => {
-  {
+    if (reloadedData) {
-    if (reloadedData)
+      refetch();
-    {
+      dispatch(refreshData(false));
-      refetch()
+    }
-      dispatch( refreshData( false ) )
+  }, [reloadedData]);
+
+  const signalRHandler = (response) => {
+    setProject(response);
   }
-  },[reloadedData])
 
   return (
     <>
@@ -420,7 +416,6 @@ const ProjectInfra = ({
         >
           <TaskModel
             project={project}
-
             onClose={closeTaskModel}
             onSubmit={handleTaskModelFormSubmit}
             clearTrigger={clearFormTrigger}
@@ -484,6 +479,7 @@ const ProjectInfra = ({
                     buildings={project?.buildings}
                     projectId={project.id}
                     handleFloor={submitData}
+                    signalRHandler = {signalRHandler}
                   />
                 )}
               </div>

src/services/signalRService.js

@@ -77,6 +77,7 @@ export function startSignalR(loggedUser) {
       }
       // if created or updated infra
       if (data.keyword == "Infra") {
+        clearCacheKey("projectInfo");
         eventBus.emit("infra", data);
       }