Após remover as informações dos filmes do arquivo index da pasta MovieSection os filmes sumiram. Seguem os arquivos:
index.tsx da pasta MovieSection
import React, { useEffect, useState } from 'react';
import styles from './MovieSection.module.css';
import Fieldset from '../Fieldset';
import InputText from '../InputText';
import { FaSearch } from 'react-icons/fa';
import Button from '../button/index';
import MovieList from '../MovieList';
import type { Movie } from '../../types';
import { getMovies } from '../../API';
const MovieSection = () => {
const [movies, setMovies] = useState<Movie[]>([]);
const fetchMovies = async () => {
try {
const movies = await getMovies();
setMovies(movies);
} catch (err) {
console.error("Erro ao buscar filmes" + err)
}
};
useEffect (() => {
fetchMovies();
});
return (
<main>
<section className={styles.container}>
<Fieldset variant='secondary'>
<InputText placeholder='Buscar filme...'/>
<Button variant='icon'>
<FaSearch/>
</Button>
</Fieldset>
<h1 className={styles.titulo}>Em cartaz</h1>
<MovieList movies={movies}/>
</section>
</main>
);
};
export default MovieSection
db.json
{
"movies": [
{
"id": 1,
"src": "/capas_de_filmes/Card - Amanhecer.png",
"alt": "Imagem do filme Amanhecer",
"titulo": "Amanhecer",
"categoria": "2D",
"censura": "Livre",
"genero": "Romance",
"duracao": 90
},
{
"id": 2,
"src": "/capas_de_filmes/Card - Amigo da sombra.png",
"alt": "Imagem do filme Amigo da sombra",
"titulo": "Amigo da sombra",
"categoria": "2D",
"censura": "12 anos",
"genero": "Suspense",
"duracao": 110
},
{
"id": 3,
"src": "/capas_de_filmes/Card - Amigos do bosque mágico.png",
"alt": "Imagem do filme Amigo do bosque mágico",
"titulo": "Amigo do bosque mágico",
"categoria": "2D",
"censura": "Livre",
"genero": "Animação",
"duracao": 60
},
{
"id": 4,
"src": "/capas_de_filmes/Card - Caminho para o abismo.png",
"alt": "Imagem do filme Caminho para o abismo",
"titulo": "Caminho para o abismo",
"categoria": "2D",
"censura": "14 anos",
"genero": "Horror",
"duracao": 103
},
{
"id": 5,
"src": "/capas_de_filmes/Card - Desastres do Escritório.png",
"alt": "Imagem do filme Desastres do Escritório",
"titulo": "Desastres do Escritório",
"categoria": "2D",
"censura": "Livre",
"genero": "Comédia",
"duracao": 85
},
{
"id": 6,
"src": "/capas_de_filmes/Card - Mestres do futuro.png",
"alt": "Imagem do filme Mestres do Futuro",
"titulo": "Mestres do Futuro",
"categoria": "2D",
"censura": "Livre",
"genero": "Documentário",
"duracao": 120
},
{
"id": 7,
"src": "/capas_de_filmes/Card - La Esperanza.png",
"alt": "Imagem do filme La Esperanza",
"titulo": "La Esperanza",
"categoria": "2D",
"censura": "12 anos",
"genero": "Drama",
"duracao": 98
},
{
"id": 8,
"src": "/capas_de_filmes/Card - O nexus do tempo.png",
"alt": "Imagem do filme O nexus do tempo",
"titulo": "O nexus do tempo",
"categoria": "3D",
"censura": "10 anos",
"genero": "Ficcção Científica",
"duracao": 105
}
]
}
index.ts da pasta API
import axios from "axios";
import type { Movie } from "../types";
const BASE_URL = "http://localhost:3001/";
export const getMovies = async (): Promise<Movie[]> => {
const response = await axios.get<Movie[]>(`${BASE_URL}/movies`);
return response.data;
};