Merge pull request #142 from prithvi2k2/main

Fixed #138 + Minor update to ReadMe

Author: max-programming

README.md

@@ -1,6 +1,7 @@
 # Hacktoberfest Projects 🎉
 
-A Web app that lets you find eligible repositories for Hacktoberfest 2022!
+
+A Web app that lets you find eligible repositories for Hacktoberfest!
 
 Use it here - https://finder.usmans.me
 

components/Hero.tsx

@@ -1,4 +1,4 @@
-import { FormEventHandler } from 'react';
+import { FormEventHandler, useState } from 'react';
 import Link from 'next/link';
 
 import languages from 'assets/languages.json';
@@ -10,11 +10,19 @@ import Button from './Button';
 const { main: mainLanguages, others: otherLanguages } = languages;
 
 function Hero() {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const router = useRouter();
   const handleSubmit: FormEventHandler = e => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
-    const search = formData.get('search');
+    const search = (formData.get('search') as string).trim();
+    // Check if the input is empty or contains only spaces
+    if (search === '') {
+      setErrorMessage('Empty search terms invalid!');
+      return;
+    }
+    // Clear any previous error message & proceed to search
+    setErrorMessage(null);
     router.push(`/repos/${search}`);
   };
   return (

components/Search.tsx

@@ -19,7 +19,11 @@ export default function Search({ searchBarWrapperStyles }: SearchProps) {
   });
 
   const onSubmit: SubmitHandler<FormValues> = ({ searchQuery }) => {
-    router.push({ query: { ...router.query, q: searchQuery } });
+    let trimmedQuery = searchQuery.trim();
+    //Performs search only with non-empty strings
+    if (trimmedQuery !== '') {
+      router.push({ query: { ...router.query, q: trimmedQuery } });
+    }
   };
 
   return (
@@ -40,7 +44,7 @@ export default function Search({ searchBarWrapperStyles }: SearchProps) {
             type="button"
             onClick={() => reset()}
           >
-            <GoX color="lightgrey" />
+            <GoX color="white" />
           </button>
         </div>
       </form>