feat: game page search, cached filters #105
@ -9,6 +9,7 @@ import '../styles/styles.css'
|
||||
import { createSearchParams, useNavigate } from 'react-router-dom'
|
||||
import { appRoutes } from 'routes'
|
||||
import { scrollIntoView } from 'utils'
|
||||
import { SearchInput } from 'components/SearchInput'
|
||||
|
||||
export const GamesPage = () => {
|
||||
const scrollTargetRef = useRef<HTMLDivElement>(null)
|
||||
@ -74,8 +75,8 @@ export const GamesPage = () => {
|
||||
const value = searchTermRef.current?.value || '' // Access the input value from the ref
|
||||
if (value !== '') {
|
||||
const searchParams = createSearchParams({
|
||||
searchTerm: value,
|
||||
searching: 'Games'
|
||||
q: value,
|
||||
kind: 'Games'
|
||||
})
|
||||
navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
|
||||
}
|
||||
@ -100,34 +101,11 @@ export const GamesPage = () => {
|
||||
<div className='IBMSMTitleMain'>
|
||||
<h2 className='IBMSMTitleMainHeading'>Games</h2>
|
||||
</div>
|
||||
<div className='SearchMain'>
|
||||
<div className='SearchMainInside'>
|
||||
<div className='SearchMainInsideWrapper'>
|
||||
<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'
|
||||
width='1em'
|
||||
height='1em'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SearchInput
|
||||
ref={searchTermRef}
|
||||
handleKeyDown={handleKeyDown}
|
||||
handleSearch={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='IBMSecMain IBMSMListWrapper'>
|
||||
|
||||
@ -25,6 +25,7 @@ import {
|
||||
SortBy
|
||||
} from '../types'
|
||||
import { scrollIntoView } from 'utils'
|
||||
import { SearchInput } from 'components/SearchInput'
|
||||
|
||||
export const ModsPage = () => {
|
||||
const scrollTargetRef = useRef<HTMLDivElement>(null)
|
||||
@ -146,8 +147,8 @@ const PageTitleRow = React.memo(() => {
|
||||
const value = searchTermRef.current?.value || '' // Access the input value from the ref
|
||||
if (value !== '') {
|
||||
const searchParams = createSearchParams({
|
||||
searchTerm: value,
|
||||
searching: 'Mods'
|
||||
q: value,
|
||||
kind: 'Mods'
|
||||
})
|
||||
navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
|
||||
}
|
||||
@ -166,35 +167,11 @@ const PageTitleRow = React.memo(() => {
|
||||
<div className='IBMSMTitleMain'>
|
||||
<h2 className='IBMSMTitleMainHeading'>Mods</h2>
|
||||
</div>
|
||||
<div className='SearchMain'>
|
||||
<div className='SearchMainInside'>
|
||||
<div className='SearchMainInsideWrapper'>
|
||||
<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'
|
||||
width='1em'
|
||||
height='1em'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SearchInput
|
||||
ref={searchTermRef}
|
||||
handleKeyDown={handleKeyDown}
|
||||
handleSearch={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -13,6 +13,7 @@ import { ModCard } from 'components/ModCard'
|
||||
import { ModFilter } from 'components/ModsFilter'
|
||||
import { Pagination } from 'components/Pagination'
|
||||
import { Profile } from 'components/ProfileSection'
|
||||
import { SearchInput } from 'components/SearchInput'
|
||||
import {
|
||||
MAX_GAMES_PER_PAGE,
|
||||
MAX_MODS_PER_PAGE,
|
||||
@ -59,15 +60,14 @@ enum SearchKindEnum {
|
||||
|
||||
export const SearchPage = () => {
|
||||
const scrollTargetRef = useRef<HTMLDivElement>(null)
|
||||
const [searchParams] = useSearchParams()
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
|
||||
const muteLists = useMuteLists()
|
||||
const nsfwList = useNSFWList()
|
||||
const searchTermRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const [searchKind, setSearchKind] = useState(
|
||||
(searchParams.get('searching') as SearchKindEnum) || SearchKindEnum.Mods
|
||||
)
|
||||
const searchKind =
|
||||
(searchParams.get('kind') as SearchKindEnum) || SearchKindEnum.Mods
|
||||
|
||||
const [filterOptions, setFilterOptions] = useState<FilterOptions>({
|
||||
sort: SortBy.Latest,
|
||||
@ -76,13 +76,21 @@ export const SearchPage = () => {
|
||||
moderated: ModeratedFilter.Moderated
|
||||
})
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState(
|
||||
searchParams.get('searchTerm') || ''
|
||||
)
|
||||
const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '')
|
||||
|
||||
const handleSearch = () => {
|
||||
const value = searchTermRef.current?.value || '' // Access the input value from the ref
|
||||
setSearchTerm(value)
|
||||
|
||||
if (value) {
|
||||
searchParams.set('q', value)
|
||||
} else {
|
||||
searchParams.delete('q')
|
||||
}
|
||||
|
||||
setSearchParams(searchParams, {
|
||||
replace: true
|
||||
})
|
||||
}
|
||||
|
||||
// Handle "Enter" key press inside the input
|
||||
@ -109,41 +117,16 @@ export const SearchPage = () => {
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className='SearchMain'>
|
||||
<div className='SearchMainInside'>
|
||||
<div className='SearchMainInsideWrapper'>
|
||||
<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'
|
||||
width='1em'
|
||||
height='1em'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SearchInput
|
||||
handleKeyDown={handleKeyDown}
|
||||
handleSearch={handleSearch}
|
||||
ref={searchTermRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Filters
|
||||
filterOptions={filterOptions}
|
||||
setFilterOptions={setFilterOptions}
|
||||
searchKind={searchKind}
|
||||
setSearchKind={setSearchKind}
|
||||
/>
|
||||
{searchKind === SearchKindEnum.Mods && (
|
||||
<ModsResult
|
||||
@ -173,18 +156,20 @@ export const SearchPage = () => {
|
||||
type FiltersProps = {
|
||||
filterOptions: FilterOptions
|
||||
setFilterOptions: Dispatch<SetStateAction<FilterOptions>>
|
||||
searchKind: SearchKindEnum
|
||||
setSearchKind: Dispatch<SetStateAction<SearchKindEnum>>
|
||||
}
|
||||
|
||||
const Filters = React.memo(
|
||||
({
|
||||
filterOptions,
|
||||
setFilterOptions,
|
||||
searchKind,
|
||||
setSearchKind
|
||||
}: FiltersProps) => {
|
||||
({ filterOptions, setFilterOptions }: FiltersProps) => {
|
||||
const userState = useAppSelector((state) => state.user)
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const searchKind =
|
||||
(searchParams.get('kind') as SearchKindEnum) || SearchKindEnum.Mods
|
||||
const handleChangeSearchKind = (kind: SearchKindEnum) => {
|
||||
searchParams.set('kind', kind)
|
||||
setSearchParams(searchParams, {
|
||||
replace: true
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='IBMSecMain'>
|
||||
@ -252,7 +237,7 @@ const Filters = React.memo(
|
||||
<div
|
||||
key={`searchingFilterItem-${index}`}
|
||||
className='dropdown-item dropdownMainMenuItem'
|
||||
onClick={() => setSearchKind(item)}
|
||||
onClick={() => handleChangeSearchKind(item)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
@ -324,6 +309,7 @@ const ModsResult = ({
|
||||
}, [searchTerm])
|
||||
|
||||
const filteredMods = useMemo(() => {
|
||||
// Search page requires search term
|
||||
if (searchTerm === '') return []
|
||||
|
||||
const lowerCaseSearchTerm = searchTerm.toLowerCase()
|
||||
@ -338,6 +324,7 @@ const ModsResult = ({
|
||||
) > -1
|
||||
|
||||
const filterSourceFn = (mod: ModDetails) => {
|
||||
// Filter by source if selected
|
||||
if (filterOptions.source === window.location.host) {
|
||||
return mod.rTag === filterOptions.source
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user