anix/feat: add popular modal to discovery

app/components/Discovery/Modal/PopularFilters.ts

@@ -0,0 +1,34 @@
+import { FilterDefault } from "#/api/utils";
+
+export const TabOngoing = {
+  id: "ongoing",
+  name: "Онгоинги",
+  filter: {
+    ...FilterDefault,
+    sort: 3,
+    episodes_from: 1,
+    episodes_to: 48,
+    status_id: 2,
+  },
+};
+
+export const TabFinished = {
+  id: "finished",
+  name: "Завершённые",
+  filter: { ...FilterDefault, sort: 3, status_id: 1 },
+};
+
+export const TabFilms = {
+  id: "films",
+  name: "Фильмы",
+  filter: { ...FilterDefault, sort: 3, category_id: 2 },
+};
+
+export const TabOVA = {
+  id: "ova",
+  name: "OVA",
+  filter: { ...FilterDefault, sort: 3, category_id: 3 },
+};
+
+export const tabs = [TabOngoing, TabFinished, TabFilms, TabOVA];
+export const tabsId = { ongoing: 0, finished: 1, films: 2, ova: 3 };

app/components/Discovery/Modal/PopularModal.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { FetchFilter, useSWRfetcher } from "#/api/utils";
+import { useUserStore } from "#/store/auth";
+import useSWR from "swr";
+
+import { tabs, tabsId } from "./PopularFilters";
+import {
+  Button,
+  ButtonGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+} from "flowbite-react";
+import { useEffect, useState } from "react";
+import { ReleaseLink } from "#/components/ReleaseLink/ReleaseLinkUpdate";
+import { Spinner } from "#/components/Spinner/Spinner";
+type ModalProps = {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+};
+
+export const PopularModal = ({ isOpen, setIsOpen }: ModalProps) => {
+  const token = useUserStore((state) => state.token);
+  const [tab, setTab] = useState<
+    "ongoing" | "finished" | "films" | "ova" | string
+  >("ongoing");
+  const [content, setContent] = useState(null);
+
+  useEffect(() => {
+    setContent(null);
+    async function _loadReleases() {
+      const [data, error] = await FetchFilter(
+        tabs[tabsId[tab]].filter,
+        0,
+        token
+      );
+      if (!error) {
+        setContent(data.content);
+      }
+    }
+    _loadReleases();
+  }, [tab, token]);
+
+  return (
+    <Modal
+      show={isOpen}
+      onClose={() => setIsOpen(false)}
+      size="7xl"
+      dismissible
+    >
+      <ModalHeader>Популярное</ModalHeader>
+      <ModalBody>
+        <div className="flex items-center justify-between w-full gap-2">
+          <ButtonGroup>
+            {tabs.map((item) => (
+              <Button
+                key={`tabs-popular-${item.name}`}
+                color={tab === item.id ? "blue" : "light"}
+                onClick={() => setTab(item.id)}
+              >
+                {item.name}
+              </Button>
+            ))}
+          </ButtonGroup>
+        </div>
+        <div className="grid grid-cols-2 gap-2 mt-4 lg:grid-cols-3 xl:grid-cols-4">
+          {content ?
+            content.map((release) => {
+              return (
+                <div key={release.id} className="w-full h-full">
+                  <ReleaseLink {...release} />
+                </div>
+              );
+            })
+          : <Spinner />}
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+};

app/pages/Discover.tsx

@@ -2,16 +2,24 @@
 import { CollectionsOfTheWeek } from "#/components/Discovery/CollectionsOfTheWeek";
 import { DiscussingToday } from "#/components/Discovery/DiscussingToday";
 import { InterestingCarousel } from "#/components/Discovery/InterestingCarousel";
+import { PopularModal } from "#/components/Discovery/Modal/PopularModal";
 import { RecommendedCarousel } from "#/components/Discovery/RecommendedCarousel";
 import { WatchingNowCarousel } from "#/components/Discovery/WatchingNowCarousel";
 import { Button } from "flowbite-react";
+import { useState } from "react";
 
 export const DiscoverPage = () => {
+  const [PopularModalOpen, setPopularModalOpen] = useState(false);
+
   return (
     <>
       <InterestingCarousel />
       <div className="grid grid-cols-2 gap-4 my-4 lg:grid-cols-4">
-        <Button size="xl" color="yellow">
+        <Button
+          size="xl"
+          color="yellow"
+          onClick={() => setPopularModalOpen(true)}
+        >
           <span className="flex-shrink-0 inline-block w-8 h-8 mr-2 iconify mdi--fire"></span>
           <span>Популярное</span>
         </Button>
@@ -32,6 +40,8 @@ export const DiscoverPage = () => {
       <DiscussingToday />
       <WatchingNowCarousel />
       <CollectionsOfTheWeek />
+
+      <PopularModal isOpen={PopularModalOpen} setIsOpen={setPopularModalOpen} />
     </>
   );
 };

app/pages/IndexFilters.ts

@@ -22,7 +22,7 @@ export const ListFinished = {
 
 export const ListFilms = {
   name: "Фильмы",
-  filter: { ...FilterDefault, category_id: 2, status_id: null },
+  filter: { ...FilterDefault, category_id: 2 },
 };
 
 export const slugToFilter = {