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 { PaginationWithPageNumbers } from 'components/Pagination'
|
||||||
import { MAX_GAMES_PER_PAGE } from 'constants.ts'
|
import { MAX_GAMES_PER_PAGE } from 'constants.ts'
|
||||||
import { useGames } from 'hooks'
|
import { useDidMount, useGames } from 'hooks'
|
||||||
import { useRef, useState } from 'react'
|
import { useMemo, useRef, useState } from 'react'
|
||||||
import { GameCard } from '../components/GameCard'
|
import { GameCard } from '../components/GameCard'
|
||||||
import '../styles/pagination.css'
|
import '../styles/pagination.css'
|
||||||
import '../styles/search.css'
|
import '../styles/search.css'
|
||||||
import '../styles/styles.css'
|
import '../styles/styles.css'
|
||||||
import { createSearchParams, useNavigate } from 'react-router-dom'
|
import { createSearchParams, useNavigate } from 'react-router-dom'
|
||||||
import { appRoutes } from 'routes'
|
import { appRoutes } from 'routes'
|
||||||
|
import { fetchMods } from 'utils'
|
||||||
|
|
||||||
export const GamesPage = () => {
|
export const GamesPage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const searchTermRef = useRef<HTMLInputElement>(null)
|
const searchTermRef = useRef<HTMLInputElement>(null)
|
||||||
const games = useGames()
|
const games = useGames()
|
||||||
|
const [gamesWithMods, setGamesWithMods] = useState<string[]>([])
|
||||||
const [currentPage, setCurrentPage] = useState(1)
|
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
|
// Pagination logic
|
||||||
const totalGames = games.length
|
const totalGames = sortedGames.length
|
||||||
const totalPages = Math.ceil(totalGames / MAX_GAMES_PER_PAGE)
|
const totalPages = Math.ceil(totalGames / MAX_GAMES_PER_PAGE)
|
||||||
const startIndex = (currentPage - 1) * MAX_GAMES_PER_PAGE
|
const startIndex = (currentPage - 1) * MAX_GAMES_PER_PAGE
|
||||||
const endIndex = startIndex + 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) => {
|
const handlePageChange = (page: number) => {
|
||||||
if (page >= 1 && page <= totalPages) {
|
if (page >= 1 && page <= totalPages) {
|
||||||
|
Loading…
Reference in New Issue
Block a user