Employee Profile Page Not Updating without refresh page ,After Edit

This commit is contained in:
Kartik Sharma 2025-09-15 15:19:40 +05:30
parent d80fa27906
commit 9af7a5ceb2
3 changed files with 36 additions and 66 deletions

View File

@ -34,9 +34,13 @@ const EmpDashboard = ({ profile }) => {
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
<div className="d-flex">
<div className="avatar flex-shrink-0 me-3">
<span className="avatar-initial rounded bg-label-primary">
<span
className={`avatar-initial rounded ${project.removedDate ? "bg-label-warning" : "bg-label-success"
}`}
>
<i className="icon-base bx bx-buildings icon-lg"></i>
</span>
</div>
<div>
<h6 className="mb-0">{project.projectShortName}</h6>
@ -49,6 +53,14 @@ const EmpDashboard = ({ profile }) => {
<em>NA</em>
)}
</div>
{project.removedDate && (
<div className="mt-0 d-flex flex-column flex-sm-row justify-content-between">
<div className="label-secondary">
Unassigned:{" "}
{new Date(project.removedDate).toLocaleDateString()}
</div>
</div>
)}
</div>
</div>
<div>
@ -59,14 +71,7 @@ const EmpDashboard = ({ profile }) => {
</div>
{/* Dates */}
{project.removedDate && (
<div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
<div className="label-secondary">
Unassigned:{" "}
{new Date(project.removedDate).toLocaleDateString()}
</div>
</div>
)}
</div>
</li>
))}

View File

@ -11,6 +11,17 @@ import { queryClient } from "../layouts/AuthLayout";
// Query ---------------------------------------------------------------------------
export const useEmployee = (employeeId) => {
return useQuery({
queryKey: ["employeeProfile", employeeId],
queryFn: async () => {
const res = await EmployeeRepository.getEmployeeProfile(employeeId)
return res.data;
},
enabled:!!employeeId
});
};
export const useAllEmployees = (showInactive) => {
const {
data = [],
@ -197,6 +208,9 @@ export const useEmployeesNameByProject = (projectId) => {
// Mutation------------------------------------------------------------------
export const useUpdateEmployee = () => {
const selectedProject = useSelector(
(store) => store.localVariables.projectId
@ -211,6 +225,7 @@ export const useUpdateEmployee = () => {
const isAllEmployee = variables.IsAllEmployee;
// Cache invalidation
queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
// queryClient.invalidateQueries(['employeeProfile', id]);
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
@ -232,40 +247,6 @@ export const useUpdateEmployee = () => {
});
};
// export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
// const queryClient = useQueryClient();
// const selectedProject = useSelector((store)=>store.localVariables.projectId)
// return useMutation({
// mutationFn: (id) => {
// setemployeeLodaing(true);
// return EmployeeRepository.deleteEmployee(id);
// },
// onSuccess: () => {
// // queryClient.invalidateQueries( ['allEmployee',false]);
// queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
// queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
// showToast("Employee deleted successfully.", "success");
// setIsDeleteModalOpen(false);
// },
// onError: (error) => {
// const message =
// error.response?.data?.message ||
// error.message ||
// "An unexpected error occurred";
// showToast(message, "error");
// setIsDeleteModalOpen(false);
// },
// onSettled: () => {
// setemployeeLodaing(false);
// },
// });
// };
// Manage Role
export const useSuspendEmployee = ({
setIsDeleteModalOpen,
@ -353,4 +334,4 @@ export const useUpdateEmployeeRoles = ({
isError: mutation.isError,
error: mutation.error,
};
};
};

View File

@ -3,6 +3,7 @@ import { useSearchParams, useParams, useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import {
useEmployee,
useEmployeeProfile,
useEmployees,
useEmployeesByProject,
@ -28,38 +29,20 @@ const EmployeeProfile = () => {
const projectID = useSelector((store) => store.localVariables.projectId);
const { employeeId } = useParams();
// const {employee,loading} = useEmployeeProfile(employeeId)
const [loading, setLoading] = useState(true);
const [SearchParams] = useSearchParams();
const tab = SearchParams.get("for");
const [activePill, setActivePill] = useState(tab || "profile");
const [currentEmployee, setCurrentEmployee] = useState();
const [showModal, setShowModal] = useState(false);
const {data:currentEmployee,isLoading,isError,error} = useEmployee(employeeId)
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
};
const fetchEmployeeProfile = async (employeeID) => {
try {
const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
setCurrentEmployee(resp.data);
setLoading(false);
} catch (err) {
setLoading(false);
}
};
useEffect(() => {
if (employeeId) {
fetchEmployeeProfile(employeeId);
}
}, [employeeId]);
const navigate = useNavigate();
const renderContent = () => {
if (loading) return <div>Loading</div>;
if (isLoading) return <div>Loading</div>;
switch (activePill) {
case "profile": {
return (
@ -101,9 +84,10 @@ const EmployeeProfile = () => {
}
};
if (loading) {
if (isLoading) {
return <div>Loading...</div>;
}
if(isError) return <div >{error.message}</div>
return (
<>
<div className="container-fluid">
@ -138,4 +122,4 @@ const EmployeeProfile = () => {
);
};
export default EmployeeProfile;
export default EmployeeProfile;