Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-30 18:09:40 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add collection favorite button and delete button if own collection

Browse source 
fix: private collection loading
fix: wrong lists bar percentages
This commit is contained in:
Kentai Radiquum 2024-08-14 16:24:03 +05:00
parent 9a5d1eb6bd
commit 82e38f02b4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 131 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/components/CollectionInfo/CollectionInfo.Basics.tsx
View file

@ -14,7 +14,7 @@ export const CollectionInfoBasics = (props: {
updateDate: number;
}) => {
return (
<Card className="w-full max-w-full lg:max-w-[50%]">
<Card className="flex-1 w-full">
<div className="flex flex-col items-end justify-between sm:items-center sm:flex-row">
<div className="flex flex-col gap-1">
<p>создана: {unixToDate(props.creationDate, "full")}</p>

72
app/components/CollectionInfo/CollectionInfoControls.tsx Normal file
View file

@ -0,0 +1,72 @@
"use client";
import { Card, Button } from "flowbite-react";
import { useState } from "react";
import { useUserStore } from "#/store/auth";
import { ENDPOINTS } from "#/api/config";
import { useRouter } from "next/navigation";
export const CollectionInfoControls = (props: {
isFavorite: boolean;
id: number;
authorId: number;
isPrivate: boolean;
}) => {
const [isFavorite, setIsFavorite] = useState(props.isFavorite);
const userStore = useUserStore();
const router = useRouter();
async function _addToFavorite() {
if (userStore.user) {
setIsFavorite(!isFavorite);
if (isFavorite) {
fetch(
`${ENDPOINTS.collection.favoriteCollections}/delete/${props.id}?token=${userStore.token}`
);
} else {
fetch(
`${ENDPOINTS.collection.favoriteCollections}/add/${props.id}?token=${userStore.token}`
);
}
}
}
async function _deleteCollection() {
if (userStore.user) {
fetch(
`${ENDPOINTS.collection.delete}/${props.id}?token=${userStore.token}`
);
router.push("/collections");
}
}
return (
<Card className="w-full h-fit ">
<Button color={"blue"} onClick={() => _addToFavorite()}>
<span
className={`iconify w-6 h-6 mr-2 ${
isFavorite ? "mdi--heart" : "mdi--heart-outline"
}`}
></span>
{!isFavorite ? "Добавить в избранное" : "Убрать из избранного"}
</Button>
{props.isPrivate && (
<p>Это приватная коллекция, доступ к ней имеете только вы</p>
)}
{userStore.user && userStore.user.id == props.authorId && (
<div className="flex flex-wrap gap-2">
<Button color={"blue"} className="w-full sm:max-w-64">
<span className={`iconify w-6 h-6 mr-2 mdi--pencil`}></span>{" "}
Редактировать
</Button>
<Button
color={"red"}
className="w-full sm:max-w-64"
onClick={() => _deleteCollection()}
>
<span className={`iconify w-6 h-6 mr-2 mdi--trash`}></span> Удалить
</Button>
</div>
)}
</Card>
);
};

4
app/components/CollectionInfo/CollectionInfoLists.tsx
View file

@ -9,7 +9,7 @@ export const CollectionInfoLists = (props: {
total: number;
}) => {
return (
<Card className="w-full max-w-full lg:max-w-[48%] h-fit ">
<Card className="w-full h-fit ">
<div
className="flex w-full h-8 overflow-hidden rounded-md"
style={
@ -20,7 +20,7 @@ export const CollectionInfoLists = (props: {
"--watched-percent": `calc(var(--width-of-one) * (${props.completed} / ${props.total} * 100%))`,
"--delayed-percent": `calc(var(--width-of-one) * (${props.delayed} / ${props.total} * 100%))`,
"--abandoned-percent": `calc(var(--width-of-one) * (${props.abandoned} / ${props.total} * 100%))`,
"--no-list-percent": `calc(var(--width-of-one) * (${props.total - (props.watching - props.planned - props.completed - props.delayed - props.abandoned)} / ${props.total} * 100%))`,
"--no-list-percent": `calc(var(--width-of-one) * (${props.total - (props.watching + props.planned + props.completed + props.delayed + props.abandoned)} / ${props.total} * 100%))`,
} as React.CSSProperties
}
>