[Handle Results] Reset results when user query is cleared from search…

… bar textarea

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,30 +17,36 @@ 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
 
   const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     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(() => {