From 20aaef67d719aae8ad8badaf2901934d5d15aef9 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Tue, 12 Sep 2023 12:04:41 +0200
Subject: [PATCH] :sparkles: Working form submission with query params

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 src/App.tsx                        | 2 +-
 src/components/MovieForm/index.tsx | 5 ++++-
 src/util/navigate.ts               | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 61e6cdc..109a21b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,7 +36,7 @@ function App() {
     } else {
       setLoading(false)
     }
-  }, [])
+  }, [location.search])
 
   const calculatePages = (totalResults: number): number => {
     return Math.round(totalResults / 10)
diff --git a/src/components/MovieForm/index.tsx b/src/components/MovieForm/index.tsx
index 1235ff6..ff05ac5 100644
--- a/src/components/MovieForm/index.tsx
+++ b/src/components/MovieForm/index.tsx
@@ -11,7 +11,10 @@ const MovieForm: React.FC = () => {
   return (
     <q.form
       className="flex flex-col gap-3 card p-4 rounded-lg w-full lg:px-14"
-      onSubmit={() => navigateToPage(movieTitle, movieYear, movieType)}
+      onSubmit={(e) => {
+        e.preventDefault()
+        navigateToPage(movieTitle, movieYear, movieType)
+      }}
     >
       <q.label>Choose a movie title:</q.label>
       <q.input
diff --git a/src/util/navigate.ts b/src/util/navigate.ts
index 4ed6e17..56c2504 100644
--- a/src/util/navigate.ts
+++ b/src/util/navigate.ts
@@ -11,6 +11,8 @@ export const useNavigateToPage = () => {
       if (type) query += `&type=${type}`
       if (year) query += `&year=${year}`
 
+      console.log(query)
+
       navigate(query)
     }
   }