From 7f2b4f17a427b6694634e7393b04f2318699f489 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sat, 13 Jul 2024 05:21:06 +0500 Subject: [PATCH] feat: add Show Releases Pages. fix: hover handling on touchscreens --- app/api/home/route.js | 2 + app/components/Navbar/Navbar.jsx | 4 +- .../ReleaseCourusel/ReleaseCourusel.jsx | 20 +++++-- .../ReleaseCourusel.module.css | 16 +++--- app/components/ReleaseLink/ReleaseLink.jsx | 10 ++-- .../ReleaseSection/ReleaseSection.jsx | 28 ++++++++++ app/components/Spinner/Spinner.jsx | 25 +++++++++ app/home/[slug]/page.js | 50 +++++++++++++++++ app/page.js | 56 +++++++++++-------- 9 files changed, 168 insertions(+), 43 deletions(-) create mode 100644 app/components/ReleaseSection/ReleaseSection.jsx create mode 100644 app/components/Spinner/Spinner.jsx create mode 100644 app/home/[slug]/page.js diff --git a/app/api/home/route.js b/app/api/home/route.js index f53597d..81161b9 100644 --- a/app/api/home/route.js +++ b/app/api/home/route.js @@ -15,6 +15,8 @@ export async function GET(request) { statusId = 2; } else if (status == "announce") { statusId = 3; + } else { + return NextResponse.json({message: "Bad status"}, {status: 400}); } const data = { diff --git a/app/components/Navbar/Navbar.jsx b/app/components/Navbar/Navbar.jsx index 6f69a60..4fc026c 100644 --- a/app/components/Navbar/Navbar.jsx +++ b/app/components/Navbar/Navbar.jsx @@ -43,11 +43,11 @@ export const Navbar = () => { ]; return ( -
+
diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.jsx b/app/components/ReleaseCourusel/ReleaseCourusel.jsx index f92962a..14eb607 100644 --- a/app/components/ReleaseCourusel/ReleaseCourusel.jsx +++ b/app/components/ReleaseCourusel/ReleaseCourusel.jsx @@ -1,5 +1,5 @@ "use client"; -import { useEffect, useRef } from "react"; +import { useEffect } from "react"; import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; import Link from "next/link"; @@ -36,7 +36,9 @@ export const ReleaseCourusel = (props) => { return (
-

{props.sectionTitle}

+

+ {props.sectionTitle} +

Показать все

@@ -54,13 +56,21 @@ export const ReleaseCourusel = (props) => { key={release.id} style={{ width: "fit-content" }} > - +
+ +
); })}
-
-
+
+
diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.module.css b/app/components/ReleaseCourusel/ReleaseCourusel.module.css index 3a53a01..157046c 100644 --- a/app/components/ReleaseCourusel/ReleaseCourusel.module.css +++ b/app/components/ReleaseCourusel/ReleaseCourusel.module.css @@ -1,11 +1,13 @@ .swiper-button:global(.swiper-button-disabled) { - opacity: 0 !important; - } - -.section .swiper-button { - display: none !important; + opacity: 0 !important; } -.section:hover .swiper-button { +.section .swiper-button { + display: none !important; +} + +@media (hover: hover) { + .section:hover .swiper-button { display: flex !important; -} \ No newline at end of file + } +} diff --git a/app/components/ReleaseLink/ReleaseLink.jsx b/app/components/ReleaseLink/ReleaseLink.jsx index 6c3b70a..e10c901 100644 --- a/app/components/ReleaseLink/ReleaseLink.jsx +++ b/app/components/ReleaseLink/ReleaseLink.jsx @@ -4,7 +4,7 @@ export const ReleaseLink = (props) => { const grade = props.grade.toFixed(1); return ( -
+
{ : "bg-green-500" }`} > -

+

{grade}

-

+

{props.status.name}

{props.status.name === "Выходит" &&
-
+
{props.episodes_released && (

{`${props.episodes_released}/`}

)} @@ -47,7 +47,7 @@ export const ReleaseLink = (props) => {
}
-

+

{props.title_ru}

diff --git a/app/components/ReleaseSection/ReleaseSection.jsx b/app/components/ReleaseSection/ReleaseSection.jsx new file mode 100644 index 0000000..8e9d628 --- /dev/null +++ b/app/components/ReleaseSection/ReleaseSection.jsx @@ -0,0 +1,28 @@ + +import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; + +export const ReleaseSection = (props) => { + return ( +
+
+

+ {props.sectionTitle} +

+
+
+
+ {props.content.map((release) => { + return ( +
+ +
+ ); + })} +
+
+
+ ); +}; diff --git a/app/components/Spinner/Spinner.jsx b/app/components/Spinner/Spinner.jsx new file mode 100644 index 0000000..6dffd42 --- /dev/null +++ b/app/components/Spinner/Spinner.jsx @@ -0,0 +1,25 @@ +export const Spinner = () => { + return ( +
+
+ + Loading... +
+
+ ); +}; diff --git a/app/home/[slug]/page.js b/app/home/[slug]/page.js new file mode 100644 index 0000000..61766d2 --- /dev/null +++ b/app/home/[slug]/page.js @@ -0,0 +1,50 @@ +"use client"; +import useSWR from "swr"; +import { ReleaseSection } from "../../components/ReleaseSection/ReleaseSection"; +import { Spinner } from "../../components/Spinner/Spinner"; + +const fetcher = async (...args) => { + const res = await fetch(...args); + + if (!res.ok) { + const error = new Error("An error occurred while fetching the data."); + error.info = await res.json(); + error.status = res.status; + throw error; + } + + return res.json(); +}; + +const SectionTitleMapping = { + last: "Последние релизы", + finished: "Завершенные релизы", + ongoing: "В эфире", + announce: "Анонсированные релизы", +}; + +export default function HomeStatus({ params }) { + const { data, error, isLoading } = useSWR( + `/api/home?status=${params.slug}`, + fetcher + ); + + if (error) return
failed to load
; + if (isLoading) + return ( +
+ +
+ ); + + return ( +
+ {data && ( + + )} +
+ ); +} diff --git a/app/page.js b/app/page.js index 0d6a75b..4d9c025 100644 --- a/app/page.js +++ b/app/page.js @@ -1,45 +1,53 @@ "use client"; import useSWR from "swr"; import { ReleaseCourusel } from "./components/ReleaseCourusel/ReleaseCourusel"; +import { Spinner } from "./components/Spinner/Spinner"; const fetcher = (...args) => fetch(...args).then((res) => res.json()); function fetchReleases(status) { - const { data, error, isLoading } = useSWR( - `/api/home?status=${status}`, - fetcher - ); - return [data, error, isLoading]; + const { data } = useSWR(`/api/home?status=${status}`, fetcher); + return [data]; } export default function Home() { - const [lastReleasesData, lastReleasesError, lastReleasesIsLoading] = - fetchReleases("last"); - const [ - finishedReleasesData, - finishedReleasesError, - finishedReleasesIsLoading, - ] = fetchReleases("finished"); - const [ongoingReleasesData, ongoingReleasesError, ongoingReleasesIsLoading] = - fetchReleases("ongoing"); - const [ - announceReleasesData, - announceReleasesError, - announceReleasesIsLoading, - ] = fetchReleases("announce"); + const [lastReleasesData] = fetchReleases("last"); + const [finishedReleasesData] = fetchReleases("finished"); + const [ongoingReleasesData] = fetchReleases("ongoing"); + const [announceReleasesData] = fetchReleases("announce"); return (
- {lastReleasesData && ( - + {lastReleasesData ? ( + + ) : ( +
+ +
)} {finishedReleasesData && ( - + )} {ongoingReleasesData && ( - + )} {announceReleasesData && ( - + )}
);