Multi-file games lists, clicking a game leads to mod search for that game, search redirects, pagination optimizations #38

Merged
freakoverse merged 11 commits from staging into master 2024-09-18 19:30:26 +00:00
2 changed files with 44 additions and 5 deletions
Showing only changes of commit 1d02bf0d6f - Show all commits

View File

@ -1,13 +1,17 @@
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 { useGames } from 'hooks'
import { useState } from 'react' import { 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 { appRoutes } from 'routes'
export const GamesPage = () => { export const GamesPage = () => {
const navigate = useNavigate()
const searchTermRef = useRef<HTMLInputElement>(null)
const games = useGames() const games = useGames()
const [currentPage, setCurrentPage] = useState(1) 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 ( return (
<div className='InnerBodyMain'> <div className='InnerBodyMain'>
<div className='ContainerMain'> <div className='ContainerMain'>
@ -36,8 +58,18 @@ export const GamesPage = () => {
<div className='SearchMain'> <div className='SearchMain'>
<div className='SearchMainInside'> <div className='SearchMainInside'>
<div className='SearchMainInsideWrapper'> <div className='SearchMainInsideWrapper'>
<input type='text' className='SMIWInput' /> <input
<button className='btn btnMain SMIWButton' type='button'> type='text'
className='SMIWInput'
ref={searchTermRef}
onKeyDown={handleKeyDown}
placeholder='Enter search term'
/>
<button
className='btn btnMain SMIWButton'
type='button'
onClick={handleSearch}
>
<svg <svg
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512' viewBox='0 0 512 512'

View File

@ -22,6 +22,7 @@ import React, {
useRef, useRef,
useState useState
} from 'react' } from 'react'
import { useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { getModPageRoute } from 'routes' import { getModPageRoute } from 'routes'
import { ModDetails, MuteLists } from 'types' import { ModDetails, MuteLists } from 'types'
@ -53,14 +54,20 @@ interface FilterOptions {
} }
export const SearchPage = () => { export const SearchPage = () => {
const [searchParams] = useSearchParams()
const muteLists = useMuteLists() const muteLists = useMuteLists()
const searchTermRef = useRef<HTMLInputElement>(null) const searchTermRef = useRef<HTMLInputElement>(null)
const [filterOptions, setFilterOptions] = useState<FilterOptions>({ const [filterOptions, setFilterOptions] = useState<FilterOptions>({
sort: SortByEnum.Latest, sort: SortByEnum.Latest,
moderated: ModeratedFilterEnum.Moderated, 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 handleSearch = () => {
const value = searchTermRef.current?.value || '' // Access the input value from the ref const value = searchTermRef.current?.value || '' // Access the input value from the ref