🚧 WIP query params
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
cc2979bace
commit
b60f59a48e
1 changed files with 24 additions and 23 deletions
19
src/App.tsx
19
src/App.tsx
|
@ -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,10 +46,10 @@ function App() {
|
||||||
pageNum = Number(page)
|
pageNum = Number(page)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!movieTitle && !movieType && !movieYear) {
|
if (!title && !type && !year) {
|
||||||
|
navigate('')
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
} else {
|
||||||
|
|
||||||
navigate(
|
navigate(
|
||||||
movieYear && movieType
|
movieYear && movieType
|
||||||
? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}`
|
? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}`
|
||||||
|
@ -67,6 +67,7 @@ function App() {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const calculatePages = (totalResults: number): number => {
|
const calculatePages = (totalResults: number): number => {
|
||||||
return Math.round(totalResults / 10)
|
return Math.round(totalResults / 10)
|
||||||
|
@ -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>
|
||||||
|
|
Reference in a new issue