fix: redirect from mods page to search page on searching

This commit is contained in:
daniyal 2024-09-23 13:55:18 +05:00
parent ec4c434b66
commit 64b5c7194f

View File

@ -6,14 +6,16 @@ import React, {
useCallback, useCallback,
useEffect, useEffect,
useMemo, useMemo,
useRef,
useState useState
} from 'react' } from 'react'
import { createSearchParams, useNavigate } from 'react-router-dom'
import { LoadingSpinner } from '../components/LoadingSpinner' import { LoadingSpinner } from '../components/LoadingSpinner'
import { ModCard } from '../components/ModCard' import { ModCard } from '../components/ModCard'
import { MOD_FILTER_LIMIT } from '../constants' import { MOD_FILTER_LIMIT } from '../constants'
import { MetadataController } from '../controllers' import { MetadataController } from '../controllers'
import { useAppSelector, useDidMount, useMuteLists } from '../hooks' import { useAppSelector, useDidMount, useMuteLists } from '../hooks'
import { getModPageRoute } from '../routes' import { appRoutes, getModPageRoute } from '../routes'
import '../styles/filters.css' import '../styles/filters.css'
import '../styles/pagination.css' import '../styles/pagination.css'
import '../styles/search.css' import '../styles/search.css'
@ -227,6 +229,27 @@ export const ModsPage = () => {
} }
const PageTitleRow = React.memo(() => { const PageTitleRow = React.memo(() => {
const navigate = useNavigate()
const searchTermRef = useRef<HTMLInputElement>(null)
const handleSearch = () => {
const value = searchTermRef.current?.value || '' // Access the input value from the ref
if (value !== '') {
const searchParams = createSearchParams({
searchTerm: value,
searching: 'Mods'
})
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='IBMSecMain'> <div className='IBMSecMain'>
<div className='SearchMainWrapper'> <div className='SearchMainWrapper'>
@ -236,8 +259,19 @@ const PageTitleRow = React.memo(() => {
<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'