Add search filters

src/components/shared/ResourceList/ResourceList.tsx

@@ -11,11 +11,13 @@ interface Props {
   onCreateClick?: () => void;
   children?: ReactNode;
   itemsLength?: number;
+  withSearch?: boolean;
 }
 
 export default function ResourceList({
   title,
   children,
+  withSearch = false,
   onCreateClick,
 }: Props) {
   const isTeacher = useIsTeacher();
@@ -29,7 +31,7 @@ export default function ResourceList({
         </div>
 
         <div className="flex gap-4">
-          <SearchBar />
+          {withSearch && <SearchBar />}
 
           {!isTeacher && onCreateClick && (
             <div>

src/interfaces/group.ts

@@ -13,3 +13,8 @@ export interface IGroupCreate {
   subjectId: number;
   teacherId: number;
 }
+
+export interface IGroupFilters {
+  search?: string | null;
+  teacherId?: number | null;
+}

src/interfaces/lecture.ts

@@ -17,3 +17,8 @@ export interface ILectureCreate {
   image?: string | null;
   topicId: number;
 }
+
+export interface ILectureFilters {
+  search?: string | null;
+  topicId?: number | null;
+}

src/interfaces/subject.ts

@@ -10,3 +10,7 @@ export interface ISubjectCreate {
   title: string;
   image?: string;
 }
+
+export interface ISubjectFilters {
+  search?: string | null;
+}

src/interfaces/task.ts

@@ -35,3 +35,8 @@ export interface ITaskUserAnswer {
   createdAt: string;
   updatedAt: string;
 }
+
+export interface ITaskFilters {
+  search?: string | null;
+  topicId?: number | null;
+}

src/pages/groups/GroupsPage.tsx

@@ -1,8 +1,13 @@
 import { useGroupsQuery } from "@/queries/groups";
 import GroupsList from "./components/GroupsList";
+import { useSearchParams } from "react-router-dom";
 
 function GroupsPage() {
-  const { data, isLoading } = useGroupsQuery();
+  const [searchParams] = useSearchParams();
+
+  const { data, isLoading } = useGroupsQuery({
+    search: searchParams.get("search"),
+  });
 
   return <GroupsList groups={data || []} isLoading={isLoading} />;
 }

src/pages/groups/components/GroupsList.tsx

@@ -26,6 +26,7 @@ function GroupsList({ groups, isLoading }: Props) {
       title="Группы"
       onCreateClick={() => navigate(ROUTES.GROUP)}
       itemsLength={groups.length}
+      withSearch
     >
       {isLoading && (
         <div className="p-40">

src/pages/lectures/LecturesPage.tsx

@@ -1,13 +1,17 @@
 import ResourceList from "@/components/shared/ResourceList/ResourceList";
 import { ROUTES } from "@/constants/routes";
 import { useLecturesQuery } from "@/queries/lectures";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 
 import LecturesTable from "./LecturesTable";
 import { Spinner } from "@nextui-org/react";
 
 function LecturesPage() {
-  const { data: lectures, isLoading } = useLecturesQuery();
+  const [seachParams] = useSearchParams();
+
+  const { data: lectures, isLoading } = useLecturesQuery({
+    search: seachParams.get("search"),
+  });
 
   const navigate = useNavigate();
 
@@ -16,6 +20,7 @@ function LecturesPage() {
       title="Лекции"
       onCreateClick={() => navigate(ROUTES.LECTURE)}
       itemsLength={lectures?.length}
+      withSearch
     >
       {isLoading && (
         <div className="p-40">

src/pages/subjects/SubjectsPage.tsx

@@ -1,7 +1,7 @@
 import ResourceList from "@/components/shared/ResourceList/ResourceList";
 import { ROUTES } from "@/constants/routes";
 import { useSubjectsQuery } from "@/queries/subjects";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   Table,
   TableHeader,
@@ -14,7 +14,11 @@ import {
 import { columns, renderCell } from "./columns";
 
 function SubjectsPage() {
-  const { data: subjects, isLoading } = useSubjectsQuery({});
+  const [searchParams] = useSearchParams();
+
+  const { data: subjects, isLoading } = useSubjectsQuery({
+    filters: { search: searchParams.get("search") },
+  });
 
   const navigate = useNavigate();
 
@@ -23,6 +27,7 @@ function SubjectsPage() {
       title="Предметы"
       onCreateClick={() => navigate(ROUTES.SUBJECT)}
       itemsLength={subjects?.length}
+      withSearch
     >
       {isLoading && (
         <div className="p-40">

src/pages/tasks/TasksPage.tsx

@@ -3,11 +3,15 @@ import { ROUTES } from "@/constants/routes";
 import { useTasksQuery } from "@/queries/tasks";
 import { Spinner } from "@nextui-org/react";
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import TasksTable from "./TasksTable";
 
 function TasksPage() {
-  const { data: tasks, isPending } = useTasksQuery();
+  const [searchParams] = useSearchParams();
+
+  const { data: tasks, isPending } = useTasksQuery({
+    search: searchParams.get("search"),
+  });
 
   const navigate = useNavigate();
 
@@ -16,6 +20,7 @@ function TasksPage() {
       title="Задачи"
       onCreateClick={() => navigate(ROUTES.TASK)}
       itemsLength={tasks?.length}
+      withSearch
     >
       {isPending && (
         <div className="p-40">

src/pages/topics/TopicsPage.tsx

@@ -27,6 +27,7 @@ function TopicsPage() {
       title="Топики"
       onCreateClick={() => navigate(ROUTES.TOPIC)}
       itemsLength={topics?.length}
+      withSearch
     >
       {isLoading && (
         <div className="p-40">

src/queries/groups.ts

@@ -1,5 +1,5 @@
 import { QUERY_KEYS } from "@/constants/queryKeys";
-import { IGroup } from "@/interfaces/group";
+import { IGroup, IGroupFilters } from "@/interfaces/group";
 import {
   createGroup,
   getGroupDetails,
@@ -32,12 +32,11 @@ export const useGroupMutation = ({ onSuccess, onError, id }: MutationQuery) => {
   };
 };
 
-export const useGroupsQuery = (params?: { teacherId?: number }) => {
+export const useGroupsQuery = (filters?: IGroupFilters) => {
   const { data, isLoading } = useQuery({
-    queryFn: () => getGroups({ teacherId: params?.teacherId }),
-    queryKey: [QUERY_KEYS.GROUPS, params?.teacherId],
+    queryFn: () => getGroups(filters),
+    queryKey: [QUERY_KEYS.GROUPS, filters?.teacherId, filters?.search],
     refetchOnWindowFocus: false,
-    staleTime: 35 * 1000,
   });
 
   return {

src/queries/lectures.ts

@@ -1,5 +1,9 @@
 import { QUERY_KEYS } from "@/constants/queryKeys";
-import { ILecture, ILectureCreate } from "@/interfaces/lecture";
+import {
+  ILecture,
+  ILectureCreate,
+  ILectureFilters,
+} from "@/interfaces/lecture";
 import {
   createLecture,
   getLectureDetails,
@@ -9,10 +13,10 @@ import {
 } from "@/requests/lectures";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
-export const useLecturesQuery = () => {
+export const useLecturesQuery = (filters?: ILectureFilters) => {
   const { data, isLoading } = useQuery({
-    queryFn: () => getLectures(),
-    queryKey: [QUERY_KEYS.LECTURES],
+    queryFn: () => getLectures(filters),
+    queryKey: [QUERY_KEYS.LECTURES, filters?.search, filters?.topicId],
     refetchOnWindowFocus: false,
     staleTime: 30 * 1000,
   });

src/queries/subjects.ts

@@ -1,5 +1,9 @@
 import { QUERY_KEYS } from "../constants/queryKeys";
-import { ISubject, ISubjectCreate } from "../interfaces/subject";
+import {
+  ISubject,
+  ISubjectCreate,
+  ISubjectFilters,
+} from "../interfaces/subject";
 import {
   createSubject,
   getSubjectDetails,
@@ -10,16 +14,16 @@ import {
 import { useMutation, useQuery } from "@tanstack/react-query";
 
 interface QueryParams {
-  params?: any;
+  filters?: ISubjectFilters;
   enabled?: boolean;
 }
 
-export const useSubjectsQuery = ({ params, enabled }: QueryParams) => {
+export const useSubjectsQuery = ({ filters, enabled }: QueryParams) => {
   const { data, isLoading, isFetching, isSuccess, isError, refetch } = useQuery<
     ISubject[]
   >({
-    queryKey: [QUERY_KEYS.SUBJECTS, params?.search],
-    queryFn: () => getSubjects(params?.search || ""),
+    queryKey: [QUERY_KEYS.SUBJECTS, filters?.search],
+    queryFn: () => getSubjects(filters),
     refetchOnWindowFocus: false,
     enabled,
   });

src/queries/tasks.ts

@@ -1,5 +1,5 @@
 import { QUERY_KEYS } from "@/constants/queryKeys";
-import { ITask, ITaskCreate } from "@/interfaces/task";
+import { ITask, ITaskCreate, ITaskFilters } from "@/interfaces/task";
 import {
   createTask,
   getTaskDetails,
@@ -10,10 +10,10 @@ import {
 } from "@/requests/tasks";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
-export const useTasksQuery = () => {
+export const useTasksQuery = (filters?: ITaskFilters) => {
   const { data, isPending } = useQuery({
-    queryFn: getTasks,
-    queryKey: [QUERY_KEYS.TASKS],
+    queryFn: () => getTasks(filters),
+    queryKey: [QUERY_KEYS.TASKS, filters?.search, filters?.topicId],
   });
 
   return {

src/requests/groups.ts

@@ -1,13 +1,13 @@
 import { request } from "./request";
 import { API_GROUP_STUDENTS, API_GROUPS } from "../constants/apiConstants";
-import { IGroup, IGroupCreate } from "../interfaces/group";
+import { IGroup, IGroupCreate, IGroupFilters } from "../interfaces/group";
 import { IUser } from "@/interfaces/user";
 
-export async function getGroups(params?: {
-  teacherId?: number;
-}): Promise<IGroup[]> {
+export async function getGroups(filters?: IGroupFilters): Promise<IGroup[]> {
   return request
-    .get(API_GROUPS, { params: { teacherId: params?.teacherId } })
+    .get(API_GROUPS, {
+      params: { teacherId: filters?.teacherId, search: filters?.search },
+    })
     .then(({ data }) => data);
 }
 

src/requests/lectures.ts

@@ -1,9 +1,22 @@
-import { ILecture, ILectureCreate } from "../interfaces/lecture";
+import {
+  ILecture,
+  ILectureCreate,
+  ILectureFilters,
+} from "../interfaces/lecture";
 import { API_LECTURES } from "../constants/apiConstants";
 import { request } from "./request";
 
-export async function getLectures(): Promise<ILecture[]> {
-  return request.get(API_LECTURES).then(({ data }) => data);
+export async function getLectures(
+  filters?: ILectureFilters
+): Promise<ILecture[]> {
+  return request
+    .get(API_LECTURES, {
+      params: {
+        ...(filters?.search && { search: filters.search }),
+        ...(filters?.topicId && { topicId: filters.topicId }),
+      },
+    })
+    .then(({ data }) => data);
 }
 
 export async function getLectureDetails(id: number): Promise<ILecture> {

src/requests/subjects.ts

@@ -1,12 +1,18 @@
 import { request } from "./request";
 import { API_SUBJECTS } from "../constants/apiConstants";
-import { ISubject, ISubjectCreate } from "../interfaces/subject";
+import {
+  ISubject,
+  ISubjectCreate,
+  ISubjectFilters,
+} from "../interfaces/subject";
 
-export async function getSubjects(search?: string): Promise<ISubject[]> {
+export async function getSubjects(
+  filters?: ISubjectFilters
+): Promise<ISubject[]> {
   return request
     .get(API_SUBJECTS, {
       params: {
-        title: search,
+        ...(filters?.search && { search: filters.search }),
       },
     })
     .then(({ data }) => data);

src/requests/tasks.ts

@@ -1,9 +1,21 @@
 import { API_GET_USER_ANSWERS, API_TASKS } from "@/constants/apiConstants";
-import { ITask, ITaskCreate, ITaskUserAnswer } from "@/interfaces/task";
+import {
+  ITask,
+  ITaskCreate,
+  ITaskFilters,
+  ITaskUserAnswer,
+} from "@/interfaces/task";
 import { request } from "./request";
 
-export async function getTasks(): Promise<ITask[]> {
-  return request.get(API_TASKS).then(({ data }) => data);
+export async function getTasks(filters?: ITaskFilters): Promise<ITask[]> {
+  return request
+    .get(API_TASKS, {
+      params: {
+        ...(filters?.search && { search: filters.search }),
+        ...(filters?.topicId && { topicId: filters.topicId }),
+      },
+    })
+    .then(({ data }) => data);
 }
 
 export async function getTaskDetails(id: number): Promise<ITask> {