feat: title y artist edit

resources/js/Pages/Songs/Index.tsx

@@ -1,15 +1,17 @@
 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 } from '@inertiajs/react';
+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<Cancion>({} as Cancion);
 
   useEffect(() => {
@@ -62,6 +64,27 @@ export default function Index({ songs }: { songs: Cancion[] }) {
       });
   }
 
+  function handleUpdate(event: FormEvent<HTMLFormElement>) {
+    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 (
     <Authenticated
       header={
@@ -106,7 +129,13 @@ export default function Index({ songs }: { songs: Cancion[] }) {
                       {song.path}
                     </td>
                     <td className="whitespace-nowrap px-6 py-4 text-sm">
-                      <button className="mr-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                      <button
+                        className="mr-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+                        onClick={() => {
+                          setcan(song);
+                          setEdit(true);
+                        }}
+                      >
                         Editar
                       </button>
                       <button
@@ -137,6 +166,12 @@ export default function Index({ songs }: { songs: Cancion[] }) {
           cancion={selcan}
           remove={handleRemove}
         />
+        <ModalEditarCancion
+          song={selcan}
+          showEditModal={showEdit}
+          setShowEditModal={setEdit}
+          UpdateCallback={handleUpdate}
+        />
       </div>
     </Authenticated>
   );