-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FIX/REFACTOR: Massive Code Refactor for Homepage to be able to select…
… games by genre and platform
- Loading branch information
Showing
9 changed files
with
302 additions
and
385 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React from "react"; | ||
import GameBanner from "./GameBanner"; | ||
import RawgGamesByGenreAndPlatformId from "./RawgGamesByGenreAndPlatformId"; | ||
import Loading from "./Loading"; | ||
|
||
const MainContent = ({ | ||
allGamesByGenreIdAndPlatformId, | ||
randomGames, | ||
selectedGenreName, | ||
selectedPlatformName, | ||
currentPage, | ||
onPrevPage, | ||
onNextPage, | ||
}) => ( | ||
<div className="col-span-4 md:col-span-3 bg-primary text-text"> | ||
{randomGames.length > 0 ? <GameBanner randomGames={randomGames} /> : <Loading />} | ||
|
||
<RawgGamesByGenreAndPlatformId | ||
gamesByGenreAndPlatformList={allGamesByGenreIdAndPlatformId} | ||
genreName={selectedGenreName} | ||
platformName={selectedPlatformName} | ||
pageNumber={currentPage} | ||
/> | ||
|
||
{/* 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={onPrevPage} | ||
disabled={currentPage === 1} | ||
> | ||
Previous Page | ||
</button> | ||
<button | ||
className="bg-secondary hover:text-white hover:bg-accent px-4 py-2 rounded-lg" | ||
onClick={onNextPage} | ||
> | ||
Next Page | ||
</button> | ||
</div> | ||
{/* Other components */} | ||
</div> | ||
); | ||
|
||
export default MainContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import React, { useEffect } from "react"; | ||
import CollapsibleSection from "./CollapsibleSection"; | ||
import { Link } from "react-router-dom"; | ||
|
||
const NavigationSidebar = ({ | ||
genreList, | ||
displayedGenres, | ||
genreActiveIndex, | ||
onShowMore, | ||
onShowLess, | ||
onGenreSelect, | ||
platformList, | ||
displayedPlatforms, | ||
platformActiveIndex, | ||
onShowMorePlatforms, | ||
onShowLessPlatforms, | ||
onPlatformSelect, | ||
}) => { | ||
return ( | ||
<div className="bg-secondary text-text hidden md:block"> | ||
<Link to="/streams/"> | ||
<div className="p-5 hover:bg-accent hover:text-white "> | ||
<h2 className="text-2xl font-bold">Top Streaming</h2> | ||
</div> | ||
</Link> | ||
|
||
<Link to="/games/top"> | ||
<div className="p-5 hover:bg-accent hover:text-white"> | ||
<h2 className="text-2xl font-bold ">Top Rated</h2> | ||
</div> | ||
</Link> | ||
|
||
<div className="bg-secondary p-5 rounded-md shadow-md"> | ||
{/* Collapsible Genres Section */} | ||
<CollapsibleSection title="Genres"> | ||
{genreList.slice(0, displayedGenres).map((item, index) => ( | ||
<div | ||
key={item.id} | ||
onClick={() => { | ||
onGenreSelect(item.id); | ||
}} | ||
className={`flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${genreActiveIndex === item.id ? "bg-accent" : "" | ||
}`} | ||
> | ||
{/* Genre image */} | ||
<img | ||
src={item.image_background} | ||
alt={`Genre ${item.name} background`} | ||
className={`w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${genreActiveIndex === index ? "scale-110" : "" | ||
}`} | ||
/> | ||
|
||
{/* Genre name */} | ||
<h3 className={`text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${genreActiveIndex === index ? "font-bold text-white" : "" | ||
}`}>{item.name}</h3> | ||
</div> | ||
))} | ||
|
||
{/* Show more/less buttons */} | ||
<div className="flex justify-between mt-4"> | ||
<button onClick={onShowMore} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-success hover:opacity-90 transition duration-150 ease-in-out"> | ||
Show More | ||
</button> | ||
{displayedGenres > 5 && ( | ||
<button onClick={onShowLess} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-error hover:opacity-90 transition duration-150 ease-in-out"> | ||
Show Less | ||
</button> | ||
)} | ||
</div> | ||
</CollapsibleSection> | ||
</div> | ||
|
||
{/* Collapsible Platforms Section */} | ||
<div className="bg-secondary p-5 rounded-md shadow-md"> | ||
<CollapsibleSection title="Platforms"> | ||
{platformList.slice(0, displayedPlatforms).map((item, index) => ( | ||
<div | ||
key={item.id} | ||
onClick={() => { | ||
onPlatformSelect(item.id); | ||
}} | ||
className={`flex gap-2 items-center mb-2 mt-3 px-2 py-2 cursor-pointer hover:bg-accent hover:text-white group rounded-lg ${platformActiveIndex === item.id ? "bg-accent" : "" | ||
}`} | ||
> | ||
<img | ||
src={item.image_background} | ||
alt={`Platform ${item.name} background`} | ||
className={`w-[40px] h-[40px] object-cover rounded-lg group-hover:scale-110 transition-all ease-out duration-300 ${platformActiveIndex === index ? "scale-110" : "" | ||
}`} | ||
/> | ||
<h3 className={`text-[18px] group-hover:font-bold transition-all ease-out duration-300 ${platformActiveIndex === index ? "font-bold text-white" : "" | ||
}`}>{item.name}</h3> | ||
</div> | ||
))} | ||
|
||
{/* Show more/less buttons */} | ||
<div className="flex justify-between mt-4"> | ||
<button onClick={onShowMorePlatforms} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-success hover:opacity-90 transition duration-150 ease-in-out"> | ||
Show More | ||
</button> | ||
{displayedPlatforms > 5 && ( | ||
<button onClick={onShowLessPlatforms} className="bg-primary text-text px-4 py-2 rounded-md hover:bg-error hover:opacity-90 transition duration-150 ease-in-out"> | ||
Show Less | ||
</button> | ||
)} | ||
</div> | ||
</CollapsibleSection> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
export default NavigationSidebar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React, { useEffect, useState } from "react"; | ||
import { Link } from "react-router-dom"; | ||
import { FcRating } from "react-icons/fc"; | ||
import { MdRateReview } from "react-icons/md"; | ||
import { FaGripfire } from "react-icons/fa6"; | ||
import { FaStarHalfAlt } from "react-icons/fa"; | ||
|
||
const RawgGamesByGenreAndPlatformId = ({ gamesByGenreAndPlatformList, genreName, platformName }) => { | ||
const [gamesList, setGamesList] = useState([]); | ||
|
||
useEffect(() => { | ||
setGamesList(gamesByGenreAndPlatformList); | ||
}, [gamesByGenreAndPlatformList]); | ||
|
||
return ( | ||
<div className="p-5"> | ||
<h2 className="text-3xl font-bold text-gray-400 my-6 cursor-pointer text-center"> | ||
{platformName ? "" : "Genre - "} {platformName} - {genreName} Games | ||
</h2> | ||
|
||
<div className="flex flex-wrap justify-center"> | ||
<div className="flex flex-wrap w-full justify-center"> | ||
{gamesList.map((game) => ( | ||
<div | ||
key={game.id} | ||
className="relative w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 bg-secondary rounded overflow-hidden shadow-lg m-4 group hover:scale-110 transition-all duration-300 ease cursor-pointer" | ||
> | ||
<Link to={`/games/${game.id}`}> | ||
<img className="w-full h-40 object-cover" src={game.short_screenshots[0].image} alt={game.name} /> | ||
</Link> | ||
<div className="absolute top-0 right-0 p-2 bg-gray-800 text-white rounded-bl"> | ||
<FcRating alt="MetaCritic Rating" /> {game.metacritic} | ||
</div> | ||
<div className="px-6 py-4"> | ||
<div className="font-bold text-base mb-2">{game.name}</div> | ||
<div className="flex items-center gap-3 justify-center"> | ||
<p className="text-gray-400 text-sm flex items-center"> | ||
<FaStarHalfAlt alt="The number of ratings" /> {game.rating} | ||
</p> | ||
<p className="text-gray-400 text-sm flex items-center"> | ||
<MdRateReview alt="The number of reviews" /> {game.reviews_count} | ||
</p> | ||
<p className="text-gray-400 text-sm flex items-center"> | ||
<FaGripfire alt="Suggestions" /> {game.suggestions_count} | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default RawgGamesByGenreAndPlatformId; |
Oops, something went wrong.