🚧 pagination funker, men ikke år/type

Co-authored-by: haraldnilsen <harald_998@hotmail.com>

src/App.tsx

@@ -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

src/api/fetchMovie.ts

@@ -1,6 +1,6 @@
 import { movieResponse } from '../types/movie'
 
-const API_MOVIE_KEY = import.meta.env.VITE_API_MOVIE_KEY
+const API_MOVIE_KEY = 'd92949d8'
 
 export const fetchMovie = async (
   title: string,
@@ -11,7 +11,7 @@ export const fetchMovie = async (
   let query = `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&page=${page}`
 
   if (type) query += `&type=${type}`
-  if (year) query += `&year=${year}`
+  if (year) query += `&y=${year}`
 
   const response = await fetch(query)
     .then((response) => response.json())

src/components/MovieForm/index.tsx

@@ -1,12 +1,23 @@
-import { useState } from 'react'
 import q from 'qjuul'
 import { useNavigateToPage } from '../../util/navigate'
 
-const MovieForm: React.FC = () => {
-  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') || '')
+interface MovieFormInterface {
+  movieTitle: string
+  movieType: string
+  movieYear: string
+  setMovieTitle: (title: string) => void
+  setMovieType: (type: string) => void
+  setMovieYear: (year: string) => void
+}
+
+const MovieForm: React.FC<MovieFormInterface> = ({
+  movieTitle,
+  movieType,
+  movieYear,
+  setMovieTitle,
+  setMovieType,
+  setMovieYear,
+}) => {
   const navigateToPage = useNavigateToPage()
 
   return (
@@ -14,7 +25,7 @@ const MovieForm: React.FC = () => {
       className="flex flex-col gap-3 card p-4 rounded-lg w-full lg:px-14"
       onSubmit={(e) => {
         e.preventDefault()
-        navigateToPage(movieTitle, movieYear, movieType)
+        navigateToPage(movieTitle, movieType, movieYear)
       }}
     >
       <q.label>Choose a movie title:</q.label>
@@ -28,8 +39,9 @@ const MovieForm: React.FC = () => {
       />
       <q.label>Choose year movie was made: (OPTIONAL)</q.label>
       <q.select
-        className="p-2 rounded-md border text-gray-500 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+        className="p-2 rounded-md border text-black border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
         onChange={(e) => setMovieYear(e.target.value)}
+        value={movieYear}
       >
         {/* Option for year 1923-2023 */}
         <q.option value="">All years</q.option>
@@ -44,8 +56,9 @@ const MovieForm: React.FC = () => {
       </q.select>
       <q.label>Choose type: (OPTIONAL)</q.label>
       <q.select
-        className="p-2 rounded-md border text-gray-500 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+        className="p-2 rounded-md border text-black border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
         onChange={(e) => setMovieType(e.target.value)}
+        value={movieType}
       >
         <q.option value="">All types</q.option>
         <q.option value="movie">Movies</q.option>

src/util/navigate.ts

@@ -4,12 +4,14 @@ export const useNavigateToPage = () => {
   const navigate = useNavigate()
 
   return (title?: string, type?: string, year?: string, page: string = '1') => {
-    if (!title) navigate('')
-    else {
+    if (!title) {
+      navigate('')
+      window.location.reload()
+    } else {
       let query = `?title=${title}&page=${page}`
 
-      if (year) query += `&year=${year}`
       if (type) query += `&type=${type}`
+      if (year) query += `&year=${year}`
 
       navigate(query)
     }