refactor ProjectCard component to improve state management and error handling

src/components/Project/ProjectCard.jsx

@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import { getDateDifferenceInDays } from "../../utils/dateUtils";
 import { useNavigate } from "react-router-dom";
@@ -12,16 +12,23 @@ import {MANAGE_PROJECT} from "../../utils/constants";
 
 
 
-const ProjectCard = ( {projectData} ) =>
+const ProjectCard = ({ projectData }) => {
-{
+  const [projectInfo, setProjectInfo] = useState(projectData);
-  
+  const [projectDetails, setProjectDetails] = useState(null);
-  const[projectInfo,setProjectInfo] = useState(projectData)
-  const navigate = useNavigate()
-  const {projects_Details, loading} = useProjectDetails( projectData.id )
   const [showModal, setShowModal] = useState(false);
-  const ManageProject  = useHasUserPermission(MANAGE_PROJECT)
+  const navigate = useNavigate();
+  const ManageProject = useHasUserPermission(MANAGE_PROJECT);
+
+  const handleShow = async () => {
+    try {
+      const response = await ProjectRepository.getProjectDetails(projectInfo.id);
+      setProjectDetails(response.data);
+      setShowModal(true);
+    } catch (error) {
+      showToast("Failed to load project details", "error");
+    }
+  };
 
-  const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal( false );
   
   const getProjectStatusName = (statusId) => {
@@ -54,71 +61,63 @@ const ProjectCard = ( {projectData} ) =>
     }
   };
 
-  const handleViewProject = (e) => {
+  const handleViewProject = () => {
-    navigate(`/projects/${projectData.id}`)
+    navigate(`/projects/${projectData.id}`);
   };
 
 
-  
+  const handleFormSubmit = (updatedProject) => {
-  const handleFormSubmit = ( updatedProject ) =>
+    if (projectInfo?.id) {
-    {
+      ProjectRepository.updateProject(projectInfo.id, updatedProject)
-           if ( projectInfo?.id )
+        .then((response) => {
-              {
-                   ProjectRepository.updateProject(projectInfo.id,updatedProject).then( ( response ) =>
-                   { 
           const updatedProjectData = {
             ...projectInfo,
             ...response.data,
-                       building:projects_Details.building, 
+            building: projectDetails?.building,
           };
-                     setProjectInfo( updatedProject )
+
-                     if ( getCachedData( `projectinfo-${ projectInfo.id }` ) )
+          setProjectInfo(updatedProject);
-                     {
+
+          if (getCachedData(`projectinfo-${projectInfo.id}`)) {
             cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData);
-                       
           }
-                     const projects_list = getCachedData( "projectslist" );
-                     if ( projects_list )
-                     {  
-                      const updatedProjectsList = projects_list.map(project => 
-                        project.id == projectInfo.id ? {
-                          ...project,       
-                           ...response.data,
-                           tenant:project.tenant
-                        } : project
-                       );
 
-                       cacheData("projectslist",updatedProjectsList)
+          const projects_list = getCachedData("projectslist");
+          if (projects_list) {
+            const updatedProjectsList = projects_list.map((project) =>
+              project.id === projectInfo.id
+                ? { ...project, ...response.data, tenant: project.tenant }
+                : project
+            );
+            cacheData("projectslist", updatedProjectsList);
           }
 
           showToast("Project updated successfully.", "success");
-                      
+          setShowModal(false);
-                       setShowModal(false)
         })
         .catch((error) => {
           showToast(error.message, "error");
-  
         });
     }
   };
 
-
   return (
     <>
-      
+      {showModal && projectDetails && (
         <div
-        className={`modal fade ${showModal ? 'show' : ''}`}
+          className="modal fade show"
           tabIndex="-1"
           role="dialog"
-        style={{ display: showModal ? 'block' : 'none' }}
+          style={{ display: "block" }}
-        aria-hidden={!showModal}
+          aria-hidden="false"
         >
           <ManageProjectInfo
-            project={projects_Details} 
+            project={projectDetails}
             handleSubmitForm={handleFormSubmit}
             onClose={handleClose}
-          ></ManageProjectInfo>
+          />
         </div>
+      )}
 
       <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
         <div className="card cursor-pointer">
@@ -135,7 +134,6 @@ const ProjectCard = ( {projectData} ) =>
                   <h5 className="mb-0">
                     <a
                       className="stretched-link text-heading"
-                  
                       onClick={handleViewProject}
                     >
                       {projectInfo.name}
@@ -147,7 +145,7 @@ const ProjectCard = ( {projectData} ) =>
                   </div>
                 </div>
               </div>
-            <div className={`ms-auto ${!ManageProject && 'd-none'}`}>
+              <div className={`ms-auto ${!ManageProject && "d-none"}`}>
                 <div className="dropdown z-2">
                   <button
                     type="button"
@@ -168,18 +166,13 @@ const ProjectCard = ( {projectData} ) =>
                         <span className="align-left">View details</span>
                       </a>
                     </li>
-                  <li    data-bs-toggle="modal"
+                    
-                          data-bs-target="#edit-project-modal"
+                    <li onClick={handleShow}>
-                          onClick={handleShow}>
+                      <a className="dropdown-item">
-                    <a
-                      className="dropdown-item"
-                    >
                         <i className="bx bx-pencil me-2"></i>
-                        <span className="align-left"
+                        <span className="align-left">Modify</span>
-                       >Modify</span>
                       </a>
                     </li>
-
                     <li>
                       <a className="dropdown-item">
                         <i className="bx bx-task me-2"></i>