blob: 0e90b84ad815530c6201e1157113fef5758a5ec0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import { useEffect, useState } from "react";
const Genres = ({ id }) => {
const [genres, setGenres] = useState([]);
const [loading, setLoading] = useState(true);
const [notFound, setNotFound] = useState(false);
useEffect(() => {
if (!id) return; // Prevent API call if id is undefined or null
const fetchGenres = async () => {
setLoading(true);
setNotFound(false); // Reset the notFound state on each new request
try {
const response = await fetch(
`https://api.themoviedb.org/3/movie/${id}?api_key=8216fbb9997cd81a67471e6cb5a6f2df`
);
if (response.status === 404) {
console.log('test');
setNotFound(true);
return;
}
if (!response.ok) {
// If the response is not okay, just set the notFound flag
setNotFound(true);
return;
}
const data = await response.json();
setGenres(data.genres || []);
} catch (err) {
console.error("An error occurred while fetching genres:", err);
} finally {
setLoading(false);
}
};
fetchGenres();
}, [id]);
if (loading) {
return <div className="text-white/60 text-xs">Loading genres...</div>;
}
if (notFound) {
// Instead of throwing an error, simply render nothing if the movie is not found
return null;
}
return (
<div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
{genres.map((genre, index) => (
<div key={index}>{genre.name}</div>
))}
</div>
);
};
export default Genres;
|
