optimized to prevented for maximum deep rendering

This commit is contained in:
Pramod Mahajan 2025-07-08 13:30:11 +05:30
parent ce37d5f447
commit 2c4ad2ba4a

View File

@ -25,12 +25,13 @@ const ProjectList = () => {
const { profile: loginUser } = useProfile(); const { profile: loginUser } = useProfile();
const [listView, setListView] = useState(false); const [listView, setListView] = useState(false);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const { projects, loading, error, refetch } = useProjects(); const { projects, loading, error, refetch } = useProjects();
const [projectList, setProjectList] = useState([]); const [projectList, setProjectList] = useState([]);
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT); const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
const [HasManageProject, setHasManageProject] = useState( const [HasManageProject, setHasManageProject] = useState(HasManageProjectPermission);
HasManageProjectPermission
);
const { mutate: createProject } = useCreateProject({ const { mutate: createProject } = useCreateProject({
onSuccessCallback: () => { onSuccessCallback: () => {
setShowModal(false); setShowModal(false);
@ -62,32 +63,32 @@ const ProjectList = () => {
.filter((statusId) => grouped[statusId]) .filter((statusId) => grouped[statusId])
.flatMap((statusId) => .flatMap((statusId) =>
grouped[statusId].sort((a, b) => grouped[statusId].sort((a, b) =>
a.name.toLowerCase()?.localeCompare(b.name.toLowerCase()) a.name.toLowerCase().localeCompare(b.name.toLowerCase())
) )
); );
setProjectList(sortedGrouped);
setProjectList((prev) => {
const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
return isSame ? prev : sortedGrouped;
});
} }
}; };
useEffect(() => { useEffect(() => {
if (!loading && projects) {
sortingProject(projects); sortingProject(projects);
}, [projects, loginUser?.projects, loading]); }
}, [projects, loading, selectedStatuses]); // Include selectedStatuses if it changes filtering
useEffect(() => { useEffect(() => {
if (loginUser) { setHasManageProject(loginUser ? HasManageProjectPermission : false);
setHasManageProject(HasManageProjectPermission);
} else {
setHasManageProject(false);
}
}, [loginUser, HasManageProjectPermission]); }, [loginUser, HasManageProjectPermission]);
const handleSubmitForm = (newProject, setLoading, reset) => {
setLoading(true);
const handleSubmitForm = (newProject, setloading, reset) => {
setloading(true);
createProject(newProject, { createProject(newProject, {
onSettled: () => { onSettled: () => {
setloading(false); setLoading(false);
reset(); reset();
}, },
}); });
@ -114,10 +115,14 @@ const ProjectList = () => {
return matchesStatus && matchesSearch; return matchesStatus && matchesSearch;
}); });
const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
const totalPages = Math.ceil( filteredProjects.length / ITEMS_PER_PAGE ); const {
currentItems,
const {currentItems,currentPage,paginate,setCurrentPage} = usePagination(filteredProjects, ITEMS_PER_PAGE) currentPage,
paginate,
setCurrentPage,
} = usePagination(filteredProjects, ITEMS_PER_PAGE);
useEffect(() => { useEffect(() => {
const tooltipTriggerList = Array.from( const tooltipTriggerList = Array.from(
@ -126,8 +131,6 @@ const ProjectList = () => {
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el)); tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []); }, []);
return ( return (
<> <>