diff --git a/src/pages/mods.tsx b/src/pages/mods.tsx index 7f9982c..8503802 100644 --- a/src/pages/mods.tsx +++ b/src/pages/mods.tsx @@ -6,14 +6,16 @@ import React, { useCallback, useEffect, useMemo, + useRef, useState } from 'react' +import { createSearchParams, useNavigate } from 'react-router-dom' import { LoadingSpinner } from '../components/LoadingSpinner' import { ModCard } from '../components/ModCard' import { MOD_FILTER_LIMIT } from '../constants' import { MetadataController } from '../controllers' import { useAppSelector, useDidMount, useMuteLists } from '../hooks' -import { getModPageRoute } from '../routes' +import { appRoutes, getModPageRoute } from '../routes' import '../styles/filters.css' import '../styles/pagination.css' import '../styles/search.css' @@ -227,6 +229,27 @@ export const ModsPage = () => { } const PageTitleRow = React.memo(() => { + const navigate = useNavigate() + const searchTermRef = useRef(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) => { + if (event.key === 'Enter') { + handleSearch() + } + } + return (
@@ -236,8 +259,19 @@ const PageTitleRow = React.memo(() => {
- -