From 95f444333883dfebeccc061b97ee34573ccf89d8 Mon Sep 17 00:00:00 2001 From: Vaibhav Surve Date: Wed, 9 Apr 2025 11:50:29 +0530 Subject: [PATCH 1/2] refactor ProjectCard component to improve state management and error handling --- src/components/Project/ProjectCard.jsx | 279 ++++++++++++------------- 1 file changed, 136 insertions(+), 143 deletions(-) diff --git a/src/components/Project/ProjectCard.jsx b/src/components/Project/ProjectCard.jsx index 39fae552..ba2c528a 100644 --- a/src/components/Project/ProjectCard.jsx +++ b/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[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 = () => setShowModal(true); +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 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 handleClose = () => setShowModal( false ); const getProjectStatusName = (statusId) => { @@ -54,154 +61,140 @@ 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 updatedProjectData = { - ...projectInfo, - ...response.data, - building:projects_Details.building, - }; - 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) - } - - showToast( "Project updated successfully.", "success" ); - - setShowModal(false) - }) - .catch((error) => { - showToast( error.message, "error" ); - - }); - } - }; + const handleFormSubmit = (updatedProject) => { + if (projectInfo?.id) { + ProjectRepository.updateProject(projectInfo.id, updatedProject) + .then((response) => { + const updatedProjectData = { + ...projectInfo, + ...response.data, + building: projectDetails?.building, + }; + 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); + } + + showToast("Project updated successfully.", "success"); + setShowModal(false); + }) + .catch((error) => { + showToast(error.message, "error"); + }); + } + }; return ( <> - -
- + -
+ /> + + )} -
-
-
-
-
-
- +
+
+
+
+
+
+ +
+
+
+ + {projectInfo.name} + +
+
+ Client: + {projectInfo.contactPerson} +
+
-
-
- +
-
- Client: - {projectInfo.contactPerson} + + +
-
-
-
-
-
-

- Start Date: - {projectInfo.startDate - ? moment(projectInfo.startDate).format("DD-MMM-YYYY") - : "NA"} -

-

- Deadline: +

+
+
+

+ Start Date: + {projectInfo.startDate + ? moment(projectInfo.startDate).format("DD-MMM-YYYY") + : "NA"} +

+

+ Deadline: {projectInfo.endDate ? moment(projectInfo.endDate).format("DD-MMM-YYYY") From 68442bdc7c20f2bd61883702da5d8299401a5522 Mon Sep 17 00:00:00 2001 From: Vaibhav Surve Date: Wed, 9 Apr 2025 11:50:44 +0530 Subject: [PATCH 2/2] comment out unused functions and dropdown in Sidebar component --- src/components/Layout/Sidebar.jsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx index 64ae2e4c..cc497719 100644 --- a/src/components/Layout/Sidebar.jsx +++ b/src/components/Layout/Sidebar.jsx @@ -4,17 +4,17 @@ import menuData from "../../data/menuData.json"; import {getCachedProfileData} from "../../slices/apiDataManager"; const Sidebar = () => { - const logineUser = getCachedProfileData() + // const logineUser = getCachedProfileData() const navigate = useNavigate() - const handleLogout = (e) => { - e.preventDefault(); - // logout(); - }; + // const handleLogout = (e) => { + // e.preventDefault(); + // // logout(); + // }; - const handleProfilePage = ()=>{ - console.log(profile?.employeeInfo?.id) - navigate(`/employee/${profile?.employeeInfo?.id}?for=account`) - } + // const handleProfilePage = ()=>{ + // console.log(profile?.employeeInfo?.id) + // navigate(`/employee/${profile?.employeeInfo?.id}?for=account`) + // } return (

); };