diff --git a/client/components/SearchForm.tsx b/client/components/SearchForm.tsx index 436fcba..73cfb59 100644 --- a/client/components/SearchForm.tsx +++ b/client/components/SearchForm.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef, useState, useCallback } from "react"; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from "react-router-dom"; import TextareaAutosize from "react-textarea-autosize"; import { getRandomQuerySuggestion } from "../modules/querySuggestions"; import { debounce } from "../utils/debounce"; @@ -17,12 +17,15 @@ export function SearchForm({ getRandomQuerySuggestion(), ); -const navigate = useNavigate(); + const navigate = useNavigate(); -const startSearching = useCallback((queryToEncode: string) => { - updateQuery(queryToEncode); - navigate(`/?q=${encodeURIComponent(queryToEncode)}`); - }, [updateQuery, navigate]); + const startSearching = useCallback( + (queryToEncode: string) => { + updateQuery(queryToEncode); + navigate(`/?q=${encodeURIComponent(queryToEncode)}`); + }, + [updateQuery, navigate], + ); const debouncedStartSearching = debounce(startSearching, 3000); // 3000ms = 3s @@ -30,17 +33,20 @@ const startSearching = useCallback((queryToEncode: string) => { const userQuery = event.target.value.trim(); const userQueryIsBlank = userQuery.length === 0; const suggestedQueryIsBlank = suggestedQuery.trim().length === 0; - + if (userQueryIsBlank && suggestedQueryIsBlank) { setSuggestedQuery(getRandomQuerySuggestion()); } else if (!userQueryIsBlank && !suggestedQueryIsBlank) { setSuggestedQuery(""); } - // Start searching immediately when user types if (!userQueryIsBlank) { debouncedStartSearching(userQuery); } + // If the user deleted the input, reset the search results + else { + debouncedStartSearching(""); + } }; useEffect(() => {