Multi-file games lists, clicking a game leads to mod search for that game, search redirects, pagination optimizations #38
@ -1,13 +1,17 @@
|
||||
import { PaginationWithPageNumbers } from 'components/Pagination'
|
||||
import { MAX_GAMES_PER_PAGE } from 'constants.ts'
|
||||
import { useGames } from 'hooks'
|
||||
import { useState } from 'react'
|
||||
import { 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'
|
||||
|
||||
export const GamesPage = () => {
|
||||
const navigate = useNavigate()
|
||||
const searchTermRef = useRef<HTMLInputElement>(null)
|
||||
const games = useGames()
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
|
||||
@ -24,6 +28,24 @@ export const GamesPage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
const value = searchTermRef.current?.value || '' // Access the input value from the ref
|
||||
if (value !== '') {
|
||||
const searchParams = createSearchParams({
|
||||
searchTerm: value,
|
||||
searching: 'Games'
|
||||
})
|
||||
navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
|
||||
}
|
||||
}
|
||||
|
||||
// Handle "Enter" key press inside the input
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (event.key === 'Enter') {
|
||||
handleSearch()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='InnerBodyMain'>
|
||||
<div className='ContainerMain'>
|
||||
@ -36,8 +58,18 @@ export const GamesPage = () => {
|
||||
<div className='SearchMain'>
|
||||
<div className='SearchMainInside'>
|
||||
<div className='SearchMainInsideWrapper'>
|
||||
<input type='text' className='SMIWInput' />
|
||||
<button className='btn btnMain SMIWButton' type='button'>
|
||||
<input
|
||||
type='text'
|
||||
className='SMIWInput'
|
||||
ref={searchTermRef}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder='Enter search term'
|
||||
/>
|
||||
<button
|
||||
className='btn btnMain SMIWButton'
|
||||
type='button'
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 512 512'
|
||||
|
@ -22,6 +22,7 @@ import React, {
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import { getModPageRoute } from 'routes'
|
||||
import { ModDetails, MuteLists } from 'types'
|
||||
@ -53,14 +54,20 @@ interface FilterOptions {
|
||||
}
|
||||
|
||||
export const SearchPage = () => {
|
||||
const [searchParams] = useSearchParams()
|
||||
|
||||
const muteLists = useMuteLists()
|
||||
const searchTermRef = useRef<HTMLInputElement>(null)
|
||||
const [filterOptions, setFilterOptions] = useState<FilterOptions>({
|
||||
sort: SortByEnum.Latest,
|
||||
moderated: ModeratedFilterEnum.Moderated,
|
||||
searching: SearchingFilterEnum.Mods
|
||||
searching:
|
||||
(searchParams.get('searching') as SearchingFilterEnum) ||
|
||||
SearchingFilterEnum.Mods
|
||||
})
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [searchTerm, setSearchTerm] = useState(
|
||||
searchParams.get('searchTerm') || ''
|
||||
)
|
||||
|
||||
const handleSearch = () => {
|
||||
const value = searchTermRef.current?.value || '' // Access the input value from the ref
|
||||
|
Loading…
Reference in New Issue
Block a user