Add pagination and code clean up

group14-aaa · Feb 15, 2024 · 5581850 · 5581850
1 parent a2fb5cf
commit 5581850
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 45 deletions.
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -18,50 +18,32 @@ const selectRandomGames = (games, count) => {
 };
 
 const Home = () => {
-   const [allGamesList, setAllGamesList] = useState([]);
    const [allGamesByGenreId, setAllGamesByGenreId] = useState([]);
    const [randomGames, setRandomGames] = useState({});
    const [error, setError] = useState(null);
    const [selectedPlatformId, setSelectedPlatformId] = useState(null);
    const [platformList, setPlatformList] = useState([]);
    const [selectedGenreName, setSelectedGenreName] = useState("Action");
+   const [currentPage, setCurrentPage] = useState(1);
 
    useEffect(() => {
-      // Set a random game when allGamesList or allGamesByGenreId changes
-      if (allGamesList.length > 0 && allGamesByGenreId.length > 0) {
-         setRandomGames(selectRandomGames(allGamesList, 10));
+      // Set a random game when allGamesByGenreId changes
+      if (allGamesByGenreId.length > 0) {
+         setRandomGames(selectRandomGames(allGamesByGenreId, 10));
       }
-   }, [allGamesList, allGamesByGenreId]);
+   }, [allGamesByGenreId]);
 
    useEffect(() => {
-      // Fetch games list when component mounts
-      fetchRawgAllGamesList();
-      fetchRawgGamesByGenreId(4);
-      fetchRawgGamesByPlatform();
-   }, []);
-
-   const handleGenreSelect = (name) => {
-      // You might want to do something with the genre ID as well
-      setSelectedGenreName(name);
-   };
-
-   const handleApiError = (error, errorMessage) => {
-      setError(errorMessage);
-      console.error(`Error: ${errorMessage}`, error);
-   };
-
-   const fetchRawgAllGamesList = async () => {
-      try {
-         const response = await rawgApi.getGamesList;
-         setAllGamesList(response?.data?.results || []);
-      } catch (error) {
-         handleApiError(error, "Error fetching top-rated games");
+      if (selectedPlatformId) {
+         fetchRawgGamesByPlatform(selectedPlatformId, currentPage);
+      } else {
+         fetchRawgGamesByGenreId(4, currentPage);
       }
-   };
+   }, [selectedPlatformId, currentPage]);
 
-   const fetchRawgGamesByGenreId = async (id) => {
+   const fetchRawgGamesByGenreId = async (id, page) => {
       try {
-         const response = await rawgApi.getGamesByGenreId(id);
+         const response = await rawgApi.getGamesByGenreId(id, page);
          setAllGamesByGenreId(response?.data?.results || []);
       } catch (error) {
          handleApiError(error, "Error fetching games by genre");
@@ -77,20 +59,34 @@ const Home = () => {
       }
    };
 
-   if (error) {
-      return (
-         <div className="p-5 text-text">
-            <p className="text-xl">Error: {error}</p>
-         </div>
-      );
-   }
+   const handleGenreSelect = (name) => {
+      // You might want to do something with the genre ID as well
+      setSelectedGenreName(name);
+   };
+
+   const handleApiError = (error, errorMessage) => {
+      setError(errorMessage);
+      console.error(`Error: ${errorMessage}`, error);
+   };
 
    const handlePlatformSelect = (platformId) => {
       setSelectedPlatformId(platformId);
       // You can implement fetching games by platform here if needed.  // pass this id so this is passed to games by genre,
       console.log("Platform ID selected:", platformId);
    };
 
+   const handlePageChange = (newPage) => {
+      setCurrentPage(newPage);
+   };
+
+   if (error) {
+      return (
+         <div className="p-5 text-text">
+            <p className="text-xl text-error">Error: {error}</p>
+         </div>
+      );
+   }
+
    return (
       <div className="grid grid-cols-4">
          <div className="bg-secondary text-text hidden md:block">
@@ -106,19 +102,40 @@ const Home = () => {
                </div>
             </Link>
 
-            <RawgGenreList onGenreSelect={(onGenreSelect) => fetchRawgGamesByGenreId(onGenreSelect)} onGenreName={handleGenreSelect} />
+            {/** Render a list of game genres */}
+            <RawgGenreList onGenreSelect={(onGenreSelect) => fetchRawgGamesByGenreId(onGenreSelect, 1)} onGenreName={handleGenreSelect} />
 
+            {/** Render a list of game platforms */}
             <RawgPlatformList platformList={platformList} onPlatformSelect={handlePlatformSelect} onGenreName={handleGenreSelect} />
-            {/* <AllGamesByPlatform onPlatformSelect={(allGamesByPlatform) => fetchRawgGamesByPlatform(onPlatformSelect)} /> */}
          </div>
 
-         {allGamesList?.length > 0 && allGamesByGenreId.length > 0 && (
+         {/** Game banner and a list of games by genre or platform */}
+         {allGamesByGenreId.length > 0 && (
             <div className="col-span-4 md:col-span-3 bg-primary text-text">
                {randomGames.length > 0 ? <GameBanner randomGames={randomGames} /> : <Loading />}
 
-               <RawgGamesByGenreId gamesByGenreList={allGamesByGenreId} genereName={selectedGenreName} platformId={selectedPlatformId} />
-
-               {/* <RawgGamesByGenreId gamesByGenreList={allGamesByGenreId} /> */}
+               <RawgGamesByGenreId
+                  gamesByGenreList={allGamesByGenreId}
+                  genereName={selectedGenreName}
+                  platformId={selectedPlatformId}
+               />
+
+               {/* Pagination Controls */}
+               <div className="text-text flex justify-center items-center gap-5 my-20">
+                  <button
+                     className="bg-secondary  hover:text-white hover:bg-accent px-4 py-2 rounded-lg mr-2"
+                     onClick={() => handlePageChange(currentPage - 1)}
+                     disabled={currentPage === 1}
+                  >
+                     Previous Page
+                  </button>
+                  <button
+                     className="bg-secondary hover:text-white hover:bg-accent px-4 py-2 rounded-lg"
+                     onClick={() => handlePageChange(currentPage + 1)}
+                  >
+                     Next Page
+                  </button>
+               </div>
                {/* Other components */}
             </div>
          )}

diff --git a/src/pages/games/top/index.jsx b/src/pages/games/top/index.jsx
@@ -34,7 +34,9 @@ const TopRatedGames = () => {
                 Streams Sidebar
             </div> */}
             <div className="col-span-4 bg-primary text-text">
-                <RawgTopRatedGames gamesList={allGamesList} />
+                {allGamesList?.length > 0 && (
+                    <RawgTopRatedGames gamesList={allGamesList} />
+                )}
             </div>
         </div>
     )

diff --git a/src/services/rawgApi.jsx b/src/services/rawgApi.jsx
@@ -8,7 +8,7 @@ const axiosCreateRawgApi = axios.create({
 
 const getGenreList = axiosCreateRawgApi.get("/genres?key=" + import.meta.env.VITE_RAWG_API_KEY);
 const getGamesList = axiosCreateRawgApi.get("/games?key=" + import.meta.env.VITE_RAWG_API_KEY);
-const getGamesByGenreId = (id) => axiosCreateRawgApi.get("/games?key=" + import.meta.env.VITE_RAWG_API_KEY + "&genres=" + id);
+const getGamesByGenreId = (id, page) => axiosCreateRawgApi.get("/games?key=" + import.meta.env.VITE_RAWG_API_KEY + "&genres=" + id + "&page=" + page);
 const getGameData = (gId) => axiosCreateRawgApi.get("/games/" + gId + "?key=" + import.meta.env.VITE_RAWG_API_KEY);
 const getPlatformList = () =>  axiosCreateRawgApi.get("/platforms?key=" + import.meta.env.VITE_RAWG_API_KEY);
 const getGamesByPlatform = (platformId) => axiosCreateRawgApi.get("/games?key=" + import.meta.env.VITE_RAWG_API_KEY + "&platforms=" + platformId);