refactor(components): rewrite SearchForm component

* remove searchPage prop (the consumer should handle the submit)
* change onSubmit type
* use `useForm` hook to handle the form

1 files changed, 27 insertions, 6 deletions

diff --git a/src/components/organisms/layout/no-results.tsx b/src/components/organisms/layout/no-results.tsx
index b2acf12..f760616 100644
--- a/src/components/organisms/layout/no-results.tsx
+++ b/src/components/organisms/layout/no-results.tsx
@@ -1,16 +1,37 @@
-import { FC } from 'react';
+import { useRouter } from 'next/router';
+import { type FC, useCallback } from 'react';
 import { useIntl } from 'react-intl';
-import { SearchForm, type SearchFormProps } from '../forms';
-
-export type NoResultsProps = Pick<SearchFormProps, 'searchPage'>;
+import { ROUTES } from '../../../utils/constants';
+import { SearchForm, type SearchFormSubmit } from '../forms';
 
 /**
  * NoResults component
  *
  * Renders a no results text with a search form.
  */
-export const NoResults: FC<NoResultsProps> = ({ searchPage }) => {
+export const NoResults: FC = () => {
   const intl = useIntl();
+  const router = useRouter();
+  const searchSubmitHandler: SearchFormSubmit = useCallback(
+    ({ query }) => {
+      if (!query)
+        return {
+          messages: {
+            error: intl.formatMessage({
+              defaultMessage: 'Query must be longer than one character.',
+              description: 'NoResults: invalid query message',
+              id: 'VkfO7t',
+            }),
+          },
+          validator: (value) => value.query.length > 1,
+        };
+
+      router.push({ pathname: ROUTES.SEARCH, query: { s: query } });
+
+      return undefined;
+    },
+    [intl, router]
+  );
 
   return (
     <>
@@ -28,7 +49,7 @@ export const NoResults: FC<NoResultsProps> = ({ searchPage }) => {
           id: 'DVBwfu',
         })}
       </p>
-      <SearchForm isLabelHidden searchPage={searchPage} />
+      <SearchForm isLabelHidden onSubmit={searchSubmitHandler} />
     </>
   );
 };