marco.pms.web/src/pages/Activities/TaskPlannng.jsx

135 lines
3.9 KiB
JavaScript

import React, { useState, useEffect } from "react";
import "../../components/Project/ProjectInfra.css";
import ProjectRepository from "../../repositories/ProjectRepository";
import Breadcrumb from "../../components/common/Breadcrumb";
import InfraPlanning from "../../components/Activities/InfraPlanning";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import { useProfile } from "../../hooks/useProfile";
import { useDispatch, useSelector } from "react-redux";
import { useProjectDetails, useProjects } from "../../hooks/useProjects";
import { setProjectId } from "../../slices/localVariablesSlice";
import showToast from "../../services/toastService";
const TaskPlannng = () => {
const { profile } = useProfile();
const {
projects,
loading: project_listLoader,
error: projects_error,
} = useProjects();
const dispatch = useDispatch();
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const [project, setProject] = useState(null);
const [projectDetails, setProjectDetails] = useState(null);
const [activities, setActivities] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const fetchActivities = async () => {
try {
const activities_cache = getCachedData("activitiesMaster");
if (!activities_cache) {
ActivityeRepository.getActivities()
.then((response) => {
setActivities(response.data);
cacheData("activitiesMaster", response.data);
})
.catch((error) => {
setError("Failed to fetch data.");
});
} else {
setActivities(activities_cache);
}
} catch (err) {
setError("Failed to fetch activities.");
} finally {
// setLoading(false);
}
};
const fetchData = async () => {
try {
const project_cache = getCachedData("projectInfo");
if (!project_cache || !project_cache.projectId == selectedProject) {
ProjectRepository.getProjectByprojectId(selectedProject)
.then((response) => {
setProjectDetails(response);
setProject(response);
cacheData("projectInfo", {
data: response.data,
projectId: selectedProject,
});
})
.catch((error) => {
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast( message, "error" );
});
} else {
setProjectDetails(project_cache);
}
} catch (err) {
setError( "Failed to fetch data." );
const message =
error.response?.data?.message ||
error.message ||
"An unexpected error occurred";
showToast( message, "error" );
} finally {
setLoading(false);
}
};
const [activePill, setActivePill] = useState("profile");
const handlePillClick = (pillKey) => {
setActivePill(pillKey);
};
const handleDataChange = (data) => {
fetchData();
};
useEffect(() => {
if (projects.length != 0 && selectedProject) {
fetchData();
fetchActivities();
}
}, [selectedProject]);
return (
<>
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Daily Task Planning" }
]}
></Breadcrumb>
{project_listLoader && <p>Loading..</p>}
{!project_listLoader && projects.length === 0 && (
<p>No Project Found.</p>
)}
{!project_listLoader && projects.length > 0 && (
<InfraPlanning
data={projectDetails}
activityMaster={activities}
onDataChange={handleDataChange}
/>
)}
</div>
</>
);
};
export default TaskPlannng;