Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-07 00:34:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: add release user list and release user favorite to the ReleaseLink on Index and Index Category pages

Browse source
This commit is contained in:
Kentai Radiquum 2024-07-14 14:35:02 +05:00
parent c4a9b4f91a
commit 35c79559ab
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 68 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/App.jsx
View file

@ -6,10 +6,10 @@ import { useEffect } from "react";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const App = (props) => { export const App = (props) => {
const userStore = useUserStore(); const userStore = useUserStore((state) => state);
useEffect(() => { useEffect(() => {
userStore.checkAuth(); userStore.checkAuth();
}, []) }, []);
return ( return (
<body className={`${inter.className} overflow-x-hidden`}> <body className={`${inter.className} overflow-x-hidden`}>
@ -17,4 +17,4 @@ export const App = (props) => {
{props.children} {props.children}
</body> </body>
); );
} };

4
app/components/Navbar/Navbar.jsx
View file

@ -5,7 +5,7 @@ import { useUserStore } from "@/app/store/auth";
export const Navbar = () => { export const Navbar = () => {
const pathname = usePathname(); const pathname = usePathname();
const userStore = useUserStore(); const userStore = useUserStore((state) => state);
const isNotAuthorizedStyle = "text-gray-700"; const isNotAuthorizedStyle = "text-gray-700";
const navLinks = [ const navLinks = [
@ -85,7 +85,7 @@ export const Navbar = () => {
); );
})} })}
</nav> </nav>
{userStore.user ? ( {userStore.isAuth ? (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<img src={userStore.user.avatar} alt="" className="w-8 h-8 rounded-full" /> <img src={userStore.user.avatar} alt="" className="w-8 h-8 rounded-full" />
<p>{userStore.user.login}</p> <p>{userStore.user.login}</p>

62
app/components/ReleaseLink/ReleaseLink.jsx
View file

@ -2,6 +2,20 @@ import Link from "next/link";
export const ReleaseLink = (props) => { export const ReleaseLink = (props) => {
const grade = props.grade.toFixed(1); const grade = props.grade.toFixed(1);
const profile_lists = {
// 0: "Не смотрю",
1: { name: "Смотрю", bg_color: "bg-green-500" },
2: { name: "В планах", bg_color: "bg-purple-500" },
3: { name: "Просмотрено", bg_color: "bg-blue-500" },
4: { name: "Отложено", bg_color: "bg-yellow-500" },
5: { name: "Брошено", bg_color: "bg-red-500" },
};
const profile_list_status = props.profile_list_status;
let user_list = null;
if (profile_list_status != null || profile_list_status != 0) {
user_list = profile_lists[profile_list_status];
}
return ( return (
<Link href={`/release/${props.id}`}> <Link href={`/release/${props.id}`}>
<div className="w-full aspect-video group"> <div className="w-full aspect-video group">
@ -11,22 +25,38 @@ export const ReleaseLink = (props) => {
src={props.image} src={props.image}
alt="" alt=""
/> />
<div <div className="absolute flex flex-col items-start justify-start gap-1 left-2 top-2">
className={`absolute left-2 top-2 rounded-sm ${ <div className="flex gap-1 ">
grade == 0 <div
? "hidden" className={`rounded-sm ${
: grade < 2 grade == 0
? "bg-red-500" ? "hidden"
: grade < 3 : grade < 2
? "bg-orange-500" ? "bg-red-500"
: grade < 4 : grade < 3
? "bg-yellow-500" ? "bg-orange-500"
: "bg-green-500" : grade < 4
}`} ? "bg-yellow-500"
> : "bg-green-500"
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white"> }`}
{grade} >
</p> <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
{grade}
</p>
</div>
{props.is_favorite && (
<div className="flex items-center justify-center bg-pink-500 rounded-sm">
<span className="w-6 h-full bg-white sm:w-8 sm:h-8 iconify mdi--heart"></span>
</div>
)}
</div>
{user_list && (
<div className={`rounded-sm ${user_list.bg_color}`}>
<p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
{user_list.name}
</p>
</div>
)}
</div> </div>
<div className="absolute flex flex-col items-end gap-1 top-2 right-2"> <div className="absolute flex flex-col items-end gap-1 top-2 right-2">
{props.status ? ( {props.status ? (

12
app/pages/Index.jsx
View file

@ -3,10 +3,20 @@ import useSWR from "swr";
import { ReleaseCourusel } from "@/app/components/ReleaseCourusel/ReleaseCourusel"; import { ReleaseCourusel } from "@/app/components/ReleaseCourusel/ReleaseCourusel";
import { Spinner } from "@/app/components/Spinner/Spinner"; import { Spinner } from "@/app/components/Spinner/Spinner";
const fetcher = (...args) => fetch(...args).then((res) => res.json()); const fetcher = (...args) => fetch(...args).then((res) => res.json());
import { useUserStore } from "@/app/store/auth";
export function IndexPage() { export function IndexPage() {
const userStore = useUserStore((state) => state);
const token = userStore.token;
function useFetchReleases(status) { function useFetchReleases(status) {
const { data } = useSWR(`/api/home?status=${status}`, fetcher); let url;
url = `/api/home?status=${status}`;
if (token) {
url += `&token=${token}`;
}
const { data } = useSWR(url, fetcher);
return [data]; return [data];
} }

6
app/pages/IndexCategory.jsx
View file

@ -4,6 +4,7 @@ import { ReleaseSection } from "@/app/components/ReleaseSection/ReleaseSection";
import { Spinner } from "@/app/components/Spinner/Spinner"; import { Spinner } from "@/app/components/Spinner/Spinner";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useScrollPosition } from "@/app/hooks/useScrollPosition"; import { useScrollPosition } from "@/app/hooks/useScrollPosition";
import { useUserStore } from "../store/auth";
const fetcher = async url => { const fetcher = async url => {
const res = await fetch(url); const res = await fetch(url);
@ -19,8 +20,13 @@ const fetcher = async url => {
}; };
export function IndexCategoryPage(props) { export function IndexCategoryPage(props) {
const userStore = useUserStore((state) => state);
const token = userStore.token;
const getKey = (pageIndex, previousPageData) => { const getKey = (pageIndex, previousPageData) => {
if (previousPageData && !previousPageData.content.length) return null; if (previousPageData && !previousPageData.content.length) return null;
if (token) {
return `/api/home?status=${props.slug}&page=${pageIndex}&token=${token}`;
}
return `/api/home?status=${props.slug}&page=${pageIndex}`; return `/api/home?status=${props.slug}&page=${pageIndex}`;
}; };