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

🚧 back to working query params

Browse source 
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-09-12 13:22:16 +02:00
parent 20aaef67d7
commit a4c06834e4
3 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.tsx
View file

@ -4,7 +4,7 @@ import q from 'qjuul'
import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
import type { movieObject } from './types/movie'
import { fetchMovie } from './api/fetchMovie'
import { useLocation } from 'react-router'
import { useLocation } from 'react-router-dom'
function App() {
const [movies, setMovies] = useState<movieObject[]>([])
@ -22,6 +22,7 @@ function App() {
if (response.Response == 'True') {
setMovies(response.Search)
setTotalPages(Number(response.totalResults))
setCurrentPage(Number(page))
setLoading(false)
}
}

8
src/components/MovieForm/index.tsx
View file

@ -3,9 +3,10 @@ import q from 'qjuul'
import { useNavigateToPage } from '../../util/navigate'
const MovieForm: React.FC = () => {
const [movieTitle, setMovieTitle] = useState('')
const [movieYear, setMovieYear] = useState('')
const [movieType, setMovieType] = useState('')
const searchParams = new URLSearchParams(window.location.search)
const [movieTitle, setMovieTitle] = useState(searchParams.get('title') || '')
const [movieYear, setMovieYear] = useState(searchParams.get('y') || '')
const [movieType, setMovieType] = useState(searchParams.get('type') || '')
const navigateToPage = useNavigateToPage()
return (
@ -21,6 +22,7 @@ const MovieForm: React.FC = () => {
type="text"
id="movieTitle"
placeholder="Movie title"
value={movieTitle.charAt(0).toUpperCase() + movieTitle.slice(1)}
onChange={(e) => setMovieTitle(e.target.value)}
className="border text-black border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
/>

6
src/util/navigate.ts
View file

@ -3,15 +3,13 @@ import { useNavigate } from 'react-router'
export const useNavigateToPage = () => {
const navigate = useNavigate()
return (title?: string, page: string = '1', type?: string, year?: string) => {
return (title?: string, type?: string, year?: string, page: string = '1') => {
if (!title) navigate('')
else {
let query = `?title=${title}&page=${page}`
if (type) query += `&type=${type}`
if (year) query += `&year=${year}`
console.log(query)
if (type) query += `&type=${type}`
navigate(query)
}