From 4fb996353d31302e646ba378780649555b5cb6c5 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Thu, 21 Nov 2024 18:56:54 +0500
Subject: [PATCH] feat: add search filters

---
 .../ReleaseInfo/ReleaseInfo.Info.tsx          |  8 +-
 app/pages/Search.tsx                          | 97 +++++++++++++++----
 2 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
index 04c0ce2..4f9e666 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
@@ -88,7 +88,7 @@ export const ReleaseInfoInfo = (props: {
                       return (
                         <div key={index} className="inline">
                           {index > 0 && ", "}
-                          <ReleaseInfoSearchLink title={studio} searchBy={1} />
+                          <ReleaseInfoSearchLink title={studio} searchBy={"studio"} />
                         </div>
                       );
                     })}
@@ -98,14 +98,14 @@ export const ReleaseInfoInfo = (props: {
               {props.author && (
                 <>
                   {"Автор: "}
-                  <ReleaseInfoSearchLink title={props.author} searchBy={3} />
+                  <ReleaseInfoSearchLink title={props.author} searchBy={"author"} />
                   {props.director && ", "}
                 </>
               )}
               {props.director && (
                 <>
                   {"Режиссёр: "}
-                  <ReleaseInfoSearchLink title={props.director} searchBy={2} />
+                  <ReleaseInfoSearchLink title={props.director} searchBy={"director"} />
                 </>
               )}
             </Table.Cell>
@@ -120,7 +120,7 @@ export const ReleaseInfoInfo = (props: {
                   return (
                     <div key={index} className="inline">
                       {index > 0 && ", "}
-                      <ReleaseInfoSearchLink title={genre} searchBy={4} />
+                      <ReleaseInfoSearchLink title={genre} searchBy={"tag"} />
                     </div>
                   );
                 })}
diff --git a/app/pages/Search.tsx b/app/pages/Search.tsx
index 8adf9be..b357ffe 100644
--- a/app/pages/Search.tsx
+++ b/app/pages/Search.tsx
@@ -27,23 +27,46 @@ const fetcher = async (url: string) => {
 const ListsMapping = {
   watching: {
     name: "Смотрю",
-    id: 1
+    id: 1,
   },
   planned: {
     name: "В планах",
-    id: 2
+    id: 2,
   },
   watched: {
     name: "Просмотрено",
-    id: 3
+    id: 3,
   },
   delayed: {
     name: "Отложено",
-    id: 4
+    id: 4,
   },
   abandoned: {
     name: "Заброшено",
-    id: 5
+    id: 5,
+  },
+};
+
+const TagMapping = {
+  name: {
+    name: "Названию",
+    id: 0,
+  },
+  studio: {
+    name: "Студии",
+    id: 1,
+  },
+  director: {
+    name: "Режиссёру",
+    id: 2,
+  },
+  author: {
+    name: "Автору",
+    id: 3,
+  },
+  tag: {
+    name: "Тегу",
+    id: 4,
   },
 };
 
@@ -54,7 +77,7 @@ export function SearchPage() {
   const [searchVal, setSearchVal] = useState(searchParams.get("q") || "");
   const [where, setWhere] = useState(searchParams.get("where") || "releases");
   const [searchBy, setSearchBy] = useState(
-    searchParams.get("searchBy") || null
+    searchParams.get("searchBy") || "name"
   );
   const [list, setList] = useState(searchParams.get("list") || "watching");
   const [filtersModalOpen, setFiltersModalOpen] = useState(false);
@@ -79,14 +102,12 @@ export function SearchPage() {
       url.searchParams.set("where", where);
     }
 
-    if (searchBy) {
-      url.searchParams.set("searchBy", searchBy);
-    }
-
     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();
@@ -252,6 +273,8 @@ export function SearchPage() {
         list={list}
         setList={setList}
         isAuth={userStore.isAuth}
+        searchBy={searchBy}
+        setSearchBy={setSearchBy}
       />
     </>
   );
@@ -265,16 +288,19 @@ const FiltersModal = (props: {
   list: string;
   setList: any;
   isAuth: boolean;
+  searchBy: string;
+  setSearchBy: 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);
-    props.setIsOpen(false)
+    setSearchBy(props.searchBy);
+    props.setIsOpen(false);
   }
 
   function _accept() {
@@ -292,6 +318,9 @@ const FiltersModal = (props: {
       Params.delete("list");
     }
 
+    Params.set("searchBy", searchBy);
+    props.setSearchBy(searchBy);
+
     const url = new URL(`/search?${Params.toString()}`, window.location.origin);
     router.push(url.toString());
   }
@@ -326,27 +355,55 @@ const FiltersModal = (props: {
             </Button.Group>
           </div>
         </div>
-        {props.isAuth && where == "list" && ListsMapping.hasOwnProperty(list) ? (
+        {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">
-                <Dropdown.Item onClick={() => setList("watching")}>Смотрю</Dropdown.Item>
-                <Dropdown.Item onClick={() => setList("planned")}>В планах</Dropdown.Item>
-                <Dropdown.Item onClick={() => setList("watched")}>Просмотрено</Dropdown.Item>
-                <Dropdown.Item onClick={() => setList("delayed")}>Отложено</Dropdown.Item>
-                <Dropdown.Item onClick={() => setList("abandoned")}>Брошено</Dropdown.Item>
+                {Object.keys(ListsMapping).map((item) => {
+                  return (
+                    <Dropdown.Item
+                      onClick={() => setList(item)}
+                      key={`list--${item}`}
+                    >
+                      {ListsMapping[item].name}
+                    </Dropdown.Item>
+                  );
+                })}
               </Dropdown>
             </div>
           </div>
         ) : (
           ""
         )}
+        <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 (
+                  <Dropdown.Item
+                    onClick={() => setSearchBy(item)}
+                    key={`tag--${item}`}
+                  >
+                    {TagMapping[item].name}
+                  </Dropdown.Item>
+                );
+              })}
+            </Dropdown>
+          </div>
+        </div>
       </Modal.Body>
       <Modal.Footer>
         <div className="flex justify-end w-full gap-2">
-          <Button color="red" onClick={() => _cancel()}>Отменить</Button>
-          <Button color="blue" onClick={() => _accept()}>Применить</Button>
+          <Button color="red" onClick={() => _cancel()}>
+            Отменить
+          </Button>
+          <Button color="blue" onClick={() => _accept()}>
+            Применить
+          </Button>
         </div>
       </Modal.Footer>
     </Modal>