updated projectList comp. immediately update rights

src/components/Project/ManageProjectInfo.jsx

@@ -18,8 +18,7 @@ const formatDate = (date) => {
 };
 const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
 {
-  debugger
+ 
-
   const [CurrentProject,setCurrentProject] = useState()
   const [ isloading, setLoading ] = useState( false )
   
@@ -82,11 +81,7 @@ const ManageProjectInfo = ( {project,handleSubmitForm, onClose} ) =>
       setLoading( true )      
       handleSubmitForm( updatedProject )  
     };
-  
+
-  useEffect( () =>
-  {
-    return ()=>setLoading(false)
-  } )
   
 
   

src/hooks/useProfile.js

@@ -1,40 +1,46 @@
 import {useState,useEffect} from "react";
 import AuthRepository from "../repositories/AuthRepository";
 import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
+import {useSelector} from "react-redux";
 
-export const useProfile =()=>{
+export const useProfile = () =>
+{
+  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
+  
     const [profile, setProfile] = useState(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
   
    
-  
+  const fetchData = async () =>
+  {
+    try
+    {
+      setLoading( true )
+      let response = await AuthRepository.profile();
+      setProfile( response )
+      cacheProfileData( response )
+      setLoading( false );
+        
+    } catch ( error )
+    {
+      setLoading( false )
+      console.error( error );
+      setError( "Failed to fetch data." );
+    };
+  }
   
   
   useEffect( () => {
-      
+   
-    const fetchData = async () => {
+    if (!loggedUser )
-      const profile_cache = getCachedProfileData()
+    {
-     
+    fetchData() 
-      // if (!profile_cache) {
+    } else
-        setLoading(true)   
+    {
-        AuthRepository.profile()
+      setProfile(loggedUser)
-        .then((response) => {
+    }
-          setProfile(response)
+    
-          cacheProfileData(response)
-          setLoading(false);
-        })
-        .catch((error) => {
-          setLoading(false)
-          console.error(error);
-          setError("Failed to fetch data.");
-        });
-      
-      // } else {
-      //  setProfile(profile_cache);
-      // }
-    };
-         fetchData()
      },[])
   
     return  { profile,loading,error}

src/pages/authentication/LoginPage.jsx

@@ -25,7 +25,9 @@ const LoginPage = () => {
     }));
   };
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async ( e ) =>
+  {
+    
     e.preventDefault();
     setLoading(true);
 
@@ -37,7 +39,7 @@ const LoginPage = () => {
 
       const response = await AuthRepository.login(data);
       localStorage.setItem("jwtToken", response.data.token);
-      localStorage.setItem("refreshToken", response.data.refreshToken);
+      localStorage.setItem( "refreshToken", response.data.refreshToken );
       setLoading(false);
       navigate("/dashboard");
     } catch (err) {

src/pages/employee/EmployeeList.jsx

@@ -4,9 +4,7 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import ManageEmp from "../../components/Employee/ManageRole";
-import {useEmployeesAllOrByProjectId,useAllEmployees} from "../../hooks/useEmployees";
+import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees";
-import {useDispatch, useSelector} from "react-redux";
-import {setProjectId} from "../../slices/localVariablesSlice";
 import {  useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import {hasUserPermission} from "../../utils/authUtils";
@@ -17,11 +15,10 @@ const EmployeeList = () =>
   
   const {profile:loginUser}= useProfile()
   const [selectedProject, setSelectedProject] = useState(""); 
-  const [ projectsList, setProjectsList ] = useState( [] );
   const {projects, loading: projectLoading} = useProjects()
 
   const {employees, loading,setLoading, error} = useEmployeesAllOrByProjectId( selectedProject );
-  const dispatch = useDispatch()
+  const [ projectsList, setProjectsList ] = useState(projects ||  [] );
  
   const [employeeList,setEmployeeList] = useState([])
   const [modelConfig, setModelConfig] = useState();
@@ -48,19 +45,18 @@ const EmployeeList = () =>
     setFilteredData(results);
   };
 
-  useEffect(() => {
+  // useEffect(() => {
-    if ( loginUser && projects )
+  //   if ( loginUser && projects )
-    { 
+  //   { 
-      const filteredProjects = projects.filter((project) =>
+  //     const filteredProjects = projects.filter((project) =>
-        loginUser?.projects?.map(Number).includes(project.id)
+  //       loginUser?.projects?.map(Number).includes(project.id)
-      );
+  //     );
-      setProjectsList(filteredProjects);
+  //     setProjectsList(filteredProjects);
-    }
+  //   }
-  }, [ loginUser, projects ] );
+  // }, [ loginUser, projects ] );
-
-  
 
   
+ 
   useEffect(() => {
     setCurrentPage( 1 )                                        
  
@@ -72,8 +68,7 @@ const EmployeeList = () =>
   }, [loading, employees, selectedProject]);
   
 
-  const displayData = searchText ? filteredData :employeeList
+  const displayData = searchText ? filteredData : employeeList
- 
 
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -160,7 +155,7 @@ const EmployeeList = () =>
                           ) : (
                          <>
                                 <option value="">All Employees</option>
-                                {Array.isArray(projectsList) && projectsList.map((item) => (
+                                {Array.isArray(projects) && projects.map((item) => (
                                   <option key={item.id} value={item.id}>
                                              {item.name}
                                   </option>

src/pages/project/ProjectList.jsx

@@ -5,24 +5,22 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import { useProjects } from "../../hooks/useProjects";
 import { useDispatch } from "react-redux";
-import { changeMaster } from "../../slices/localVariablesSlice";
 import showToast from "../../services/toastService";
-import {
+import {  getCachedData,  cacheData} from "../../slices/apiDataManager";
-  getCachedData,  cacheData
-} from "../../slices/apiDataManager";
 import {useHasUserPermission} from "../../hooks/useHasUserPermission"
 import { useProfile } from "../../hooks/useProfile";
 import {MANAGE_PROJECT} from "../../utils/constants";
 
 const ProjectList = () =>
 {
+
   const {profile: loginUser} = useProfile();
   const [showModal, setShowModal] = useState(false);
-  
+  const {projects, loading, error, refetch} = useProjects();
-  const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT)
-  const { projects, loading, error, refetch } = useProjects();
   const [refresh, setRefresh] = useState(false);
-  const [projectList, setProjectList] = useState([]);
+  const [ projectList, setProjectList ] = useState( [] );
+  const HasManageProjectPermission = useHasUserPermission( MANAGE_PROJECT )
+  const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(5);
@@ -34,22 +32,31 @@ const ProjectList = () =>
 
 
   useEffect(() => {
-    if (projects && projects.length > 0) {
+    setProjectList( projects )
-      setProjectList(
+    
-        projects?.filter((project) =>
+  }, [ projects, loginUser?.projects, loading ] );
-          loginUser?.projects?.map(Number).includes(project.id)
+
-        )
+  useEffect(() => {
-      );
+    if (loginUser) {
-    }
+      setHasManageProject(HasManageProjectPermission); 
-  }, [projects, loginUser?.projects, loading]);
+    } else {
+      setHasManageProject(false);     }
+  }, [loginUser, HasManageProjectPermission]);
+  
+
 
   const handleSubmitForm = (newProject) => {
     ProjectRepository.manageProject(newProject)
-      .then((response) => {
+      .then( ( response ) =>
-        const cachedProjects_list = getCachedData("projectslist") || [];
+      {
-        const updated_Projects_list = [...cachedProjects_list, response];
+       
+        const cachedProjects_list = getCachedData( "projectslist" ) || [];
+        
+        const updated_Projects_list = [ ...cachedProjects_list, response.data ];
+        
         cacheData("projectslist", updated_Projects_list);
-        setProjectList(updated_Projects_list);
+        setProjectList((prevProjectList) => [...prevProjectList, response.data]);
+
         showToast("Project Created successfully.", "success");
         setShowModal(false)
       })
@@ -112,7 +119,7 @@ const ProjectList = () =>
             <button
               type="button"
               className={`btn btn-sm btn-primary ${
-                HasManageProjectPermission
+                HasManageProject
                   ? ""
                   : "d-none"
               }`}
@@ -197,7 +204,7 @@ const ProjectList = () =>
                       </li>
                     </ul>
                   </nav>
-                )}
+            )}
       </div>
     </>
   );