admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor ProjectCard component to improve state management and error handling

Browse Source
This commit is contained in:
Vaibhav Surve 2025-04-09 11:50:29 +05:30
parent 6a6f0356bc
commit 95f4443338
1 changed files with 136 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Project/ProjectCard.jsx
View File

@ -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 [showModal, setShowModal] = useState(false);
const navigate = useNavigate();
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
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 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) => {
navigate(`/projects/${projectData.id}`)
const handleViewProject = () => {
navigate(`/projects/${projectData.id}`);
};
const handleFormSubmit = ( updatedProject ) =>
{
if ( projectInfo?.id )
{
ProjectRepository.updateProject(projectInfo.id,updatedProject).then( ( response ) =>
{
const handleFormSubmit = (updatedProject) => {
if (projectInfo?.id) {
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 }` ) )
{
cacheData( `projectinfo-${ projectInfo.id }`, updatedProjectData );
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
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)
cacheData("projectslist", updatedProjectsList);
}
showToast( "Project updated successfully.", "success" );
setShowModal(false)
showToast("Project updated successfully.", "success");
setShowModal(false);
})
.catch((error) => {
showToast( error.message, "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' }}
aria-hidden={!showModal}
style={{ display: "block" }}
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,20 +166,15 @@ const ProjectCard = ( {projectData} ) =>
<span className="align-left">View details</span>
</a>
</li>
<li data-bs-toggle="modal"
data-bs-target="#edit-project-modal"
onClick={handleShow}>
<a
className="dropdown-item"
>
<li onClick={handleShow}>
<a className="dropdown-item">
<i className="bx bx-pencil me-2"></i>
<span className="align-left"
>Modify</span>
<span className="align-left">Modify</span>
</a>
</li>
<li>
<a className="dropdown-item" >
<a className="dropdown-item">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>