diff --git a/src/App.tsx b/src/App.tsx index 109a21b..47d49ef 100644 --- a/src/App.tsx +++ b/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([]) @@ -22,6 +22,7 @@ function App() { if (response.Response == 'True') { setMovies(response.Search) setTotalPages(Number(response.totalResults)) + setCurrentPage(Number(page)) setLoading(false) } } diff --git a/src/components/MovieForm/index.tsx b/src/components/MovieForm/index.tsx index ff05ac5..5dd5ee3 100644 --- a/src/components/MovieForm/index.tsx +++ b/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 [movieYear, setMovieYear] = useState('') - const [movieType, setMovieType] = useState('') + const searchParams = new URLSearchParams(window.location.search) + const [movieTitle, setMovieTitle] = useState(searchParams.get('title') || '') + 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" /> diff --git a/src/util/navigate.ts b/src/util/navigate.ts index 56c2504..5bbb435 100644 --- a/src/util/navigate.ts +++ b/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}` - - console.log(query) + if (type) query += `&type=${type}` navigate(query) }