20-Eliminar Película - Paso 20

 Objetivo

Implementar la funcionalidad para eliminar una película de nuestra aplicación de películas.

Requisitos Previos

  • Tener implementado el listado de películas

  • Tener implementada la edición de películas

  • Servicio MovieService con método para eliminar películas

Pasos para Implementar la Eliminación

Paso 1: Crear el método para eliminar

En el archivo movie.js (o el componente de edición de película), justo antes del return, agregamos el método deleteMovie:

javascript
// Método para eliminar una película
const deleteMovie = () => {
  // Pedir confirmación al usuario
  const confirmDelete = window.confirm("¿Seguro que deseas eliminar esta película?");
  
  // Si el usuario cancela, no hacer nada
  if (!confirmDelete) return;
  
  // Llamar al servicio para eliminar la película
  MovieService.delete(movie.id)
    .then(() => {
      // Navegar de vuelta al listado de películas
      props.history.push('/movies');
      
      // Mostrar mensaje de éxito (opcional)
      alert("Película eliminada correctamente");
    })
    .catch((error) => {
      // Manejar errores
      console.error("Error al tratar de eliminar la película:", error);
      alert("Hubo un error al eliminar la película");
    });
};

Paso 2: Agregar el botón de eliminar en la interfaz

En la sección de botones (junto al botón de "Actualizar Película"), agregamos:

jsx
{/* Botón para eliminar la película */}
<button 
  className="btn btn-danger mr-2"
  onClick={deleteMovie}
>
  Eliminar Película
</button>

{/* Botón para actualizar (ya existente) */}
<button 
  className="btn btn-primary"
  onClick={handleSubmit}
>
  Actualizar Película
</button>

Paso 3: CSS para el botón (opcional)

css
/* Estilos para el botón de eliminar */
.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

/* Espaciado entre botones */
.mr-2 {
  margin-right: 0.5rem;
}

Paso 4: Método en el servicio (MovieService)

Asegurarnos que el servicio tenga el método delete:

javascript
// En MovieService.js
class MovieService {
  // ... otros métodos ...
  
  static delete(id) {
    return fetch(`${API_URL}/movies/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        // Agregar token de autenticación si es necesario
      }
    });
  }
}

Explicación del Código

1. Confirmación del Usuario

javascript
const confirmDelete = window.confirm("¿Seguro que deseas eliminar esta película?");

  • Usamos window.confirm() para mostrar un diálogo de confirmación

  • Esto evita eliminaciones accidentales

  • Si el usuario hace clic en "Cancelar", el método retorna inmediatamente

2. Llamada al Servicio

javascript
MovieService.delete(movie.id)

  • Enviamos solo el ID de la película al servicio

  • El servicio construye la URL completa: /movies/{id}

3. Navegación después de eliminar

javascript
props.history.push('/movies');

  • Después de eliminar exitosamente, redirigimos al usuario al listado

  • Esto permite ver que la película ya no aparece en la lista

4. Manejo de Errores

javascript
.catch((error) => {
  console.error("Error al tratar de eliminar la película:", error);
  alert("Hubo un error al eliminar la película");
});

  • Capturamos cualquier error que ocurra durante la eliminación

  • Informamos al usuario sobre el problema

Ejemplo Completo del Componente

jsx
import React, { useState, useEffect } from 'react';
import MovieService from '../services/MovieService';
import { useParams, useHistory } from 'react-router-dom';

function MovieEdit() {
  const { id } = useParams();
  const history = useHistory();
  const [movie, setMovie] = useState({
    title: '',
    director: '',
    year: '',
    genre: '',
    rating: ''
  });

  // Cargar datos de la película
  useEffect(() => {
    MovieService.getById(id)
      .then(response => setMovie(response.data))
      .catch(error => console.error("Error cargando película:", error));
  }, [id]);

  // Método para eliminar
  const deleteMovie = () => {
    const confirmDelete = window.confirm("¿Seguro que deseas eliminar esta película?");
    if (!confirmDelete) return;
    
    MovieService.delete(id)
      .then(() => {
        history.push('/movies');
        alert("Película eliminada correctamente");
      })
      .catch((error) => {
        console.error("Error eliminando película:", error);
        alert("Error al eliminar la película");
      });
  };

  // Método para actualizar
  const handleSubmit = (e) => {
    e.preventDefault();
    MovieService.update(id, movie)
      .then(() => history.push('/movies'))
      .catch(error => console.error("Error actualizando:", error));
  };

  return (
    <div className="container mt-4">
      <h2>Editar Película</h2>
      <form onSubmit={handleSubmit}>
        {/* Campos del formulario */}
        <div className="form-group">
          <label>Título</label>
          <input 
            type="text" 
            className="form-control"
            value={movie.title}
            onChange={(e) => setMovie({...movie, title: e.target.value})}
          />
        </div>
        
        {/* Más campos... */}
        
        <div className="mt-4">
          <button 
            type="button" 
            className="btn btn-danger mr-2"
            onClick={deleteMovie}
          >
            Eliminar Película
          </button>
          
          <button 
            type="submit" 
            className="btn btn-primary"
          >
            Actualizar Película
          </button>
        </div>
      </form>
    </div>
  );
}

export default MovieEdit;

Buenas Prácticas

1. Confirmación Doble

  • Siempre pedir confirmación antes de eliminar

  • Considerar usar un modal más elaborado en lugar de window.confirm()

2. Feedback al Usuario

  • Mostrar mensajes de éxito/error

  • Considerar usar notificaciones toast en lugar de alert()

3. Estados de Carga

javascript
const [isDeleting, setIsDeleting] = useState(false);

const deleteMovie = () => {
  // ... confirmación ...
  setIsDeleting(true);
  
  MovieService.delete(id)
    .then(() => {
      // ... éxito ...
    })
    .catch((error) => {
      // ... error ...
    })
    .finally(() => {
      setIsDeleting(false);
    });
};

4. Accesibilidad

jsx
<button
  aria-label="Eliminar película"
  disabled={isDeleting}
>
  {isDeleting ? 'Eliminando...' : 'Eliminar'}
</button>

Resumen

Hemos completado el CRUD completo de películas:

  • ✅ Create - Crear nueva película

  • ✅ Read - Leer/listar películas

  • ✅ Update - Actualizar película existente

  • ✅ Delete - Eliminar película

La funcionalidad de eliminar incluye:

  1. Botón en la vista de edición

  2. Confirmación del usuario

  3. Llamada al servicio API

  4. Redirección al listado

  5. Manejo de errores

Recursos Adicionales

¡Felicidades! Has completado el módulo de operaciones CRUD para películas. Este patrón se puede aplicar a cualquier entidad en tus aplicaciones React.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Axios para Principiantes - Guía Paso a Paso

  Axios para Principiantes - Guía Paso a Paso 📚  ¿Qué es Axios? Axios  es como un  "mensajero"  entre tu aplicación web y un servidor. Imagina que tu app necesita pedir información (como una lista de películas) a un servidor en internet - Axios se encarga de enviar esa "carta" y traer la "respuesta". 🎯  ¿Por qué usar Axios? (Para principiantes) Sin Axios: text Tu App → "Oye servidor, dame películas" ❌ (no sabe cómo comunicarse) Con Axios: text Tu App → Axios → "GET /películas" → Servidor → ✓ Películas recibidas ✅ Ventajas: Más fácil que el método nativo de JavaScript (fetch) Mejor manejo de errores Funciona en todos los navegadores Soporte para promesas (async/await) 🚀  PASO 1: INSTALACIÓN (La Parte Fácil) ¿Qué es NPM? NPM es como una  "tienda de aplicaciones"  para programadores. En lugar de ir a una tienda, escribes comandos en la terminal. Pasos concretos: Abre la terminal  (Command Prompt, Terminal, o la terminal de VS ...
Leer más

15-Tutorial: Crear Película en React con useState

  Introducción ¡Excelente! Ya tienes todos los métodos configurados para conectar tu aplicación React con el backend. Ahora vamos a implementar la funcionalidad para crear películas, lo que nos permitirá tener una lista inicial de películas al regresar al home. Paso 1: Importaciones necesarias Vamos al componente  AddMovie.js  y realizamos las importaciones: jsx import React , { useState } from 'react' ; import MovieService from '../services/movieService' ; Paso 2: Estado inicial de la película Dentro del componente funcional, antes del return, definimos el estado inicial: jsx const AddMovie = ( ) => { // Estado inicial de la película const initialMovieState = { title : '' , director : '' , genre : '' , synopsis : '' , year : 0 , rating : 0 } ; // Estado para manejar la película actual const [ movie , setMovie ] = useState ( initialMovieState ) ; // Estado par...
Leer más

Tutorial de React para Principiantes

  Tutorial de React para Principiantes 📚 ¿Qué es React? React es una  biblioteca de JavaScript  para construir interfaces de usuario. Piensa en ella como una herramienta que te ayuda a crear páginas web dinámicas de manera organizada. 🧩 Conceptos Básicos de React 1.  Componentes Los componentes son como  bloques de construcción  de tu aplicación. Cada parte de tu página web puede ser un componente: javascript // Un componente básico function Saludo ( ) { return < h1 > ¡Hola Mundo ! < / h1 > ; } 2.  JSX Es una extensión de JavaScript que parece HTML pero se escribe dentro de JavaScript: javascript // Esto es JSX const elemento = < h1 > Hola , mundo ! < / h1 > ; 3.  Props (Propiedades) Son como  parámetros  que le pasas a un componente: javascript function Saludo ( props ) { return < h1 > Hola , { props . nombre } ! < / h1 > ; } // Uso: <Saludo nombre="Juan" /> 4.  Esta...
Leer más