import BotonAdd from '@/Components/BotonAdd'; import ModalAñadirCancion from '@/Components/ModalAñadirCancion'; import ModalEditarCancion from '@/Components/ModalEditarCancion'; import ModalRemoveCancion from '@/Components/ModalRemoveCancion'; import Authenticated from '@/Layouts/AuthenticatedLayout'; import { Cancion } from '@/types/types'; import { Head, router } from '@inertiajs/react'; import axios from 'axios'; import { FormEvent, useEffect, useState } from 'react'; export default function Index({ songs }: { songs: Cancion[] }) { const [showaddmodal, setshowmodal] = useState(false); const [showRemove, setRemove] = useState(false); const [showEdit, setEdit] = useState(false); const [selcan, setcan] = useState({} as Cancion); useEffect(() => { const handleKeyPress = (event: KeyboardEvent) => { if (event.ctrlKey && event.key === 'k') { event.preventDefault(); setshowmodal(true); } }; window.addEventListener('keydown', handleKeyPress); return () => { window.removeEventListener('keydown', handleKeyPress); }; }, []); function addcancion(event: FormEvent): void { event.preventDefault(); const formData = new FormData(event.currentTarget); axios .post('/canciones', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }) .then((response: { data: string }) => { console.log('Song added successfully', response.data); router.reload(); setshowmodal(false); }) .catch(() => { setshowmodal(false); }); } function handleRemove(e: FormEvent) { e.preventDefault(); axios .delete(`/canciones/${selcan.id}`) .then(() => { setcan({} as Cancion); setRemove(false); router.reload(); }) .catch((error) => { console.error('Error removing song:', error); setRemove(false); }); } function handleUpdate(event: FormEvent) { event.preventDefault(); const formData = new FormData(event.currentTarget); const title = formData.get('title'); const artist = formData.get('artist'); axios .put(`/canciones/${selcan.id}`, { title: title, artist: artist, }) .then(() => { setEdit(false); router.reload(); }) .catch((error) => { console.error('Error actualizando datos de la cancion', error); setEdit(false); }); } return ( Crud Canciones } >
{songs.data.length === 0 ? (

No hay canciones cargadas para tu usuario. Quiere Añadir una? Aprete{' '}
Ctrl +{' '} k

) : (
{songs.data.map((song: Cancion) => ( ))}
Nombre Artista path Acciones
{song.title} {song.artist} {song.path}
)}
); }