71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import { useState, useEffect } from "react"
|
|
import Character from "./Character";
|
|
|
|
function Characters() {
|
|
const [characters, setCharacters] = useState([]);
|
|
const [info, setInfo] = useState({});
|
|
const [page, setPage] = useState(1);
|
|
|
|
const getCharacters = () => {
|
|
fetch(`https://rickandmortyapi.com/api/character?page=${page}`)
|
|
.then(res => res.json())
|
|
.then(adatok => {
|
|
setCharacters(adatok.results);
|
|
setInfo(adatok.info);
|
|
})
|
|
.catch(err => alert(err));
|
|
}
|
|
|
|
const asGetCharacters = async () => {
|
|
try {
|
|
let keres = await fetch(`https://rickandmortyapi.com/api/character?page=${page}`);
|
|
let adatok = await keres.json();
|
|
setCharacters(adatok.results);
|
|
setInfo(adatok.info);
|
|
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
|
|
const tovabb = () => {
|
|
if (page < info.pages) {
|
|
setPage(prev => prev + 1);
|
|
}
|
|
|
|
}
|
|
|
|
const vissza = () => {
|
|
if (page > 1) {
|
|
setPage(prev => prev - 1);
|
|
}
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
getCharacters();
|
|
}, [page])
|
|
|
|
return (
|
|
<div className="bg-sky-300">
|
|
<h2 className="text-2xl font-bold text-center text-sky-900 p-2">Characters</h2>
|
|
<div className="flex flex-row items-center justify-center join m-2">
|
|
<button onClick={vissza} className="join-item btn bg-sky-200">«</button>
|
|
<button className="join-item btn bg-sky-200">{page}</button>
|
|
<button onClick={tovabb} className="join-item btn bg-sky-200">»</button>
|
|
</div>
|
|
<div className="flex flex-row flex-wrap items-center justify-center">
|
|
{
|
|
characters.map((character) => (<Character key={character.id} character={character} />))
|
|
}
|
|
</div>
|
|
<div className="flex flex-row items-center justify-center join m-2">
|
|
<button onClick={vissza} className="join-item btn bg-sky-200">«</button>
|
|
<button className="join-item btn bg-sky-200">{page}</button>
|
|
<button onClick={tovabb} className="join-item btn bg-sky-200">»</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Characters |