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

🚧 WIP query params

Browse source 
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-09-12 09:39:11 +02:00
parent cc2979bace
commit b60f59a48e
1 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/App.tsx
View file

@ -1,10 +1,10 @@
import { useEffect, useState, FormEvent } from 'react'
import './App.css'
import q from 'qjuul'
import { MovieForm, Pagination, MovieTable, MovieModal } from './components' import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
import type { movieObject } from './types/movie'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { useEffect, useState, FormEvent } from 'react'
import type { movieObject } from './types/movie'
import { fetchMovie } from './api/fetchMovie' import { fetchMovie } from './api/fetchMovie'
import q from 'qjuul'
import './App.css'
function App() { function App() {
const [movies, setMovies] = useState<movieObject[]>([]) const [movies, setMovies] = useState<movieObject[]>([])
@ -46,25 +46,26 @@ function App() {
pageNum = Number(page) pageNum = Number(page)
} }
if (!movieTitle && !movieType && !movieYear) { if (!title && !type && !year) {
navigate('')
setLoading(false) setLoading(false)
} } else {
navigate(
movieYear && movieType
? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}`
: movieYear
? `?title=${movieTitle}&y=${movieYear}&page=${pageNum}`
: movieYear && movieType
? `?title=${movieTitle}&type=${movieType}&page=${pageNum}`
: `?title=${movieTitle}&page=${pageNum}`
)
navigate( const response = await fetchMovie(title, type, year, pageNum)
movieYear && movieType if (response.Response === 'True') {
? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}` setMovies(response.Search)
: movieYear setTotalPages(response.totalResults)
? `?title=${movieTitle}&y=${movieYear}&page=${pageNum}` setLoading(false)
: movieYear && movieType }
? `?title=${movieTitle}&type=${movieType}&page=${pageNum}`
: `?title=${movieTitle}&page=${pageNum}`
)
const response = await fetchMovie(title, type, year, pageNum)
if (response.Response === 'True') {
setMovies(response.Search)
setTotalPages(response.totalResults)
setLoading(false)
} }
} }
@ -120,7 +121,7 @@ function App() {
}} }}
/> />
<q.div className="flex pt-10"> <q.div className="flex pt-10">
{!loading && totalPages && ( {!loading && totalPages > 0 && (
<Pagination <Pagination
currentPage={currentPage} currentPage={currentPage}
totalPages={calculatePages(totalPages)} totalPages={calculatePages(totalPages)}
@ -130,7 +131,7 @@ function App() {
</q.div> </q.div>
{loading ? ( {loading ? (
<q.h1>Loading...</q.h1> <q.h1>Loading...</q.h1>
) : movies ? ( ) : movies.length > 0 ? (
<MovieTable {...{ handleModalOpen, sortHandler, movies }} /> <MovieTable {...{ handleModalOpen, sortHandler, movies }} />
) : ( ) : (
<q.h2>Find a list of movies by searching above ☝️ </q.h2> <q.h2>Find a list of movies by searching above ☝️ </q.h2>