Call API on Header for project selection.

src/components/Layout/Header.jsx

@@ -10,6 +10,7 @@ import Avatar from "../../components/common/Avatar";
 import { useChangePassword } from "../Context/ChangePasswordContext";
 import { useProjects } from "../../hooks/useProjects";
 import { useEffect, useState } from "react";
+import { useProjectName } from "../../hooks/useProjects";
 
 const Header = () => {
   const { profile } = useProfile();
@@ -62,13 +63,14 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
-  const { projects, loading: projectLoading } = useProjects();
+  // const { projects, loading: projectLoading } = useProjects();
+  const { projectNames, loading:  projectLoading } = useProjectName();
 
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
 
-  const selectedProjectName = projects?.find(
+  const selectedProjectName = projectNames?.find(
     (p) => p?.id === selectedProject
   )?.name;
 
@@ -83,11 +85,11 @@ const Header = () => {
 
   const { openChangePassword } = useChangePassword();
   useEffect(() => {
-    if (projects && selectedProject !== " ") {
-      dispatch(setProjectId(projects[0]?.id));
+    if (projectNames && selectedProject !== " ") {
+      dispatch(setProjectId(projectNames[0]?.id));
     }
-  }, [projects, ]);
-  const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
+  }, [projectNames, ]);
+  const isProjectPath = /^\/projectNames\/[a-f0-9-]{36}$/.test(location.pathname);
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -105,7 +107,7 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
-       {projects?.length > 0 && ( <div className=" align-items-center">
+       {projectNames?.length > 0 && ( <div className=" align-items-center">
           {!isProjectPath && (
             <>
               <i
@@ -114,7 +116,7 @@ const Header = () => {
               ></i>
               <div className="btn-group">
                 <button
-                  className={`btn btn-sm-sm btn-xl ${projects?.length > 1 && "dropdown-toggle" } px-1`}
+                  className={`btn btn-sm-sm btn-xl ${projectNames?.length > 1 && "dropdown-toggle" } px-1`}
                   type="button"
                   data-bs-toggle="dropdown"
                   aria-expanded="false"
@@ -122,8 +124,8 @@ const Header = () => {
                   {displayText}
                 </button>
             
-               {projects?.length > 1 && ( <ul className="dropdown-menu">
-                  {projects?.map((project) => (
+               {projectNames?.length > 1 && ( <ul className="dropdown-menu">
+                  {projectNames?.map((project) => (
                     <li key={project?.id}>
                       <button
                         className="dropdown-item"
@@ -182,7 +184,7 @@ const Header = () => {
                   </div>
                   <div className="dropdown-shortcuts-item col">
                     <a
-                      onClick={() => navigate(`/projects`)}
+                      onClick={() => navigate(`/projectNames`)}
                       className="text-heading text-truncate cursor-pointer"
                     >
                       <span className="dropdown-shortcuts-icon rounded-circle mb-3">

src/hooks/useProjects.js

@@ -176,3 +176,27 @@ export const useProjectsByEmployee = ( employeeId ) =>
   }
 };
 
+export const useProjectName = () => {
+  const [loading, setLoading] = useState(true);
+  const [projectNames, setProjectName] = useState([]);
+  const[Error,setError] = useState()
+
+  const fetchData = async () => {
+    try {
+        let response = await ProjectRepository.projectNameList();
+        console.log(response)
+        setProjectName(response.data);
+        cacheData("basicProjectNameList",response.data);
+        setLoading(false);     
+    } catch (err) {
+      setError("Failed to fetch data.");
+      setLoading(false);
+    }
+  };
+  useEffect(() => {  
+      fetchData();    
+  }, []);
+
+  return { projectNames, loading, Error };
+};
+

src/repositories/ProjectRepository.jsx

@@ -22,7 +22,8 @@ const ProjectRepository = {
   updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
   deleteProject: ( id ) => api.delete( `/projects/${ id }` ),
   getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ),
-  updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data)
+  updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data),
+  projectNameList:()=>api.get("/api/project/list/basic")
 };
 
 export const TasksRepository = {