✨ working query params from url - not form

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

src/App.tsx

@@ -17,23 +17,24 @@ function App() {
   const location = useLocation()
 
   useEffect(() => {
+    const handleFetchMovie = async () => {
+      const response = await fetchMovie(title, page, type, year)
+      if (response.Response == 'True') {
+        setMovies(response.Search)
+        setTotalPages(Number(response.totalResults))
+        setLoading(false)
+      }
+    }
     const searchParams = new URLSearchParams(location.search)
     const title = searchParams.get('title') || ''
     const page = searchParams.get('page') || ''
     const type = searchParams.get('type') || ''
     const year = searchParams.get('y') || ''
 
-    const handleFetchMovie = async () => {
-      const response = await fetchMovie(title, page, type, year)
-      if (response.Response == 'true') {
-        setMovies(response.Search)
-        setTotalPages(Number(response.totalResults))
-        setLoading(false)
-      }
-    }
-
     if (title) {
       handleFetchMovie()
+    } else {
+      setLoading(false)
     }
   }, [])
 
@@ -78,16 +79,9 @@ function App() {
         <MovieModal {...{ setModalOpen, modalMovie, modalOpen }} />
         <q.div className="flex flex-col w-full items-center">
           <q.h1 className="py-4">All movies</q.h1>
-          <MovieForm
-            {...{
-              handleMovieSubmit,
-              setMovieTitle,
-              setMovieType,
-              setMovieYear,
-            }}
-          />
+          <MovieForm />
           <q.div className="flex pt-10">
-            {!loading && totalPages && (
+            {!loading && movies.length > 0 && (
               <Pagination
                 currentPage={currentPage}
                 totalPages={calculatePages(totalPages)}
@@ -97,7 +91,7 @@ function App() {
           </q.div>
           {loading ? (
             <q.h1>Loading...</q.h1>
-          ) : movies ? (
+          ) : movies.length > 0 ? (
             <MovieTable {...{ handleModalOpen, sortHandler, movies }} />
           ) : (
             <q.h2>Find a list of movies by searching above ☝️ </q.h2>

src/api/fetchMovie.ts

@@ -1,6 +1,6 @@
 import { movieResponse } from '../types/movie'
 
-const API_MOVIE_KEY = 'd92949d8'
+const API_MOVIE_KEY = import.meta.env.VITE_API_MOVIE_KEY
 
 export const fetchMovie = async (
   title: string,
@@ -8,7 +8,7 @@ export const fetchMovie = async (
   type?: string,
   year?: string
 ): Promise<movieResponse> => {
-  let query = `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}s=${title}&page=${page}`
+  let query = `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&page=${page}`
 
   if (type) query += `&type=${type}`
   if (year) query += `&year=${year}`

src/components/MovieForm/index.tsx

@@ -1,24 +1,17 @@
-import type { movieObject } from '../../types/movie'
-import Modal from 'react-modal'
+import { useState } from 'react'
 import q from 'qjuul'
+import { useNavigateToPage } from '../../util/navigate'
 
-interface MovieFormProps {
-  handleMovieSubmit: (event: any) => void
-  setMovieTitle: (title: string) => void
-  setMovieYear: (year: string) => void
-  setMovieType: (type: string) => void
-}
+const MovieForm: React.FC = () => {
+  const [movieTitle, setMovieTitle] = useState('')
+  const [movieYear, setMovieYear] = useState('')
+  const [movieType, setMovieType] = useState('')
+  const navigateToPage = useNavigateToPage()
 
-const MovieForm: React.FC<MovieFormProps> = ({
-  handleMovieSubmit,
-  setMovieTitle,
-  setMovieType,
-  setMovieYear,
-}) => {
   return (
     <q.form
       className="flex flex-col gap-3 card p-4 rounded-lg w-full lg:px-14"
-      onSubmit={handleMovieSubmit}
+      onSubmit={() => navigateToPage(movieTitle, movieYear, movieType)}
     >
       <q.label>Choose a movie title:</q.label>
       <q.input

src/util/navigate.ts

@@ -1,20 +1,17 @@
 import { useNavigate } from 'react-router'
 
-const navigate = useNavigate()
+export const useNavigateToPage = () => {
+  const navigate = useNavigate()
 
-export const navigateToPage = (
-  title?: string,
-  page: string = '1',
-  type?: string,
-  year?: string
-) => {
-  if (!title) navigate('')
-  else {
-    let query = `?title=${title}&page=${page}`
+  return (title?: string, page: string = '1', type?: string, year?: string) => {
+    if (!title) navigate('')
+    else {
+      let query = `?title=${title}&page=${page}`
 
-    if (type) query += `&type=${type}`
-    if (year) query += `&year=${year}`
+      if (type) query += `&type=${type}`
+      if (year) query += `&year=${year}`
 
-    navigate(query)
+      navigate(query)
+    }
   }
 }