Publish in GiHub Pages

albavidalm · Nov 9, 2022 · 6f7e881 · 6f7e881
1 parent c7d8e13
commit 6f7e881
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,8 @@ The project consists of a website with a list of video games, which we can filte
 
 ### Further implementations
 
-I'm working on the API pagination so that the user can navigate through the entire list of video games.
+I'm working on the API pagination so that the user can navigate through the entire list of video games. Next step, go to first and last page.
+After that improve and refactor the code.
 
 ### Links
 

diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "./static/css/main.ce980ce2.css",
-    "main.js": "./static/js/main.766bc10b.js",
+    "main.js": "./static/js/main.f78c1555.js",
     "static/media/gameboyadv.svg": "./static/media/gameboyadv.8f28a4a198465579ca019b4bcdc69bce.svg",
     "static/media/default.jpg": "./static/media/default.265239978ff69b60ed85.jpg",
     "static/media/atarijaguar.svg": "./static/media/atarijaguar.b29330f0905f3763f9bc9d771e2c87ef.svg",
@@ -45,10 +45,10 @@
     "static/media/macos.svg": "./static/media/macos.fbd65ca602c711151aba5beb583d27cc.svg",
     "static/media/pc.svg": "./static/media/pc.0cc0e9f59eff47a9bfc38c36ab740913.svg",
     "main.ce980ce2.css.map": "./static/css/main.ce980ce2.css.map",
-    "main.766bc10b.js.map": "./static/js/main.766bc10b.js.map"
+    "main.f78c1555.js.map": "./static/js/main.f78c1555.js.map"
   },
   "entrypoints": [
     "static/css/main.ce980ce2.css",
-    "static/js/main.766bc10b.js"
+    "static/js/main.f78c1555.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><script src="https://kit.fontawesome.com/8f7d6eb3e3.js" crossorigin="anonymous"></script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&family=Major+Mono+Display&family=Quicksand:wght@300;600&display=swap" rel="stylesheet"><title>Videogames</title><script defer="defer" src="./static/js/main.766bc10b.js"></script><link href="./static/css/main.ce980ce2.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><script src="https://kit.fontawesome.com/8f7d6eb3e3.js" crossorigin="anonymous"></script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&family=Major+Mono+Display&family=Quicksand:wght@300;600&display=swap" rel="stylesheet"><title>Videogames</title><script defer="defer" src="./static/js/main.f78c1555.js"></script><link href="./static/css/main.ce980ce2.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/docs/static/js/main.766bc10b.js.map b/docs/static/js/main.766bc10b.js.map
diff --git a/docs/static/js/main.766bc10b.js → docs/static/js/main.f78c1555.js b/docs/static/js/main.766bc10b.js → docs/static/js/main.f78c1555.js
diff --git a/docs/static/js/main.766bc10b.js.LICENSE.txt → docs/static/js/main.f78c1555.js.LICENSE.txt b/docs/static/js/main.766bc10b.js.LICENSE.txt → docs/static/js/main.f78c1555.js.LICENSE.txt
diff --git a/docs/static/js/main.f78c1555.js.map b/docs/static/js/main.f78c1555.js.map
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
@@ -1,34 +1,38 @@
 import React from "react";
 
-const Pagination = ({ prevPage, nextPage, onPrevious, onNext, totalGames }) => {
-  const handlePrev = () => {
-    onPrevious();
-  };
-  const handleNext = () => {
-    //debugger;
-    onNext();
-    // console.log(nextPage);
-  };
+const Pagination = ({ prevPage, nextPage, goPrevPage, onNext, totalGames }) => {
+  const pageWord = "page=";
+  let wordPosition;
+  let actualPage;
+  if (nextPage !== null) {
+    wordPosition = nextPage.indexOf(pageWord);
+    actualPage = parseInt(nextPage.slice(wordPosition + 5)) - 1;
+    console.log(actualPage);
+  } else {
+    wordPosition = prevPage.indexOf(pageWord);
+    actualPage = parseInt(prevPage.slice(wordPosition + 5)) + 1;
+    console.log(actualPage);
+  }
 
   return (
     <nav>
       <ul className="pagination">
         {prevPage && (
           <li className="pagination__li">
-            <button className="pagination__li--button" onClick={handlePrev}>
+            <button className="pagination__li--button" onClick={goPrevPage}>
               <i className="fa-solid fa-backward"></i> Prev
             </button>
           </li>
         )}
         <p className="pagination__info">
-          Page of{" "}
+          Page <span className="pagination__info--number">{actualPage}</span> of{" "}
           <span className="pagination__info--number">
             {Math.floor(totalGames / 20) + 1}
           </span>
         </p>
         {nextPage && (
           <li>
-            <button className="pagination__li--button" onClick={handleNext}>
+            <button className="pagination__li--button" onClick={onNext}>
               Next <i className="fa-solid fa-forward"></i>
             </button>
           </li>
@@ -37,5 +41,4 @@ const Pagination = ({ prevPage, nextPage, onPrevious, onNext, totalGames }) => {
     </nav>
   );
 };
-
 export default Pagination;
diff --git a/src/components/VideoGamesApp.js b/src/components/VideoGamesApp.js
@@ -12,45 +12,26 @@ import Filters from "./Filters";
 import GamesList from "./GamesList";
 import GamesListSkeleton from "./GamesListSkeleton";
 import GameDetail from "./GameDetail";
-import NotFoundGame from "./NotFoundGame";
 import NotFoundPage from "./NotFoundPage";
-// import NotFoundSearch from "./NotFoundSearch";
-//import Pagination from "./Pagination";
 import Favorites from "./Favorites";
+import Pagination from "./Pagination";
 
 const VideoGamesApp = () => {
-  // const [games, setGames] = useState(ls.get("games", []));
-  const { games, isLoading } = useFetchGames();
+  const { games, isLoading, prevPage, nextPage, onNext, goPrevPage } =
+    useFetchGames();
   const [nameFilter, setNameFilter] = useState(ls.get("nameFilter", ""));
   const [genreFilter, setGenreFilter] = useState(ls.get("genreFilter", "all"));
   const [platformFilter, setPlatformFilter] = useState(
     ls.get("platformFilter", "all")
   );
   const [sortFilter, setSortFilter] = useState(ls.get("sortFilter", "none"));
-  const [prevPage, setPrevPage] = useState(ls.get("prevPage", ""));
-  const [nextPage, setNextPage] = useState(ls.get("nextPage", ""));
   const [totalGames, setTotalGames] = useState(ls.get("totalGames", ""));
   const [favorites, setFavorites] = useState(ls.get("favorites", []));
 
-  /* // Getting data for pagination
-  const onPrevious = () => {
-    getApiData(prevPage);
-    console.log(prevPage);
-  };
-  //debugger;
-  const onNext = () => {
-    getApiData(nextPage);
-    console.log(nextPage);
-  };
-  */
-
   // Checking if data at LS
   useEffect(() => {
     if (games.length === 0) {
       getApiData().then((gamesData) => {
-        // setGames(gamesData.cleanData);
-        setPrevPage(gamesData.prevPage);
-        setNextPage(gamesData.nextPage);
         setTotalGames(gamesData.totalGames);
       });
     }
@@ -182,15 +163,15 @@ const VideoGamesApp = () => {
                 <GamesListSkeleton cards={20} />
               ) : (
                 <section className="gameList">
-                  {/* {filteredGames.length !== 0 && (
+                  {filteredGames.length !== 0 && (
                     <Pagination
                       prevPage={prevPage}
                       nextPage={nextPage}
-                      onPrevious={onPrevious}
+                      goPrevPage={goPrevPage}
                       onNext={onNext}
                       totalGames={totalGames}
                     />
-                  )} */}
+                  )}
 
                   <GamesList
                     games={filteredGames}

diff --git a/src/hooks/useFetchGames.js b/src/hooks/useFetchGames.js
@@ -4,16 +4,40 @@ import { getApiData } from "../services/getApiData";
 export const useFetchGames = () => {
   const [games, setGames] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [prevPage, setPrevPage] = useState("prevPage", "");
+  const [nextPage, setNextPage] = useState("nextPage", "");
 
   useEffect(() => {
     getApiData().then((gamesData) => {
       setIsLoading(false);
       setGames(gamesData.cleanData);
+      setPrevPage(gamesData.prevPage);
+      setNextPage(gamesData.nextPage);
     });
   }, []);
 
+  const onNext = () => {
+    getApiData(nextPage).then((gamesData) => {
+      setGames(gamesData.cleanData);
+      setPrevPage(gamesData.prevPage);
+      setNextPage(gamesData.nextPage);
+    });
+  };
+
+  const goPrevPage = () => {
+    getApiData(prevPage).then((gamesData) => {
+      setGames(gamesData.cleanData);
+      setPrevPage(gamesData.prevPage);
+      setNextPage(gamesData.nextPage);
+    });
+  };
+
   return {
     games,
     isLoading,
+    prevPage,
+    nextPage,
+    onNext,
+    goPrevPage,
   };
 };
diff --git a/src/services/getApiData.js b/src/services/getApiData.js
@@ -2,9 +2,9 @@
 import defaultImage from "../assets/images/default.jpg";
 
 const initialUrl =
-  "https://api.rawg.io/api/games?&key=30a842076eed4d7cb75b7a01f8307a40";
-export const getApiData = () => {
-  return fetch(initialUrl)
+  "https://api.rawg.io/api/games?key=30a842076eed4d7cb75b7a01f8307a40";
+export const getApiData = (page) => {
+  return fetch(page || initialUrl)
     .then((response) => response.json())
     .then((data) => {
       //console.log(data);