🚧 still WIP on query params

Co-authored-by: haraldnilsen <harald_998@hotmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-09-11 11:48:27 +02:00
parent 8648d58771
commit a87cfe4d7b
2 changed files with 42 additions and 33 deletions

View file

@ -24,22 +24,53 @@ function App() {
const title = searchParams.get('title') || ''
const type = searchParams.get('type') || ''
const year = searchParams.get('y') || ''
// testing testing
const page = searchParams.get('page') || ''
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">