Add users and sections filters

src/interfaces/section.ts

@@ -13,3 +13,8 @@ export interface ISectionCreate {
   title: string;
   subjectId: number;
 }
+
+export interface ISectionFilters {
+  search?: string | null;
+  subjectId?: number | null;
+}

src/interfaces/user.ts

@@ -44,3 +44,9 @@ export interface IUserProgress {
   completedLectures: ILecture[];
   completedTasks: ITask[];
 }
+
+export interface IUserFilters {
+  search?: string | null;
+  groupId?: number | null;
+  role?: Role | null;
+}

src/pages/sections/SectionsPage.tsx

@@ -1,7 +1,7 @@
 import ResourceList from "@/components/shared/ResourceList/ResourceList";
 import { ROUTES } from "@/constants/routes";
 import { useSectionsQuery } from "@/queries/sections";
-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 SectionsPage() {
-  const { data: sections, isPending } = useSectionsQuery({});
+  const [searchParams] = useSearchParams();
+
+  const { data: sections, isPending } = useSectionsQuery({
+    filters: { search: searchParams.get("search") },
+  });
 
   const navigate = useNavigate();
 
@@ -23,6 +27,7 @@ function SectionsPage() {
       title="Разделы"
       onCreateClick={() => navigate(ROUTES.SECTION)}
       itemsLength={sections?.length}
+      withSearch
     >
       {isPending && (
         <div className="p-40">

src/pages/users/UsersPage.tsx

@@ -2,19 +2,27 @@ import ResourceList from "@/components/shared/ResourceList/ResourceList";
 import { ROUTES } from "@/constants/routes";
 import { useUsersQuery } from "@/queries/users";
 import { Spinner } from "@nextui-org/react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import UsersTable from "./UsersTable";
+import { Role } from "@/interfaces/auth";
 
 function UsersPage() {
   const navigate = useNavigate();
 
-  const { data: users, isLoading } = useUsersQuery();
+  const [searchParams] = useSearchParams();
+
+  const { data: users, isLoading } = useUsersQuery({
+    search: searchParams.get("search"),
+    groupId: Number(searchParams.get("groupId")),
+    role: searchParams.get("role") as Role,
+  });
 
   return (
     <ResourceList
       title="Пользователи"
       onCreateClick={() => navigate(ROUTES.USER)}
       itemsLength={users?.length}
+      withSearch
     >
       {isLoading && (
         <div className="p-40">

src/queries/sections.ts

@@ -1,5 +1,9 @@
 import { QUERY_KEYS } from "@/constants/queryKeys";
-import { ISection, ISectionCreate } from "@/interfaces/section";
+import {
+  ISection,
+  ISectionCreate,
+  ISectionFilters,
+} from "@/interfaces/section";
 import {
   createSection,
   getSectionDetails,
@@ -10,14 +14,14 @@ import {
 import { useMutation, useQuery } from "@tanstack/react-query";
 
 interface QueryParams {
-  params?: any;
+  filters?: ISectionFilters;
   enabled?: boolean;
 }
 
-export const useSectionsQuery = ({ params, enabled }: QueryParams) => {
+export const useSectionsQuery = ({ filters, enabled }: QueryParams) => {
   const { data, isPending, refetch } = useQuery({
-    queryFn: () => getSections(params?.search || ""),
-    queryKey: [QUERY_KEYS.SECTIONS, params?.title],
+    queryFn: () => getSections(filters),
+    queryKey: [QUERY_KEYS.SECTIONS, filters?.search, filters?.subjectId],
     refetchOnWindowFocus: false,
     enabled,
   });

src/queries/users.ts

@@ -1,7 +1,7 @@
 import { API_STUDENT_PROGRESS } from "@/constants/apiConstants";
 import { QUERY_KEYS } from "@/constants/queryKeys";
 import { Role } from "@/interfaces/auth";
-import { ICreateUser, IUser } from "@/interfaces/user";
+import { ICreateUser, IUser, IUserFilters } from "@/interfaces/user";
 import {
   createUser,
   deleteUser,
@@ -47,10 +47,15 @@ export const useUserDeletion = ({ onSuccess, onError }: MutationQuery) => {
   };
 };
 
-export const useUsersQuery = (params?: { role: Role }) => {
+export const useUsersQuery = (filters?: IUserFilters) => {
   const { data, isLoading } = useQuery({
-    queryFn: () => getUsers({ role: params?.role }),
-    queryKey: [QUERY_KEYS.USERS, params?.role],
+    queryFn: () => getUsers(filters),
+    queryKey: [
+      QUERY_KEYS.USERS,
+      filters?.role,
+      filters?.groupId,
+      filters?.search,
+    ],
   });
 
   return {

src/requests/sections.ts

@@ -1,12 +1,19 @@
-import { ISection, ISectionCreate } from "../interfaces/section";
+import {
+  ISection,
+  ISectionCreate,
+  ISectionFilters,
+} from "../interfaces/section";
 import { API_SECTIONS } from "../constants/apiConstants";
 import { request } from "./request";
 
-export async function getSections(search?: string): Promise<ISection[]> {
+export async function getSections(
+  filters?: ISectionFilters
+): Promise<ISection[]> {
   return request
     .get(API_SECTIONS, {
       params: {
-        title: search,
+        ...(filters?.search && { search: filters.search }),
+        ...(filters?.subjectId && { subjectId: filters.subjectId }),
       },
     })
     .then(({ data }) => data);

src/requests/users.ts

@@ -1,10 +1,22 @@
 import { API_STUDENT_PROGRESS, API_USERS } from "@/constants/apiConstants";
-import { ICreateUser, IUser, IUserProgress } from "@/interfaces/user";
+import {
+  ICreateUser,
+  IUser,
+  IUserFilters,
+  IUserProgress,
+} from "@/interfaces/user";
 import { request } from "./request";
-import { Role } from "@/interfaces/auth";
 
-export async function getUsers(params?: { role?: Role }): Promise<IUser[]> {
-  return request.get(API_USERS, { params }).then(({ data }) => data);
+export async function getUsers(filters?: IUserFilters): Promise<IUser[]> {
+  return request
+    .get(API_USERS, {
+      params: {
+        ...(filters?.groupId && { groupId: filters.groupId }),
+        ...(filters?.role && { role: filters.role }),
+        ...(filters?.search && { search: filters.search }),
+      },
+    })
+    .then(({ data }) => data);
 }
 
 export async function getUserDetails(id: number): Promise<IUser> {