18 - Mostrar Película (Detalle al hacer clic)

 

Objetivo

Implementar la funcionalidad para mostrar los detalles de una película cuando se hace clic en un botón específico.

Paso a Paso

1. Importar useState y Link de React

jsx
import { useState } from 'react';
import { Link } from 'react-router-dom';

2. Crear estados para la película activa

jsx
const [activeMovie, setActiveMovie] = useState(null);
const [activeIndex, setActiveIndex] = useState(-1);

3. Crear función para seleccionar película activa

jsx
const setActiveMovieHandler = (movie, index) => {
    setActiveMovie(movie);
    setActiveIndex(index);
};

4. Agregar botón en cada película para mostrar detalles

En el componente de lista de películas, agregar un botón con icono:

jsx
<button 
    onClick={() => setActiveMovieHandler(movie, index)}
    className="btn btn-sm btn-info"
>
    <i className="bi bi-eye"></i>
</button>

5. Implementar panel de detalles con operador ternario

jsx
<div className="detail-panel">
    {activeMovie ? (
        <div className="movie-detail">
            {/* Contenido cuando hay película seleccionada */}
        </div>
    ) : (
        <div className="no-selection">
            <h3>Primero selecciona una película</h3>
            <p>Haz clic en el ícono de ojo de cualquier película para ver sus detalles aquí</p>
        </div>
    )}
</div>

6. Mostrar información detallada de la película

Cuando hay una película activa, mostrar:

jsx
<div className="movie-detail">
    <h2>{activeMovie.title}</h2>
    
    <div className="movie-info">
        <div className="info-row">
            <label>Año:</label>
            <span>{activeMovie.year}</span>
        </div>
        
        <div className="info-row">
            <label>Sinopsis:</label>
            <p>{activeMovie.synopsis}</p>
        </div>
        
        <div className="movie-cover">
            <img 
                src={activeMovie.cover} 
                alt={activeMovie.title}
                className="img-fluid"
            />
        </div>
        
        <div className="actions">
            <Link 
                to={`/movies/${activeMovie.id}/edit`}
                className="btn btn-warning"
            >
                <i className="bi bi-pencil"></i> Editar
            </Link>
        </div>
    </div>
</div>

7. Estilos CSS básicos

css
.detail-panel {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    min-height: 400px;
}

.movie-detail h2 {
    color: #333;
    margin-bottom: 20px;
}

.info-row {
    margin-bottom: 15px;
}

.info-row label {
    font-weight: bold;
    margin-right: 10px;
    color: #555;
}

.movie-cover {
    margin: 20px 0;
}

.movie-cover img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.no-selection {
    text-align: center;
    padding: 50px 20px;
    color: #666;
}

.no-selection h3 {
    margin-bottom: 10px;
}

.actions {
    margin-top: 20px;
}

Código completo del componente:

jsx
import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const MovieList = ({ movies }) => {
    const [activeMovie, setActiveMovie] = useState(null);
    const [activeIndex, setActiveIndex] = useState(-1);

    const setActiveMovieHandler = (movie, index) => {
        setActiveMovie(movie);
        setActiveIndex(index);
    };

    return (
        <div className="container">
            <div className="row">
                {/* Lista de películas */}
                <div className="col-md-6">
                    <h2>Lista de Películas</h2>
                    {movies.map((movie, index) => (
                        <div key={movie.id} className="movie-item">
                            <h3>{movie.title}</h3>
                            <button 
                                onClick={() => setActiveMovieHandler(movie, index)}
                                className="btn btn-sm btn-info"
                            >
                                <i className="bi bi-eye"></i> Ver detalles
                            </button>
                        </div>
                    ))}
                </div>
                
                {/* Panel de detalles */}
                <div className="col-md-6">
                    <div className="detail-panel">
                        {activeMovie ? (
                            <div className="movie-detail">
                                <h2>{activeMovie.title}</h2>
                                
                                <div className="movie-info">
                                    <div className="info-row">
                                        <label>Año:</label>
                                        <span>{activeMovie.year}</span>
                                    </div>
                                    
                                    <div className="info-row">
                                        <label>Sinopsis:</label>
                                        <p>{activeMovie.synopsis}</p>
                                    </div>
                                    
                                    <div className="movie-cover">
                                        <img 
                                            src={activeMovie.cover} 
                                            alt={activeMovie.title}
                                            className="img-fluid"
                                        />
                                    </div>
                                    
                                    <div className="actions">
                                        <Link 
                                            to={`/movies/${activeMovie.id}/edit`}
                                            className="btn btn-warning"
                                        >
                                            <i className="bi bi-pencil"></i> Editar
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ) : (
                            <div className="no-selection">
                                <h3>Primero selecciona una película</h3>
                                <p>Haz clic en el ícono de ojo de cualquier película para ver sus detalles aquí</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MovieList;

Resumen

  1. Estados: Creamos dos estados para controlar la película activa y su índice

  2. Función handler: Implementamos una función que actualiza los estados cuando se hace clic

  3. Botón de acción: Agregamos un botón en cada película que llama al handler

  4. Panel condicional: Usamos un operador ternario para mostrar detalles o mensaje de selección

  5. Información detallada: Desplegamos todos los datos de la película seleccionada

  6. Enlace de edición: Proporcionamos un botón para editar la película actual

Próximos pasos

En el siguiente tutorial implementaremos la funcionalidad para editar películas existentes utilizando el formulario que ya tenemos creado.

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