17 - Mostrar Todas las Películas

 

Introducción

En este tutorial vamos a construir la interfaz para visualizar todas las películas disponibles en nuestra aplicación. Implementaremos una tabla que muestre las películas obtenidas de nuestro servicio API y prepararemos la estructura para mostrar detalles al seleccionar una película.

---

Paso 1: Configuración inicial del componente

1.1 Cerrar archivos innecesarios

Cierra los tres archivos que tienes abiertos y abre el archivo llamado MovieList.js o similar. También puedes ocultar la barra de navegación para tener más espacio de trabajo.

1.2 Imports necesarios

javascript

import React, { useState, useEffect } from 'react';
import MovieService from '../services/movie.service';

Explicación:

• useState: Hook para manejar el estado de nuestro componente.

• useEffect: Hook para ejecutar efectos secundarios (como llamadas HTTP) después del renderizado.

• MovieService: Servicio que contiene los métodos para interactuar con nuestra API de películas.

---

Paso 2: Configurar el estado y efectos

2.1 Estado para las películas

javascript

const [movies, setMovies] = useState([]);

• Inicializamos el estado movies como un arreglo vacío.

• setMovies es la función para actualizar este estado.

2.2 Efecto para cargar las películas

javascript

useEffect(() => {
  fetchMovies();
}, []);

Explicación de useEffect:

• useEffect es un hook que combina funcionalidades de los métodos del ciclo de vida de React (como componentDidMount, componentDidUpdate, etc.).

• El arreglo vacío [] como segundo parámetro indica que este efecto se ejecutará solo una vez, después del primer renderizado (similar a componentDidMount).

• Ideal para hacer llamadas HTTP que solo necesitan ejecutarse al inicio.

---

Paso 3: Método para obtener películas

3.1 Implementar fetchMovies

javascript

const fetchMovies = async () => {
  try {
    const response = await MovieService.getAll();
    setMovies(response.data);
    console.log(response.data); // Para referencia y desarrollo
  } catch (error) {
    console.error('Ocurrió un error:', error);
  }
};

3.2 Método para actualizar manualmente

javascript

const refreshList = () => {
  fetchMovies();
};

• Este método nos permitirá actualizar la lista manualmente cuando sea necesario.

---

Paso 4: Estructura de la interfaz

4.1 División en dos columnas

javascript

return (
  <div className="row">
    <div className="col-md-6">
      {/* Lista de películas */}
    </div>
    <div className="col-md-6">
      {/* Detalle de película seleccionada */}
    </div>
  </div>
);

Explicación de las clases Bootstrap:

• row: Contenedor principal de fila.

• col-md-6: Divide el espacio en 2 columnas iguales en dispositivos medianos y superiores.

• Bootstrap divide el ancho en 12 columnas, por lo que col-md-6 ocupa la mitad (6/12).

4.2 Título de la sección

javascript

<div className="col-md-6">
  <h4>Películas</h4>
  {/* Tabla irá aquí */}
</div>

---

Paso 5: Implementar la tabla

5.1 Estructura básica de la tabla

javascript

<table className="table table-striped table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Título</th>
      <th>Año</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
    {/* Filas de películas dinámicas */}
  </tbody>
</table>

Nota importante: En JSX usamos className en lugar de class.

5.2 Renderizar películas dinámicamente

javascript

<tbody>
  {movies && movies.map((movie, index) => (
    <tr key={index}>
      <td>{movie.id}</td>
      <td>{movie.title}</td>
      <td>{movie.year}</td>
      <td>
        {/* Botones de acciones irán aquí */}
      </td>
    </tr>
  ))}
</tbody>

Explicación del map:

• movies &&: Verifica que movies exista antes de intentar mapearlo.

• movies.map(): Itera sobre cada película en el arreglo.

• key={index}: Propiedad necesaria para ayudar a React a identificar qué elementos han cambiado.

---

Paso 6: Código completo del componente

javascript

import React, { useState, useEffect } from 'react';
import MovieService from '../services/movie.service';

const MovieList = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetchMovies();
  }, []);

  const fetchMovies = async () => {
    try {
      const response = await MovieService.getAll();
      setMovies(response.data);
      console.log(response.data);
    } catch (error) {
      console.error('Ocurrió un error:', error);
    }
  };

  const refreshList = () => {
    fetchMovies();
  };

  return (
    <div className="row">
      <div className="col-md-6">
        <h4>Películas</h4>
        <table className="table table-striped table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>Título</th>
              <th>Año</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {movies && movies.map((movie, index) => (
              <tr key={index}>
                <td>{movie.id}</td>
                <td>{movie.title}</td>
                <td>{movie.year}</td>
                <td>
                  {/* Botones para editar, eliminar y ver detalles */}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="col-md-6">
        {/* Aquí irá el detalle de la película seleccionada */}
        <h4>Detalle de Película</h4>
        <p>Selecciona una película para ver sus detalles</p>
      </div>
    </div>
  );
};

export default MovieList;

---

Paso 7: Resultado esperado

Al ejecutar la aplicación deberías ver:

1. Una tabla con todas las películas obtenidas de la API.

2. Columnas para ID, Título, Año y Acciones.

3. Cada película se muestra en una fila diferente.

4. La interfaz dividida en dos secciones (lista y detalle).

---

Próximos pasos

En el siguiente tutorial:

• Implementaremos la funcionalidad para seleccionar una película.

• Mostraremos los detalles de la película seleccionada en la columna derecha.

• Agregaremos botones de acción (editar, eliminar, ver detalles).

---

Consejos y buenas prácticas

1. Manejo de errores: Siempre incluye bloques try-catch en llamadas asíncronas.

2. Validaciones: Verifica que los datos existan antes de renderizarlos.

3. Claves únicas: Usa key en elementos de listas para optimizar el rendimiento.

4. Separación de preocupaciones: Mantén la lógica de negocio en servicios separados.

---

¡Excelente! Ahora tienes una interfaz funcional para mostrar todas las películas. En el próximo vídeo implementaremos la interacción para ver los detalles de cada película