🚧 still WIP on query params

Co-authored-by: haraldnilsen <harald_998@hotmail.com>

src/App.tsx

@@ -24,22 +24,53 @@ function App() {
   const title = searchParams.get('title') || ''
   const type = searchParams.get('type') || ''
   const year = searchParams.get('y') || ''
-
+  const page = searchParams.get('page') || ''
-  // testing testing
 
   useEffect(() => {
+    handleMovieSubmit()
+  }, [currentPage, title, type, year])
+
+  const handleMovieSubmit = ({
+    event,
+    pageNumber,
+  }: {
+    event?: any
+    pageNumber?: number
+  } = {}) => {
+    if (event) event.preventDefault()
+
+    let pageNum: number
+    if (pageNumber) {
+      pageNum = pageNumber
+    } else {
+      pageNum = Number(page)
+    }
+
+    if (!movieTitle && !movieType && !movieYear) {
+      setLoading(false)
+    }
+
+    // navigate(
+    //   movieYear && movieType
+    //     ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}`
+    //     : movieYear
+    //     ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}`
+    //     : movieYear && movieType
+    //     ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}`
+    //     : `?title=${movieTitle}&page=${currentPage}`
+    // )
+
     fetch(
-      `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${currentPage}`
+      `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${pageNum}`
     )
       .then((response) => response.json())
       .then((data) => {
         setMovies(data.Search)
-        console.log(data)
         setTotalPages(data.totalResults)
       })
       .then(() => setLoading(false))
       .catch((error) => console.log(error))
-  }, [title, type, year])
+  }
 
   const calculatePages = (totalResults: number): number => {
     return Math.round(totalResults / 10)
@@ -47,7 +78,7 @@ function App() {
 
   const handlePageChange = (pageNumber: number) => {
     setCurrentPage(pageNumber)
-    handleMovieSubmit()
+    handleMovieSubmit({ pageNumber })
   }
 
   const handleModalOpen = (movie: movieObject) => {
@@ -55,30 +86,6 @@ function App() {
     setModalMovie(movie)
   }
 
-  const handleMovieSubmit = (event?: any) => {
-    if (event) event.preventDefault()
-    navigate(
-      movieYear && movieType
-        ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}`
-        : movieYear
-        ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}`
-        : movieYear && movieType
-        ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}`
-        : `?title=${movieTitle}&page=${currentPage}`
-    )
-    fetch(
-      `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${currentPage}`
-    )
-      .then((response) => response.json())
-      .then((data) => {
-        setMovies(data.Search)
-        console.log(data)
-        setTotalPages(data.totalResults)
-      })
-      .then(() => setLoading(false))
-      .catch((error) => console.log(error))
-  }
-
   const sortHandler = (sortType: string) => {
     let sortedMovies: movieObject[] = []
 
@@ -113,6 +120,7 @@ function App() {
               setMovieTitle,
               setMovieType,
               setMovieYear,
+              movieTitle,
             }}
           />
           <q.div className="flex pt-10">

src/components/MovieForm/index.tsx

@@ -1,5 +1,3 @@
-import type { movieObject } from '../../types/movie'
-import Modal from 'react-modal'
 import q from 'qjuul'
 
 interface MovieFormProps {
@@ -7,6 +5,7 @@ interface MovieFormProps {
   setMovieTitle: (title: string) => void
   setMovieYear: (year: string) => void
   setMovieType: (type: string) => void
+  movieTitle: string
 }
 
 const MovieForm: React.FC<MovieFormProps> = ({
@@ -14,17 +13,19 @@ const MovieForm: React.FC<MovieFormProps> = ({
   setMovieTitle,
   setMovieType,
   setMovieYear,
+  movieTitle,
 }) => {
   return (
     <q.form
       className="flex flex-col gap-3 card p-4 rounded-lg w-full lg:px-14"
-      onSubmit={handleMovieSubmit}
+      onSubmit={(event) => handleMovieSubmit({ event: event })}
     >
       <q.label>Choose a movie title:</q.label>
       <q.input
         type="text"
         id="movieTitle"
         placeholder="Movie title"
+        value={movieTitle.length > 0 ? movieTitle : ''}
         onChange={(e) => setMovieTitle(e.target.value)}
         className="border text-black border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
       />