feat: sort games list based on mods associated with them
All checks were successful
Release to Staging / build_and_release (push) Successful in 45s
All checks were successful
Release to Staging / build_and_release (push) Successful in 45s
This commit is contained in:
parent
5ef9cf83d2
commit
c59f48611c
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user