Fitur Delete Collection pada Anime - CuyAnimeList

[idmaja]

`"use client"

import { Archive, Trash } from '@phosphor-icons/react/dist/ssr'
import React, { useState, useEffect } from 'react'

const CollectionButton = ({ anime_mal_id, user_email, anime_image, anime_title }) => {
const [isInCollection, setIsInCollection] = useState(false)
const [loading, setLoading] = useState(true)

useEffect(() => {
const checkCollectionStatus = async () => {
try {
const response = await fetch(/api/v1/collection?anime_mal_id=${anime_mal_id}&user_email=${user_email})
const result = await response.json()
if (result.status === 200) {
setIsInCollection(result.isInCollection)
}
} catch (error) {
console.error("Error fetching collection status:", error)
} finally {
setLoading(false)
}
}

checkCollectionStatus()

}, [anime_mal_id, user_email])

const handleCollection = async(event) => {
event.preventDefault()

const data = {anime_mal_id, user_email, anime_image, anime_title}

const response = await fetch('/api/v1/collection', {
    method: "POST",
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})

const collection = await response.json()
if (collection.status === 200) {
    setIsInCollection(true)
}

}

const handleDelete = async(event) => {
event.preventDefault()

const data = {anime_mal_id, user_email}

const response = await fetch('/api/v1/collection', {
    method: "DELETE",
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})

const result = await response.json()
if (result.status === 200) {
    setIsInCollection(false)
}

}

if (loading) {
return

Loading...

}

return (
<>
{isInCollection ? (

REMOVE FROM COLLECTION

) : (

ADD TO COLLECTION

)}
</>
)
}

export default CollectionButton
`

ini tombol delete nya kenapa ga keluar yak?

[idmaja]

sudah bisa ges terima kasih