From 82e38f02b42331870b301d3c7d0d1d70973f6664 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Wed, 14 Aug 2024 16:24:03 +0500 Subject: [PATCH] feat: add collection favorite button and delete button if own collection fix: private collection loading fix: wrong lists bar percentages --- app/collection/[id]/page.tsx | 8 +- .../CollectionInfo/CollectionInfo.Basics.tsx | 2 +- .../CollectionInfo/CollectionInfoControls.tsx | 72 ++++++++++++++++++ .../CollectionInfo/CollectionInfoLists.tsx | 4 +- .../ReleaseSection/ReleaseSection.tsx | 6 +- app/pages/ViewCollection.tsx | 74 ++++++++++++------- 6 files changed, 131 insertions(+), 35 deletions(-) create mode 100644 app/components/CollectionInfo/CollectionInfoControls.tsx diff --git a/app/collection/[id]/page.tsx b/app/collection/[id]/page.tsx index b29a028..0399d30 100644 --- a/app/collection/[id]/page.tsx +++ b/app/collection/[id]/page.tsx @@ -13,13 +13,15 @@ export async function generateMetadata( const previousOG = (await parent).openGraph; return { - title: "коллекция - " + collection.collection.title, - description: collection.collection.description, + title: collection.collection + ? "коллекция - " + collection.collection.title + : "Приватная коллекция", + description: collection.collection && collection.collection.description, openGraph: { ...previousOG, images: [ { - url: collection.collection.image, // Must be an absolute URL + url: collection.collection && collection.collection.image, // Must be an absolute URL width: 600, height: 800, }, diff --git a/app/components/CollectionInfo/CollectionInfo.Basics.tsx b/app/components/CollectionInfo/CollectionInfo.Basics.tsx index 6bc0d7b..6513735 100644 --- a/app/components/CollectionInfo/CollectionInfo.Basics.tsx +++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx @@ -14,7 +14,7 @@ export const CollectionInfoBasics = (props: { updateDate: number; }) => { return ( - +

создана: {unixToDate(props.creationDate, "full")}

diff --git a/app/components/CollectionInfo/CollectionInfoControls.tsx b/app/components/CollectionInfo/CollectionInfoControls.tsx new file mode 100644 index 0000000..38324ef --- /dev/null +++ b/app/components/CollectionInfo/CollectionInfoControls.tsx @@ -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 ( + + + {props.isPrivate && ( +

Это приватная коллекция, доступ к ней имеете только вы

+ )} + {userStore.user && userStore.user.id == props.authorId && ( +
+ + +
+ )} + + ); +}; diff --git a/app/components/CollectionInfo/CollectionInfoLists.tsx b/app/components/CollectionInfo/CollectionInfoLists.tsx index bcd64a7..e65b8c3 100644 --- a/app/components/CollectionInfo/CollectionInfoLists.tsx +++ b/app/components/CollectionInfo/CollectionInfoLists.tsx @@ -9,7 +9,7 @@ export const CollectionInfoLists = (props: { total: number; }) => { return ( - +
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx index b619a46..c1642db 100644 --- a/app/components/ReleaseSection/ReleaseSection.tsx +++ b/app/components/ReleaseSection/ReleaseSection.tsx @@ -1,6 +1,9 @@ import { ReleaseLink } from "../ReleaseLink/ReleaseLink"; -export const ReleaseSection = (props: {sectionTitle?: string, content: any}) => { +export const ReleaseSection = (props: { + sectionTitle?: string; + content: any; +}) => { return (
{props.sectionTitle && ( @@ -19,6 +22,7 @@ export const ReleaseSection = (props: {sectionTitle?: string, content: any}) =>
); })} + {props.content.length == 1 &&
}
diff --git a/app/pages/ViewCollection.tsx b/app/pages/ViewCollection.tsx index f724c0f..2852bae 100644 --- a/app/pages/ViewCollection.tsx +++ b/app/pages/ViewCollection.tsx @@ -12,6 +12,7 @@ import { ReleaseSection } from "#/components/ReleaseSection/ReleaseSection"; import { CollectionInfoBasics } from "#/components/CollectionInfo/CollectionInfo.Basics"; import { CollectionInfoLists } from "#/components/CollectionInfo/CollectionInfoLists"; +import { CollectionInfoControls } from "#/components/CollectionInfo/CollectionInfoControls"; const fetcher = async (url: string) => { const res = await fetch(url); @@ -81,37 +82,54 @@ export const ViewCollectionPage = (props: { id: number }) => { return (
{collectionInfoIsLoading ? ( - +
+ +
) : ( - <> -
- - {userStore.token && !isLoading && ( - +
+ + {userStore.token && !isLoading && ( +
+ + +
+ )} +
+ {isLoading || !content || !isLoadingEnd ? ( +
+ +
+ ) : ( + )} -
- {isLoading || !content || !isLoadingEnd ? ( - - ) : ( - - )} - + + ) )}
);