sidski/Cinemateket
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚧 pagination funker, men ikke år/type

Browse source 
Co-authored-by: haraldnilsen <harald_998@hotmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-09-12 14:06:53 +02:00 • committed by haraldnilsen
parent a4c06834e4
commit 49144b1cc1
4 changed files with 55 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/App.tsx
View file

@ -5,6 +5,7 @@ import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
import type { movieObject } from './types/movie'
import { fetchMovie } from './api/fetchMovie'
import { useLocation } from 'react-router-dom'
import { useNavigateToPage } from './util/navigate'
function App() {
const [movies, setMovies] = useState<movieObject[]>([])
@ -13,12 +14,18 @@ function App() {
const [totalPages, setTotalPages] = useState(0)
const [modalOpen, setModalOpen] = useState(false)
const [modalMovie, setModalMovie] = useState<movieObject | null>(null)
const navigateToPage = useNavigateToPage()
const searchParams = new URLSearchParams(window.location.search)
const [movieTitle, setMovieTitle] = useState(searchParams.get('title') || '')
const [movieYear, setMovieYear] = useState(searchParams.get('year') || '')
const [movieType, setMovieType] = useState(searchParams.get('type') || '')
const [sortAscending, setSortAscending] = useState(true)
const location = useLocation()
useEffect(() => {
const handleFetchMovie = async () => {
const response = await fetchMovie(title, page, type, year)
console.log(year)
if (response.Response == 'True') {
setMovies(response.Search)
setTotalPages(Number(response.totalResults))
@ -30,7 +37,7 @@ function App() {
const title = searchParams.get('title') || ''
const page = searchParams.get('page') || ''
const type = searchParams.get('type') || ''
const year = searchParams.get('y') || ''
const year = searchParams.get('year') || ''
if (title) {
handleFetchMovie()
@ -45,6 +52,7 @@ function App() {
const handlePageChange = (pageNumber: number) => {
setCurrentPage(pageNumber)
navigateToPage(movieTitle, movieType, movieYear, pageNumber.toString())
}
const handleModalOpen = (movie: movieObject) => {
@ -79,8 +87,23 @@ function App() {
<q.div className="flex flex-col justify-center items-center mx-auto w-3/4 md:w-3/5 lg:w-2/4">
<MovieModal {...{ setModalOpen, modalMovie, modalOpen }} />
<q.div className="flex flex-col w-full items-center">
<q.h1 className="py-4">All movies</q.h1>
<MovieForm />
<q.h1
onClick={() => navigateToPage()}
className="py-8 hover:cursor-pointer text-red-800 text-5xl font-bold"
co="rgb(220 38 38)"
>
Cinemateket
</q.h1>
<MovieForm
{...{
movieTitle,
movieType,
movieYear,
setMovieTitle,
setMovieType,
setMovieYear,
}}
/>
<q.div className="flex pt-10">
{!loading && movies.length > 0 && (
<Pagination