Add search bar, topics search feature

package.json

@@ -32,6 +32,7 @@
     "dayjs": "^1.11.10",
     "framer-motion": "^11.1.7",
     "localforage": "^1.10.0",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lowlight": "^3.1.0",
     "match-sorter": "^6.3.3",

src/components/shared/CustomInput/CustomInput.tsx

@@ -2,18 +2,20 @@ import {
   FC,
   HTMLInputTypeAttribute,
   InputHTMLAttributes,
+  ReactNode,
   forwardRef,
 } from "react";
 import { Input } from "@nextui-org/react";
 import useIsTeacher from "@/hooks/useIsTeacher";
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
-  name: string;
+  name?: string;
   value?: string;
   type?: HTMLInputTypeAttribute;
   placeholder?: string;
   label?: string;
   errorMessage?: string;
+  startContent?: ReactNode;
   isViewOnly?: boolean;
   ignoreRole?: boolean;
   onChangeCallback?: (value: string) => void;
@@ -27,6 +29,7 @@ const CustomInput: FC<Props> = forwardRef<HTMLInputElement, Props>(
       label,
       type,
       errorMessage,
+      startContent,
       onChange,
       isViewOnly = false,
       ignoreRole = false,
@@ -38,6 +41,7 @@ const CustomInput: FC<Props> = forwardRef<HTMLInputElement, Props>(
     return (
       <Input
         classNames={{ inputWrapper: ["bg-bgPrimary"] }}
+        startContent={startContent}
         onChange={onChange}
         ref={ref}
         value={value}

src/components/shared/Icons.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from "react";
 import { CiCirclePlus } from "react-icons/ci";
 import { IoMdListBox } from "react-icons/io";
+import { IoSearchOutline } from "react-icons/io5";
 import { FaUserLarge } from "react-icons/fa6";
 import { MdOutlineGroup } from "react-icons/md";
 import { GoTasklist } from "react-icons/go";
@@ -17,4 +18,5 @@ export const Icons = {
   PRESENTATION_CHART: (props: Props) => (
     <HiMiniPresentationChartLine {...props} />
   ),
+  SEARCH: (props: Props) => <IoSearchOutline {...props} />,
 };

src/components/shared/ResourceList/ResourceList.tsx

@@ -4,8 +4,8 @@ import { Icons } from "../Icons";
 import Typography from "../Typography/Typography";
 import { Button } from "@nextui-org/react";
 
-import styles from "./ResourceList.module.scss";
 import useIsTeacher from "@/hooks/useIsTeacher";
+import SearchBar from "../SearchBar";
 interface Props {
   title: string;
   onCreateClick?: () => void;
@@ -21,24 +21,28 @@ export default function ResourceList({
   const isTeacher = useIsTeacher();
 
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.header}>
+    <div className="w-full min-h-sreen flex flex-col gap-4">
+      <div className="w-full h-[56px] p-4 flex justify-between items-center rounded-xl bg-bgSecondary">
         <div className="flex center">
           <Icons.LIST_BOX className="text-3xl mr-2" />
           <Typography>{title}</Typography>
         </div>
 
-        {!isTeacher && onCreateClick && (
-          <div className={styles.buttons}>
-            <Button
-              onClick={onCreateClick}
-              color="primary"
-              startContent={<Icons.PLUS className="text-lg" />}
-            >
-              Добавить
-            </Button>
-          </div>
-        )}
+        <div className="flex gap-4">
+          <SearchBar />
+
+          {!isTeacher && onCreateClick && (
+            <div>
+              <Button
+                onClick={onCreateClick}
+                color="primary"
+                startContent={<Icons.PLUS className="text-lg" />}
+              >
+                Добавить
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
 
       <div className="w-full">{children}</div>

src/components/shared/SearchBar.tsx

@@ -0,0 +1,28 @@
+import { useSearchParams } from "react-router-dom";
+import CustomInput from "./CustomInput/CustomInput";
+import { Icons } from "./Icons";
+import { debounce } from "lodash";
+import { ChangeEvent } from "react";
+
+export default function SearchBar() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const onSearchChange = debounce((e: ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+
+    if (!text.length) {
+      searchParams.delete("search");
+    } else {
+      searchParams.set("search", text);
+    }
+    setSearchParams(searchParams);
+  }, 500);
+
+  return (
+    <CustomInput
+      startContent={<Icons.SEARCH />}
+      placeholder="Поиск..."
+      onChange={onSearchChange}
+    />
+  );
+}

src/interfaces/topic.ts

@@ -17,3 +17,8 @@ export interface ITopicCreate {
 export interface IReorderTopicContent {
   topicContentIds: number[];
 }
+
+export interface ITopicFilters {
+  search?: string | null;
+  sectionId?: number;
+}

src/pages/topics/TopicsPage.tsx

@@ -1,7 +1,7 @@
 import ResourceList from "@/components/shared/ResourceList/ResourceList";
 import { ROUTES } from "@/constants/routes";
 import { useTopicsQuery } from "@/queries/topics";
-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 TopicsPage() {
-  const { data: topics, isLoading } = useTopicsQuery({});
+  const [searchParams] = useSearchParams();
+
+  const { data: topics, isLoading } = useTopicsQuery({
+    filters: { search: searchParams.get("search") },
+  });
 
   const navigate = useNavigate();
 
@@ -38,7 +42,7 @@ function TopicsPage() {
           </TableHeader>
           <TableBody
             items={topics || []}
-            emptyContent="Нет заявок."
+            emptyContent="Нет топиков."
             isLoading={isLoading}
           >
             {(topic) => (

src/queries/topics.ts

@@ -1,5 +1,10 @@
 import { QUERY_KEYS } from "@/constants/queryKeys";
-import { IReorderTopicContent, ITopic, ITopicCreate } from "@/interfaces/topic";
+import {
+  IReorderTopicContent,
+  ITopic,
+  ITopicCreate,
+  ITopicFilters,
+} from "@/interfaces/topic";
 import {
   createTopic,
   getTopicContent,
@@ -12,14 +17,14 @@ import {
 import { useMutation, useQuery } from "@tanstack/react-query";
 
 interface QueryParams {
-  params?: any;
+  filters?: ITopicFilters;
   enabled?: boolean;
 }
 
-export const useTopicsQuery = ({ params, enabled }: QueryParams) => {
+export const useTopicsQuery = ({ filters, enabled }: QueryParams) => {
   const { data, isLoading, refetch } = useQuery({
-    queryFn: () => getTopics(params?.search || ""),
-    queryKey: [QUERY_KEYS.TOPICS, params?.title],
+    queryFn: () => getTopics(filters),
+    queryKey: [QUERY_KEYS.TOPICS, filters?.search, filters?.sectionId],
     refetchOnWindowFocus: false,
     enabled,
   });

src/requests/topics.ts

@@ -2,16 +2,18 @@ import {
   IReorderTopicContent,
   ITopic,
   ITopicCreate,
+  ITopicFilters,
 } from "../interfaces/topic";
 import { API_TOPICS } from "../constants/apiConstants";
 import { request } from "./request";
 import { ITopicContent } from "@/interfaces/topicContent";
 
-export async function getTopics(search?: string): Promise<ITopic[]> {
+export async function getTopics(filters?: ITopicFilters): Promise<ITopic[]> {
   return request
     .get(API_TOPICS, {
       params: {
-        title: search,
+        ...(filters?.search && { search: filters.search }),
+        ...(filters?.sectionId && { sectionId: filters.sectionId }),
       },
     })
     .then(({ data }) => data);

yarn.lock

@@ -4092,6 +4092,11 @@ lodash.omit@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
   integrity sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"