Adding search functionality in Projectpage.

src/hooks/useProjects.js

@@ -20,14 +20,15 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = (pageSize, pageNumber) => {
+export const useProjects = (pageSize, pageNumber,searchString) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList", pageSize, pageNumber],
+    queryKey: ["ProjectsList", pageSize, pageNumber,searchString],
     queryFn: async () => {
       const response = await ProjectRepository.getProjectList(
         pageSize,
-        pageNumber
+        pageNumber,
+        searchString,
       );
       return response?.data;
     },

src/hooks/useServiceProject.jsx

@@ -8,13 +8,14 @@ import { ServiceProjectRepository } from "../repositories/ServiceProjectReposito
 import showToast from "../services/toastService";
 
 //#region Service Project
-export const useServiceProjects = (pageSize, pageNumber) => {
+export const useServiceProjects = (pageSize, pageNumber, searchString) => {
   return useQuery({
-    queryKey: ["serviceProjects", pageSize, pageNumber],
+    queryKey: ["serviceProjects", pageSize, pageNumber, searchString],
     queryFn: async () => {
       const response = await ServiceProjectRepository.GetServiceProjects(
         pageSize,
-        pageNumber
+        pageNumber,
+        searchString
       );
       return response.data;
     },

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -12,14 +12,17 @@ import ManageServiceProject from "../../components/ServiceProject/ManageServiceP
 import { SpinnerLoader } from "../../components/common/Loader";
 import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
 import ServiceProjectList from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectList";
+import { useDebounce } from "../../utils/appUtils";
 
-const ServiceProjectDisplay = ({ listView, selectedStatuses }) => {
+const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
   const [currentPage, setCurrentPage] = useState(1);
 
   const { manageServiceProject, setManageServiceProject } = useProjectContext();
+  const debouncedSearch = useDebounce(searchTerm, 500);
   const { data, isLoading, isError, error } = useServiceProjects(
     ITEMS_PER_PAGE,
-    currentPage
+    currentPage,
+    debouncedSearch
   );
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {

src/pages/project/ProjectPage.jsx

@@ -45,6 +45,8 @@ const ProjectPage = () => {
     return storedValue === 'true';
   });
   const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
+  const [currentPage, setCurrentPage] = useState(1);
+
 
   const [selectedStatuses, setSelectedStatuses] = useState(
     PROJECT_STATUS.map((s) => s.id)
@@ -198,7 +200,8 @@ const ProjectPage = () => {
         {coreProjects ? <ProjectsDisplay listView={listView}
           searchTerm={searchTerm}
           selectedStatuses={selectedStatuses}
-          handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
+          handleStatusChange={handleStatusChange} currentPage={currentPage}
+          setCurrentPage={setCurrentPage} /> : <ServiceProjectDisplay listView={listView} searchTerm={searchTerm}
             selectedStatuses={selectedStatuses} />}
       </div>
     </ProjectContext.Provider>

src/pages/project/ProjectsDisplay.jsx

@@ -10,6 +10,7 @@ import { useServiceProjects } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
 import usePagination from "../../hooks/usePagination";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
+import { useDebounce } from "../../utils/appUtils";
 
 const ProjectsDisplay = ({
   listView,
@@ -26,8 +27,8 @@ const ProjectsDisplay = ({
   } = useProjectContext();
 
   const [projectList, setProjectList] = useState([]);
-
+  const debouncedSearch = useDebounce(searchTerm, 500);
-  const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
+  const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1, debouncedSearch);
 
   const filteredProjects =
     data?.data?.filter((project) => {

src/repositories/ProjectRepository.jsx

@@ -2,8 +2,8 @@ import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
 
-  getProjectList: (pageSize, pageNumber) =>
+  getProjectList: (pageSize, pageNumber,searchString) =>
-    api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+    api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 

src/repositories/ServiceProjectRepository.jsx

@@ -4,9 +4,9 @@ import { api } from "../utils/axiosClient";
 export const ServiceProjectRepository = {
   //#region Service Project
   CreateServiceProject: (data) => api.post("/api/ServiceProject/create", data),
-  GetServiceProjects: (pageSize, pageNumber) =>
+  GetServiceProjects: (pageSize, pageNumber,searchString) =>
     api.get(
-      `/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}`
+      `/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
     ),
   GetServiceProject: (id) => api.get(`/api/ServiceProject/details/${id}`),
   UpdateServiceProject: (id, data) =>