diff --git a/src/pages/games.tsx b/src/pages/games.tsx index 05dce3a..d2eb023 100644 --- a/src/pages/games.tsx +++ b/src/pages/games.tsx @@ -1,26 +1,65 @@ import { PaginationWithPageNumbers } from 'components/Pagination' import { MAX_GAMES_PER_PAGE } from 'constants.ts' -import { useGames } from 'hooks' -import { useRef, useState } from 'react' +import { useDidMount, useGames } from 'hooks' +import { useMemo, useRef, useState } from 'react' import { GameCard } from '../components/GameCard' import '../styles/pagination.css' import '../styles/search.css' import '../styles/styles.css' import { createSearchParams, useNavigate } from 'react-router-dom' import { appRoutes } from 'routes' +import { fetchMods } from 'utils' export const GamesPage = () => { const navigate = useNavigate() const searchTermRef = useRef(null) const games = useGames() + const [gamesWithMods, setGamesWithMods] = useState([]) const [currentPage, setCurrentPage] = useState(1) + useDidMount(() => { + fetchMods({ limit: 100 }).then((mods) => { + mods.sort((a, b) => b.published_at - a.published_at) + + const gameNames = new Set() + + mods.map((mod) => gameNames.add(mod.game)) + setGamesWithMods(Array.from(gameNames)) + }) + }) + + const sortedGames = useMemo(() => { + // Create a map for the order array, assigning each game name a rank based on its index. + const orderMap = new Map() + gamesWithMods.forEach((gameName, index) => { + orderMap.set(gameName, index) + }) + + const gamesArray = [...games] + + return gamesArray.sort((a, b) => { + const indexA = orderMap.get(a['Game Name']) + const indexB = orderMap.get(b['Game Name']) + + // Games that are not in the order array should go after those that are in the array. + if (indexA !== undefined && indexB !== undefined) { + return indexA - indexB + } else if (indexA !== undefined) { + return -1 // a comes before b + } else if (indexB !== undefined) { + return 1 // b comes before a + } else { + return 0 // keep original order if neither is in the array + } + }) + }, [games, gamesWithMods]) + // Pagination logic - const totalGames = games.length + const totalGames = sortedGames.length const totalPages = Math.ceil(totalGames / MAX_GAMES_PER_PAGE) const startIndex = (currentPage - 1) * MAX_GAMES_PER_PAGE const endIndex = startIndex + MAX_GAMES_PER_PAGE - const currentGames = games.slice(startIndex, endIndex) + const currentGames = sortedGames.slice(startIndex, endIndex) const handlePageChange = (page: number) => { if (page >= 1 && page <= totalPages) {