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<HTMLInputElement>(null)
   const games = useGames()
+  const [gamesWithMods, setGamesWithMods] = useState<string[]>([])
   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<string>()
+
+      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<string, number>()
+    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) {