🚧 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
	
	 haraldnilsen
						haraldnilsen