From ebc03cb9eb6ef555f99b14ffc236d236a45acdde Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Sun, 20 Apr 2025 13:47:30 +0530
Subject: [PATCH] Fetched workItem from cache instead of props to resolve state
 inconsistency issue.

---
 .../Project/Infrastructure/WorkArea.jsx       | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index 9ade29a0..e937ed0e 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -1,8 +1,23 @@
-import React, { useEffect } from "react";
+import React, { useEffect,useState } from "react";
 import WorkItem from "./WorkItem";
+import {useProjectDetails} from "../../../hooks/useProjects";
+import {getCachedData} from "../../../slices/apiDataManager";
+
+const WorkArea = ( {workArea, floor, forBuilding} ) =>{
+  const [workItems,setWorkItems] =useState([])
+
+  useEffect( () =>
+  { 
+    const project = getCachedData( "projectInfo" )   
+    if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
+
+  const building = project.buildings?.find((b) => b.id === forBuilding.id);
+  const floors = building?.floors?.find((f) => f.id === floor.id);
+  const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
+
+  setWorkItems(workAreas?.workItems || []);
+  }, [ workArea ,floor,floor] );
 
-const WorkArea = ({ workArea, floor, forBuilding }) => {
-  useEffect(() => {}, [workArea]);
   return (
     <React.Fragment key={workArea.id}>
       <tr>
@@ -25,7 +40,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
         </td>
       </tr>
 
-      {workArea?.workItems && workArea.workItems.length > 0 ? (
+      {(workItems && workItems.length > 0) && (
         <tr className="overflow-auto">
           <td colSpan={4}>
             <table className="table mx-1">
@@ -72,7 +87,8 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
             </table>
           </td>
         </tr>
-      ) : null}
+      )}
+    {!workItems && <p>No item</p>}
     </React.Fragment>
   );
 };