anix/feat: add wathing now and collections of the week to discovery page

app/api/config.ts

@@ -78,5 +78,7 @@ export const ENDPOINTS = {
   discover: {
     interesting: `${API_PREFIX}/discover/interesting`,
     discussing: `${API_PREFIX}/discover/discussing`,
+    watching: `${API_PREFIX}/discover/watching`,
+    collections: `${API_PREFIX}/collection/all`
   }
 };

app/components/CollectionCourusel/CollectionCourusel.module.css

@@ -6,6 +6,12 @@
   display: none !important;
 }
 
+@media (hover: hover) and (min-width: 1024px) {
+  .swiper {
+    overflow: visible !important;
+  }
+}
+
 @media (hover: hover) {
   .section:hover .swiper-button {
     display: flex !important;

app/components/CollectionCourusel/CollectionCourusel.tsx

@@ -55,7 +55,7 @@ export const CollectionCourusel = (props: {
         )}
       </div>
       <div className="m-4">
-        <div className="swiper">
+        <div className={`swiper ${Styles.swiper}`}>
           <div className="swiper-wrapper">
             {props.isMyCollections && (
               <div className="swiper-slide" style={{ width: "fit-content" }}>

app/components/Discovery/CollectionsOfTheWeek.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useSWRfetcher } from "#/api/utils";
+import useSWR from "swr";
+import { CollectionCourusel } from "../CollectionCourusel/CollectionCourusel";
+import { useUserStore } from "#/store/auth";
+
+export const CollectionsOfTheWeek = () => {
+  const token = useUserStore((state) => state.token);
+  const { data, isLoading, error } = useSWR(
+    `${ENDPOINTS.discover.collections}/-1?previous_page=0&where=2&sort=4${token ? `&token=${token}` : ""}`,
+    useSWRfetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  if (error) return <></>;
+  if (isLoading) return <></>;
+
+  return (
+    <CollectionCourusel
+      sectionTitle="Коллекции недели"
+      showAllLink={`/discovery/collections`}
+      content={data.content}
+    />
+  );
+};

app/components/Discovery/DiscussingToday.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
 import useSWR from "swr";
 
-export const DiscussingTodayCarousel = () => {
+export const DiscussingToday = () => {
   const token = useUserStore((state) => state.token);
   const { data, isLoading, error } = useSWR(
     `${ENDPOINTS.discover.discussing}${token ? `?token=${token}` : ""}`,
@@ -19,14 +19,7 @@ export const DiscussingTodayCarousel = () => {
     }
   );
 
-  if (error)
-    return (
-      <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md md:flex-row bg-red-50 dark:bg-red-700 dark:border-red-600">
-        <div className="mb-4 md:mb-0 md:me-4">
-          <p>Произошла ошибка загрузки обсуждаемых релизов</p>
-        </div>
-      </div>
-    );
+  if (error) return <></>;
   if (isLoading) return <></>;
 
   return (

app/components/Discovery/InterestingCarousel.tsx

@@ -22,14 +22,7 @@ export const InterestingCarousel = () => {
     }
   );
 
-  if (error)
-    return (
-      <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md md:flex-row bg-red-50 dark:bg-red-700 dark:border-red-600">
-        <div className="mb-4 md:mb-0 md:me-4">
-          <p>Произошла ошибка загрузки интересных релизов</p>
-        </div>
-      </div>
-    );
+  if (error) return <></>;
   if (isLoading) return <></>;
 
   return (
@@ -45,12 +38,6 @@ export const InterestingCarousel = () => {
           prevEl: ".swiper-button-prev",
         }}
         allowTouchMove={true}
-        breakpoints={{
-          1800: {
-            initialSlide: 1,
-            centeredSlides: true,
-          },
-        }}
         className={Styles.swiper}
       >
         {data.content.map((item) => {

app/components/Discovery/WatchingNowCarousel.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useSWRfetcher } from "#/api/utils";
+import { useUserStore } from "#/store/auth";
+import { ReleaseCourusel } from "../ReleaseCourusel/ReleaseCourusel";
+import useSWR from "swr";
+
+export const WatchingNowCarousel = () => {
+  const token = useUserStore((state) => state.token);
+  const { data, isLoading, error } = useSWR(
+    `${ENDPOINTS.discover.watching}/0${token ? `?token=${token}` : ""}`,
+    useSWRfetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  if (error) return <></>;
+  if (isLoading) return <></>;
+
+  return <ReleaseCourusel content={data.content} sectionTitle={"Смотрят сейчас"} showAllLink={"/discovery/watching"} />;
+};

app/components/ReleaseCourusel/ReleaseCourusel.tsx

@@ -40,12 +40,6 @@ export const ReleaseCourusel = (props: {
             prevEl: ".swiper-button-prev"
           }}
           allowTouchMove={true}
-          breakpoints={{
-            1800: {
-              initialSlide: 2,
-              centeredSlides: true
-            }
-          }}
           className={Styles.swiper}
         >
             {props.content.map((release) => {

app/pages/Discover.tsx

@@ -1,6 +1,8 @@
 "use client";
-import { DiscussingTodayCarousel } from "#/components/Discovery/DiscussingTodayCarousel";
+import { CollectionsOfTheWeek } from "#/components/Discovery/CollectionsOfTheWeek";
+import { DiscussingToday } from "#/components/Discovery/DiscussingToday";
 import { InterestingCarousel } from "#/components/Discovery/InterestingCarousel";
+import { WatchingNowCarousel } from "#/components/Discovery/WatchingNowCarousel";
 import { Button } from "flowbite-react";
 
 export const DiscoverPage = () => {
@@ -25,7 +27,9 @@ export const DiscoverPage = () => {
           <span>Фильтр</span>
         </Button>
       </div>
-      <DiscussingTodayCarousel />
+      <DiscussingToday />
+      <WatchingNowCarousel />
+      <CollectionsOfTheWeek />
     </>
   );
 };