Lapozás implementálása

rickandmorty/src/components/Characters.jsx

@@ -1,9 +1,71 @@
-
+import { useState, useEffect } from "react"
+import Character from "./Character";
 
 function Characters() {
-  return (
-    <div>Characters</div>
-  )
+    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