fix: search bar

This commit is contained in:
Ibrahima G. Coulibaly
2025-03-06 17:54:36 +00:00
parent 6278ddf8f9
commit a47bf8b800

View File

@@ -2,7 +2,7 @@ import { Autocomplete, Box, Stack, TextField } from '@mui/material';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import { useEffect, useState } from 'react'; import { useState } from 'react';
import { DefinedTool } from '@tools/defineTool'; import { DefinedTool } from '@tools/defineTool';
import { filterTools, tools } from '@tools/index'; import { filterTools, tools } from '@tools/index';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@@ -28,7 +28,6 @@ export default function Hero() {
const [filteredTools, setFilteredTools] = useState<DefinedTool[]>( const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(
_.shuffle(tools) _.shuffle(tools)
); );
const [pendingNavigation, setPendingNavigation] = useState<boolean>(false);
const navigate = useNavigate(); const navigate = useNavigate();
const handleInputChange = ( const handleInputChange = (
event: React.ChangeEvent<{}>, event: React.ChangeEvent<{}>,
@@ -38,13 +37,6 @@ export default function Hero() {
setFilteredTools(_.shuffle(filterTools(tools, newInputValue))); setFilteredTools(_.shuffle(filterTools(tools, newInputValue)));
}; };
useEffect(() => {
if (pendingNavigation && filteredTools.length > 0) {
navigate('/' + filteredTools[0].path);
setPendingNavigation(false);
}
}, [pendingNavigation, filteredTools, navigate]);
return ( return (
<Box width={{ xs: '90%', md: '80%', lg: '60%' }}> <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
<Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}> <Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}>
@@ -107,9 +99,9 @@ export default function Hero() {
</Stack> </Stack>
</Box> </Box>
)} )}
onKeyDown={(event) => { onChange={(event, newValue) => {
if (event.key === 'Enter') { if (newValue) {
setPendingNavigation(true); navigate('/' + newValue.path);
} }
}} }}
/> />