🚧 back to working query params

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

src/App.tsx

@@ -4,7 +4,7 @@ import q from 'qjuul'
 import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
 import type { movieObject } from './types/movie'
 import { fetchMovie } from './api/fetchMovie'
-import { useLocation } from 'react-router'
+import { useLocation } from 'react-router-dom'
 
 function App() {
   const [movies, setMovies] = useState<movieObject[]>([])
@@ -22,6 +22,7 @@ function App() {
       if (response.Response == 'True') {
         setMovies(response.Search)
         setTotalPages(Number(response.totalResults))
+        setCurrentPage(Number(page))
         setLoading(false)
       }
     }

src/components/MovieForm/index.tsx

@@ -3,9 +3,10 @@ import q from 'qjuul'
 import { useNavigateToPage } from '../../util/navigate'
 
 const MovieForm: React.FC = () => {
-  const [movieTitle, setMovieTitle] = useState('')
+  const searchParams = new URLSearchParams(window.location.search)
-  const [movieYear, setMovieYear] = useState('')
+  const [movieTitle, setMovieTitle] = useState(searchParams.get('title') || '')
-  const [movieType, setMovieType] = useState('')
+  const [movieYear, setMovieYear] = useState(searchParams.get('y') || '')
+  const [movieType, setMovieType] = useState(searchParams.get('type') || '')
   const navigateToPage = useNavigateToPage()
 
   return (
@@ -21,6 +22,7 @@ const MovieForm: React.FC = () => {
         type="text"
         id="movieTitle"
         placeholder="Movie title"
+        value={movieTitle.charAt(0).toUpperCase() + movieTitle.slice(1)}
         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"
       />

src/util/navigate.ts

@@ -3,15 +3,13 @@ import { useNavigate } from 'react-router'
 export const useNavigateToPage = () => {
   const navigate = useNavigate()
 
-  return (title?: string, page: string = '1', type?: string, year?: string) => {
+  return (title?: string, type?: string, year?: string, page: string = '1') => {
     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}`
-      console.log(query)
 
       navigate(query)
     }