change how filters work

app/api/config.ts

@@ -51,7 +51,13 @@ export const ENDPOINTS = {
     }
   },
   filter: `${API_PREFIX}/filter`,
-  search: `${API_URL}/search`,
+  search: {
+    profileList: `${API_PREFIX}/search/profile/list/`,
+    profileHistory: `${API_PREFIX}/search/history/`,
+    profileFavoriteCollection: `${API_PREFIX}/search/favoriteCollections/`,
+    profiles: `${API_PREFIX}/search/profiles/`,
+    releases: `${API_PREFIX}/search/releases/`,
+  },
   statistic: {
     addHistory: `${API_PREFIX}/history/add`,
     markWatched: `${API_PREFIX}/episode/watch`,

app/pages/Search.tsx

@@ -1,196 +1,155 @@
 "use client";
-import useSWRInfinite from "swr/infinite";
+
-import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
-import { RelatedSection } from "#/components/RelatedSection/RelatedSection";
-import { Spinner } from "#/components/Spinner/Spinner";
 import { useState, useEffect } from "react";
-import { useScrollPosition } from "#/hooks/useScrollPosition";
-import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
-import { useUserStore } from "../store/auth";
+import { useRouter } from "next/navigation";
-import { Button, Dropdown, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
-import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection";
-import { UserSection } from "#/components/UserSection/UserSection";
-import { useSWRfetcher } from "#/api/utils";
 
-const ListsMapping = {
+import {
-  watching: {
+  Button,
-    name: "Смотрю",
+  Dropdown,
-    id: 1,
+  DropdownItem,
-  },
+  Modal,
-  planned: {
+  ModalBody,
-    name: "В планах",
+  ModalFooter,
-    id: 2,
+  ModalHeader,
-  },
+} from "flowbite-react";
-  watched: {
+import { useUserStore } from "#/store/auth";
-    name: "Просмотрено",
-    id: 3,
-  },
-  delayed: {
-    name: "Отложено",
-    id: 4,
-  },
-  abandoned: {
-    name: "Заброшено",
-    id: 5,
-  },
-};
 
-const TagMapping = {
+const whereMapping = [
-  name: {
+  {
-    name: "Названию",
+    id: "releases",
-    id: 0,
+    label: "Релизах",
+    auth: false,
   },
-  studio: {
+  {
-    name: "Студии",
+    id: "profiles",
-    id: 1,
+    label: "Профилях",
+    auth: false,
   },
-  director: {
+  {
-    name: "Режиссёру",
+    id: "list",
-    id: 2,
+    label: "Списках",
+    auth: true,
   },
-  author: {
+  {
-    name: "Автору",
+    id: "history",
-    id: 3,
+    label: "Истории",
+    auth: true,
   },
-  tag: {
+  {
-    name: "Тегу",
+    id: "favorites",
-    id: 4,
+    label: "Избранном",
+    auth: true,
   },
-};
+  {
+    id: "collections",
+    label: "Коллекциях",
+    auth: true,
+  },
+];
 
-const WhereMapping = {
+const searchByMapping = {
-  releases: "Релизах",
+  releases: [
-  list: "Списках",
+    {
-  history: "Истории",
+      id: "name",
-  favorites: "Избранном",
+      label: "Названию",
-  collections: "Коллекциях",
+      value: 0,
-  profiles: "Профилях",
+    },
+    {
+      id: "studio",
+      label: "Студии",
+      value: 1,
+    },
+    {
+      id: "director",
+      label: "Режиссёру",
+      value: 2,
+    },
+    {
+      id: "author",
+      label: "Автору",
+      value: 3,
+    },
+    {
+      id: "tag",
+      label: "Тегу",
+      value: 4,
+    },
+  ],
+  list: [
+    {
+      id: "watching",
+      label: "Смотрю",
+      value: 1,
+    },
+    {
+      id: "planned",
+      label: "В планах",
+      value: 2,
+    },
+    {
+      id: "watched",
+      label: "Просмотрено",
+      value: 3,
+    },
+    {
+      id: "delayed",
+      label: "Отложено",
+      value: 4,
+    },
+    {
+      id: "abandoned",
+      label: "Заброшено",
+      value: 5,
+    },
+  ],
+  none: [{ id: "none", label: "Нет", value: 0 }],
 };
 
 export function SearchPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [query, setQuery] = useState(searchParams.get("q") || "");
+  const userStore = useUserStore();
-  const [searchVal, setSearchVal] = useState(searchParams.get("q") || "");
+  const [query, setQuery] = useState(searchParams.get("query") || "");
-  const [where, setWhere] = useState(searchParams.get("where") || "releases");
+  const [params, setParams] = useState(null);
-  const [searchBy, setSearchBy] = useState(
-    searchParams.get("searchBy") || "name"
-  );
-  const [list, setList] = useState(searchParams.get("list") || "watching");
   const [filtersModalOpen, setFiltersModalOpen] = useState(false);
 
-  const userStore = useUserStore();
-
-  const getKey = (pageIndex: number, previousPageData: any) => {
-    if (where == "releases") {
-      if (previousPageData && !previousPageData.releases.length) return null;
-    } else {
-      if (previousPageData && !previousPageData.content.length) return null;
-    }
-
-    const url = new URL("/api/search", window.location.origin);
-    url.searchParams.set("page", pageIndex.toString());
-
-    if (userStore.token) {
-      url.searchParams.set("token", userStore.token);
-    }
-
-    if (where) {
-      url.searchParams.set("where", where);
-    }
-
-    if (where == "list" && list && ListsMapping.hasOwnProperty(list)) {
-      url.searchParams.set("list", ListsMapping[list].id);
-    }
-
-    url.searchParams.set("searchBy", TagMapping[searchBy].id);
-
-    if (query) {
-      url.searchParams.set("q", query);
-      return url.toString();
-    }
-    return;
-  };
-
-  const { data, error, isLoading, size, setSize } = useSWRInfinite(
-    getKey,
-    useSWRfetcher,
-    { initialSize: 2, revalidateFirstPage: false }
-  );
-
-  const [content, setContent] = useState(null);
   useEffect(() => {
-    if (data) {
+    let _parsed = null;
-      let allReleases = [];
+    try {
-      if (where == "releases") {
+      _parsed = JSON.parse(searchParams.get("params"));
-        for (let i = 0; i < data.length; i++) {
+    } catch {
-          allReleases.push(...data[i].releases);
+      _parsed = {
-        }
+        where: "releases",
-      } else {
+        searchBy: "name",
-        for (let i = 0; i < data.length; i++) {
+      };
-          allReleases.push(...data[i].content);
-        }
-      }
-      setContent(allReleases);
     }
+    setParams(_parsed);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data]);
+  }, []);
-
-  const scrollPosition = useScrollPosition();
-  useEffect(() => {
-    if (scrollPosition >= 98 && scrollPosition <= 99) {
-      setSize(size + 1);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scrollPosition]);
-
-  function _executeSearch(value: string) {
-    const Params = new URLSearchParams(window.location.search);
-    Params.set("q", value);
-    const url = new URL(`/search?${Params.toString()}`, window.location.origin);
-    setContent(null);
-    setQuery(value);
-    router.push(url.toString());
-  }
 
   useEffect(() => {
-    if (searchVal && searchVal.length % 4 == 1) {
+    if (!params) return;
-      _executeSearch(searchVal.trim());
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchVal]);
 
-  if (error)
+    const url = new URL(`/search`, window.location.origin);
-    return (
+    url.searchParams.set("params", JSON.stringify(params));
-      <main className="flex items-center justify-center min-h-screen">
+    router.replace(url.toString());
-        <div className="flex flex-col gap-2">
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-          <h1 className="text-2xl font-bold">Ошибка</h1>
+  }, [params]);
-          <p className="text-lg">
+
-            Произошла ошибка поиска. Попробуйте обновить страницу или зайдите
+  if (!params) return <></>;
-            позже.
-          </p>
-        </div>
-      </main>
-    );
 
   return (
-    <>
+    <div>
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap w-full gap-2">
-        <form
+        <div className="flex flex-1 w-full">
-          className="flex-1 max-w-full mx-auto"
-          onSubmit={(e) => {
-            e.preventDefault();
-            _executeSearch(searchVal.trim());
-          }}
-        >
           <label
             htmlFor="default-search"
             className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
           >
             Search
           </label>
-          <div className="relative">
+          <div className="relative w-full">
             <div className="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
               <svg
                 className="w-4 h-4 text-gray-500 dark:text-gray-400"
@@ -214,8 +173,8 @@ export function SearchPage() {
               className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               placeholder="Поиск аниме..."
               required
-              value={searchVal}
+              // value={searchVal}
-              onChange={(e) => setSearchVal(e.target.value)}
+              // onChange={(e) => setSearchVal(e.target.value)}
             />
             <button
               type="submit"
@@ -224,219 +183,450 @@ export function SearchPage() {
               Поиск
             </button>
           </div>
-        </form>
+        </div>
         <Button
           color="light"
           size="xl"
+          className="flex items-center gap-1"
           onClick={() => setFiltersModalOpen(true)}
         >
+          <span className="w-6 h-6 iconify material-symbols--filter-list"></span>
           Фильтры
         </Button>
       </div>
-      <div className="mt-2">
+
-        {data && data[0].related && <RelatedSection {...data[0].related} />}
+      <p>query: {query}</p>
-        {content ?
+      <p>params: {JSON.stringify(params)}</p>
-          content.length > 0 ?
-            <>
-              {where == "collections" ?
-                <CollectionsSection
-                  sectionTitle="Найденные Коллекции"
-                  content={content}
-                />
-              : where == "profiles" ?
-                <UserSection
-                  sectionTitle="Найденные Пользователи"
-                  content={content}
-                />
-              : <ReleaseSection
-                  sectionTitle="Найденные релизы"
-                  content={content}
-                />
-              }
-            </>
-          : <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
-              <span className="w-24 h-24 iconify-color twemoji--crying-cat"></span>
-              <p>Странно, аниме не найдено, попробуйте другой запрос...</p>
-            </div>
-        : isLoading && (
-            <div className="flex items-center justify-center min-w-full min-h-screen">
-              <Spinner />
-            </div>
-          )
-        }
-        {!content && !isLoading && !query && (
-          <div className="flex flex-col items-center justify-center min-w-full gap-2 mt-12 text-xl">
-            <span className="w-16 h-16 iconify mdi--arrow-up animate-bounce"></span>
-            <p>Введите ваш запрос что-бы найти любимый тайтл</p>
-          </div>
-        )}
-      </div>
-      {(
-        data &&
-        data.length > 1 &&
-        (where == "releases" ?
-          data[data.length - 1].releases.length == 25
-        : data[data.length - 1].content.length == 25)
-      ) ?
-        <Button
-          className="w-full"
-          color={"light"}
-          onClick={() => setSize(size + 1)}
-        >
-          <div className="flex items-center gap-2">
-            <span className="w-6 h-6 iconify mdi--plus-circle "></span>
-            <span className="text-lg">Загрузить ещё</span>
-          </div>
-        </Button>
-      : ""}
       <FiltersModal
         isOpen={filtersModalOpen}
         setIsOpen={setFiltersModalOpen}
-        where={where}
-        setWhere={setWhere}
-        list={list}
-        setList={setList}
         isAuth={userStore.isAuth}
-        searchBy={searchBy}
+        setContent={() => {}}
-        setSearchBy={setSearchBy}
+        params={params}
-        setContent={setContent}
+        setParams={setParams}
       />
-    </>
+    </div>
   );
 }
 
 const FiltersModal = (props: {
   isOpen: boolean;
   setIsOpen: any;
-  where: string;
-  setWhere: any;
-  list: string;
-  setList: any;
   isAuth: boolean;
-  searchBy: string;
-  setSearchBy: any;
   setContent: any;
+  params: any;
+  setParams: any;
 }) => {
-  const router = useRouter();
+  if (!props.params) return <></>;
-  const [where, setWhere] = useState(props.where);
-  const [list, setList] = useState(props.list);
-  const [searchBy, setSearchBy] = useState(props.searchBy);
-
-  function _cancel() {
-    setWhere(props.where);
-    setList(props.list);
-    setSearchBy(props.searchBy);
-    props.setIsOpen(false);
-  }
-
-  function _accept() {
-    const Params = new URLSearchParams(window.location.search);
-
-    if (props.where != where) {
-      Params.set("where", where);
-      props.setWhere(where);
-    }
-
-    if (where == "list") {
-      Params.set("list", list);
-      props.setList(list);
-    } else {
-      Params.delete("list");
-    }
-
-    if (!["profiles", "collections"].includes(where)) {
-      Params.set("searchBy", searchBy);
-      props.setSearchBy(searchBy);
-    } else {
-      Params.delete("searchBy");
-      props.setSearchBy("name");
-    }
-
-    props.setContent(null);
-
-    const url = new URL(`/search?${Params.toString()}`, window.location.origin);
-    router.push(url.toString());
-  }
 
   return (
-    <Modal show={props.isOpen} onClose={() => _cancel()}>
+    <Modal show={props.isOpen} onClose={() => props.setIsOpen(false)}>
       <ModalHeader>Фильтры</ModalHeader>
       <ModalBody>
-        <div className="my-4">
+        <div className="space-y-4">
-          <div className="flex items-center justify-between">
+          <div className="flex justify-between gap-4">
-            <p className="font-bold dark:text-white">Искать в</p>
+            <p>Искать в</p>
-            <Dropdown label={WhereMapping[where]} color="blue">
+            <Dropdown
-              {Object.keys(WhereMapping).map((item) => {
+              label={
-                if (
+                whereMapping.find((item) => item.id == props.params.where).label
-                  ["list", "history", "collections", "favorites"].includes(
+              }
-                    item
+              color="blue"
-                  ) &&
+            >
-                  !props.isAuth
+              {whereMapping.map((item) => {
-                ) {
+                return item.auth && !props.isAuth ?
-                  return <></>;
+                    <></>
-                } else {
+                  : <DropdownItem
-                  return (
+                      onClick={() =>
-                    <DropdownItem
+                        searchByMapping[item.id] ?
-                      onClick={() => setWhere(item)}
+                          props.setParams({
-                      key={`where--${item}`}
+                            where: item.id,
+                            searchBy: searchByMapping[item.id][0].id,
+                          })
+                        : props.setParams({ where: item.id, searchBy: "none" })
+                      }
+                      key={`where--${item.id}`}
                     >
-                      {WhereMapping[item]}
+                      {item.label}
-                    </DropdownItem>
+                    </DropdownItem>;
-                  );
-                }
               })}
             </Dropdown>
           </div>
+          {searchByMapping[props.params.where] ?
+            <div className="flex justify-between gap-4">
+              <p>Искать по</p>
+              <Dropdown
+                label={
+                  props.params.searchBy == "none" ?
+                    searchByMapping.none[0].label
+                  : searchByMapping[props.params.where].find(
+                      (item) => item.id == props.params.searchBy
+                    ).label
+                }
+                color="blue"
+              >
+                {searchByMapping[props.params.where].map((item) => {
+                  return (
+                    <DropdownItem
+                      onClick={() =>
+                        props.setParams({
+                          where: props.params.where,
+                          searchBy: item.id,
+                        })
+                      }
+                      key={`searchBy--${item.id}`}
+                    >
+                      {item.label}
+                    </DropdownItem>
+                  );
+                })}
+              </Dropdown>
+            </div>
+          : <></>}
         </div>
-        {props.isAuth && where == "list" && ListsMapping.hasOwnProperty(list) ?
-          <div className="my-4">
-            <div className="flex items-center justify-between">
-              <p className="font-bold dark:text-white">Список</p>
-              <Dropdown label={ListsMapping[list].name} color="blue">
-                {Object.keys(ListsMapping).map((item) => {
-                  return (
-                    <DropdownItem
-                      onClick={() => setList(item)}
-                      key={`list--${item}`}
-                    >
-                      {ListsMapping[item].name}
-                    </DropdownItem>
-                  );
-                })}
-              </Dropdown>
-            </div>
-          </div>
-        : ""}
-        {!["profiles", "collections"].includes(where) ?
-          <div className="my-4">
-            <div className="flex items-center justify-between">
-              <p className="font-bold dark:text-white">Искать по</p>
-              <Dropdown label={TagMapping[searchBy].name} color="blue">
-                {Object.keys(TagMapping).map((item) => {
-                  return (
-                    <DropdownItem
-                      onClick={() => setSearchBy(item)}
-                      key={`tag--${item}`}
-                    >
-                      {TagMapping[item].name}
-                    </DropdownItem>
-                  );
-                })}
-              </Dropdown>
-            </div>
-          </div>
-        : ""}
       </ModalBody>
-      <ModalFooter>
+      <ModalFooter></ModalFooter>
-        <div className="flex justify-end w-full gap-2">
-          <Button color="red" onClick={() => _cancel()}>
-            Отменить
-          </Button>
-          <Button color="blue" onClick={() => _accept()}>
-            Применить
-          </Button>
-        </div>
-      </ModalFooter>
     </Modal>
   );
 };
+
+// import useSWRInfinite from "swr/infinite";
+// import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection";
+// import { RelatedSection } from "#/components/RelatedSection/RelatedSection";
+// import { Spinner } from "#/components/Spinner/Spinner";
+// import { useScrollPosition } from "#/hooks/useScrollPosition";
+// import { useUserStore } from "../store/auth";
+// import { Button, Dropdown, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
+// import { CollectionsSection } from "#/components/CollectionsSection/CollectionsSection";
+// import { UserSection } from "#/components/UserSection/UserSection";
+// import { useSWRfetcher } from "#/api/utils";
+
+// export function SearchPage() {
+//   const router = useRouter();
+
+//   const [searchVal, setSearchVal] = useState(searchParams.get("q") || "");
+//   const [where, setWhere] = useState(searchParams.get("where") || "releases");
+
+//   const [list, setList] = useState(searchParams.get("list") || "watching");
+//   const [filtersModalOpen, setFiltersModalOpen] = useState(false);
+
+//
+
+//   const getKey = (pageIndex: number, previousPageData: any) => {
+//     if (where == "releases") {
+//       if (previousPageData && !previousPageData.releases.length) return null;
+//     } else {
+//       if (previousPageData && !previousPageData.content.length) return null;
+//     }
+
+//     const url = new URL("/api/search", window.location.origin);
+//     url.searchParams.set("page", pageIndex.toString());
+
+//     if (userStore.token) {
+//       url.searchParams.set("token", userStore.token);
+//     }
+
+//     if (where) {
+//       url.searchParams.set("where", where);
+//     }
+
+//     if (where == "list" && list && ListsMapping.hasOwnProperty(list)) {
+//       url.searchParams.set("list", ListsMapping[list].id);
+//     }
+
+//     url.searchParams.set("searchBy", TagMapping[searchBy].id);
+
+//     if (query) {
+//       url.searchParams.set("q", query);
+//       return url.toString();
+//     }
+//     return;
+//   };
+
+//   const { data, error, isLoading, size, setSize } = useSWRInfinite(
+//     getKey,
+//     useSWRfetcher,
+//     { initialSize: 2, revalidateFirstPage: false }
+//   );
+
+//   const [content, setContent] = useState(null);
+//   useEffect(() => {
+//     if (data) {
+//       let allReleases = [];
+//       if (where == "releases") {
+//         for (let i = 0; i < data.length; i++) {
+//           allReleases.push(...data[i].releases);
+//         }
+//       } else {
+//         for (let i = 0; i < data.length; i++) {
+//           allReleases.push(...data[i].content);
+//         }
+//       }
+//       setContent(allReleases);
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [data]);
+
+//   const scrollPosition = useScrollPosition();
+//   useEffect(() => {
+//     if (scrollPosition >= 98 && scrollPosition <= 99) {
+//       setSize(size + 1);
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [scrollPosition]);
+
+//   function _executeSearch(value: string) {
+//     const Params = new URLSearchParams(window.location.search);
+//     Params.set("q", value);
+//     const url = new URL(`/search?${Params.toString()}`, window.location.origin);
+//     setContent(null);
+//     setQuery(value);
+//     router.push(url.toString());
+//   }
+
+//   useEffect(() => {
+//     if (searchVal && searchVal.length % 4 == 1) {
+//       _executeSearch(searchVal.trim());
+//     }
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [searchVal]);
+
+//   if (error)
+//     return (
+//       <main className="flex items-center justify-center min-h-screen">
+//         <div className="flex flex-col gap-2">
+//           <h1 className="text-2xl font-bold">Ошибка</h1>
+//           <p className="text-lg">
+//             Произошла ошибка поиска. Попробуйте обновить страницу или зайдите
+//             позже.
+//           </p>
+//         </div>
+//       </main>
+//     );
+
+//   return (
+//     <>
+//       <div className="flex flex-wrap items-center gap-2">
+//         <form
+//           className="flex-1 max-w-full mx-auto"
+//           onSubmit={(e) => {
+//             e.preventDefault();
+//             _executeSearch(searchVal.trim());
+//           }}
+//         >
+
+//         </form>
+//         <Button
+//           color="light"
+//           size="xl"
+//           onClick={() => setFiltersModalOpen(true)}
+//         >
+//           Фильтры
+//         </Button>
+//       </div>
+//       <div className="mt-2">
+//         {data && data[0].related && <RelatedSection {...data[0].related} />}
+//         {content ?
+//           content.length > 0 ?
+//             <>
+//               {where == "collections" ?
+//                 <CollectionsSection
+//                   sectionTitle="Найденные Коллекции"
+//                   content={content}
+//                 />
+//               : where == "profiles" ?
+//                 <UserSection
+//                   sectionTitle="Найденные Пользователи"
+//                   content={content}
+//                 />
+//               : <ReleaseSection
+//                   sectionTitle="Найденные релизы"
+//                   content={content}
+//                 />
+//               }
+//             </>
+//           : <div className="flex flex-col items-center justify-center min-w-full gap-4 mt-12 text-xl">
+//               <span className="w-24 h-24 iconify-color twemoji--crying-cat"></span>
+//               <p>Странно, аниме не найдено, попробуйте другой запрос...</p>
+//             </div>
+//         : isLoading && (
+//             <div className="flex items-center justify-center min-w-full min-h-screen">
+//               <Spinner />
+//             </div>
+//           )
+//         }
+//         {!content && !isLoading && !query && (
+//           <div className="flex flex-col items-center justify-center min-w-full gap-2 mt-12 text-xl">
+//             <span className="w-16 h-16 iconify mdi--arrow-up animate-bounce"></span>
+//             <p>Введите ваш запрос что-бы найти любимый тайтл</p>
+//           </div>
+//         )}
+//       </div>
+//       {(
+//         data &&
+//         data.length > 1 &&
+//         (where == "releases" ?
+//           data[data.length - 1].releases.length == 25
+//         : data[data.length - 1].content.length == 25)
+//       ) ?
+//         <Button
+//           className="w-full"
+//           color={"light"}
+//           onClick={() => setSize(size + 1)}
+//         >
+//           <div className="flex items-center gap-2">
+//             <span className="w-6 h-6 iconify mdi--plus-circle "></span>
+//             <span className="text-lg">Загрузить ещё</span>
+//           </div>
+//         </Button>
+//       : ""}
+//       <FiltersModal
+//         isOpen={filtersModalOpen}
+//         setIsOpen={setFiltersModalOpen}
+//         where={where}
+//         setWhere={setWhere}
+//         list={list}
+//         setList={setList}
+//         isAuth={userStore.isAuth}
+//         searchBy={searchBy}
+//         setSearchBy={setSearchBy}
+//         setContent={setContent}
+//       />
+//     </>
+//   );
+// }
+
+// const FiltersModal = (props: {
+//   isOpen: boolean;
+//   setIsOpen: any;
+//   where: string;
+//   setWhere: any;
+//   list: string;
+//   setList: any;
+//   isAuth: boolean;
+//   searchBy: string;
+//   setSearchBy: any;
+//   setContent: any;
+// }) => {
+//   const router = useRouter();
+//   const [where, setWhere] = useState(props.where);
+//   const [list, setList] = useState(props.list);
+//   const [searchBy, setSearchBy] = useState(props.searchBy);
+
+//   function _cancel() {
+//     setWhere(props.where);
+//     setList(props.list);
+//     setSearchBy(props.searchBy);
+//     props.setIsOpen(false);
+//   }
+
+//   function _accept() {
+//     const Params = new URLSearchParams(window.location.search);
+
+//     if (props.where != where) {
+//       Params.set("where", where);
+//       props.setWhere(where);
+//     }
+
+//     if (where == "list") {
+//       Params.set("list", list);
+//       props.setList(list);
+//     } else {
+//       Params.delete("list");
+//     }
+
+//     if (!["profiles", "collections"].includes(where)) {
+//       Params.set("searchBy", searchBy);
+//       props.setSearchBy(searchBy);
+//     } else {
+//       Params.delete("searchBy");
+//       props.setSearchBy("name");
+//     }
+
+//     props.setContent(null);
+
+//     const url = new URL(`/search?${Params.toString()}`, window.location.origin);
+//     router.push(url.toString());
+//   }
+
+//   return (
+//     <Modal show={props.isOpen} onClose={() => _cancel()}>
+//       <ModalHeader>Фильтры</ModalHeader>
+//       <ModalBody>
+//         <div className="my-4">
+//           <div className="flex items-center justify-between">
+//             <p className="font-bold dark:text-white">Искать в</p>
+//             <Dropdown label={WhereMapping[where]} color="blue">
+//               {Object.keys(WhereMapping).map((item) => {
+//                 if (
+//                   ["list", "history", "collections", "favorites"].includes(
+//                     item
+//                   ) &&
+//                   !props.isAuth
+//                 ) {
+//                   return <></>;
+//                 } else {
+//                   return (
+//                     <DropdownItem
+//                       onClick={() => setWhere(item)}
+//                       key={`where--${item}`}
+//                     >
+//                       {WhereMapping[item]}
+//                     </DropdownItem>
+//                   );
+//                 }
+//               })}
+//             </Dropdown>
+//           </div>
+//         </div>
+//         {props.isAuth && where == "list" && ListsMapping.hasOwnProperty(list) ?
+//           <div className="my-4">
+//             <div className="flex items-center justify-between">
+//               <p className="font-bold dark:text-white">Список</p>
+//               <Dropdown label={ListsMapping[list].name} color="blue">
+//                 {Object.keys(ListsMapping).map((item) => {
+//                   return (
+//                     <DropdownItem
+//                       onClick={() => setList(item)}
+//                       key={`list--${item}`}
+//                     >
+//                       {ListsMapping[item].name}
+//                     </DropdownItem>
+//                   );
+//                 })}
+//               </Dropdown>
+//             </div>
+//           </div>
+//         : ""}
+//         {!["profiles", "collections"].includes(where) ?
+//           <div className="my-4">
+//             <div className="flex items-center justify-between">
+//               <p className="font-bold dark:text-white">Искать по</p>
+//               <Dropdown label={TagMapping[searchBy].name} color="blue">
+//                 {Object.keys(TagMapping).map((item) => {
+//                   return (
+//                     <DropdownItem
+//                       onClick={() => setSearchBy(item)}
+//                       key={`tag--${item}`}
+//                     >
+//                       {TagMapping[item].name}
+//                     </DropdownItem>
+//                   );
+//                 })}
+//               </Dropdown>
+//             </div>
+//           </div>
+//         : ""}
+//       </ModalBody>
+//       <ModalFooter>
+//         <div className="flex justify-end w-full gap-2">
+//           <Button color="red" onClick={() => _cancel()}>
+//             Отменить
+//           </Button>
+//           <Button color="blue" onClick={() => _accept()}>
+//             Применить
+//           </Button>
+//         </div>
+//       </ModalFooter>
+//     </Modal>
+//   );
+// };