🚧 prøver å gjøre queryparams på nytt

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

src/App.tsx

@@ -3,35 +3,39 @@ import './App.css'
 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'
 
 function App() {
-  const API_MOVIE_KEY = 'd92949d8'
   const [movies, setMovies] = useState<movieObject[]>([])
   const [loading, setLoading] = useState(true)
   const [currentPage, setCurrentPage] = useState(1)
   const [totalPages, setTotalPages] = useState(0)
   const [modalOpen, setModalOpen] = useState(false)
   const [modalMovie, setModalMovie] = useState<movieObject | null>(null)
-  const [movieType, setMovieType] = useState('')
-  const [movieYear, setMovieYear] = useState('')
-  const [movieTitle, setMovieTitle] = useState('')
   const [sortAscending, setSortAscending] = useState(true)
-
-  console.log('App mounted')
+  const location = useLocation()
 
   useEffect(() => {
-    fetch(
-      `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${movieTitle}&page=${currentPage}`
-    )
-      .then((response) => response.json())
-      .then((data) => {
-        setMovies(data.Search)
-        console.log(data)
-        setTotalPages(data.totalResults)
-      })
-      .then(() => setLoading(false))
-      .catch((error) => console.log(error))
-  }, [currentPage])
+    const searchParams = new URLSearchParams(location.search)
+    const title = searchParams.get('title') || ''
+    const page = searchParams.get('page') || ''
+    const type = searchParams.get('type') || ''
+    const year = searchParams.get('y') || ''
+
+    const handleFetchMovie = async () => {
+      const response = await fetchMovie(title, page, type, year)
+      if (response.Response == 'true') {
+        setMovies(response.Search)
+        setTotalPages(Number(response.totalResults))
+        setLoading(false)
+      }
+    }
+
+    if (title) {
+      handleFetchMovie()
+    }
+  }, [])
 
   const calculatePages = (totalResults: number): number => {
     return Math.round(totalResults / 10)
@@ -46,21 +50,6 @@ function App() {
     setModalMovie(movie)
   }
 
-  const handleMovieSubmit = (event: any) => {
-    event.preventDefault()
-    fetch(
-      `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${movieTitle}&type=${movieType}&y=${movieYear}`
-    )
-      .then((response) => response.json())
-      .then((data) => {
-        setMovies(data.Search)
-        console.log(data)
-        setTotalPages(data.totalResults)
-      })
-      .then(() => setLoading(false))
-      .catch((error) => console.log(error))
-  }
-
   const sortHandler = (sortType: string) => {
     let sortedMovies: movieObject[] = []
 

src/api/fetchMovie.ts

@@ -0,0 +1,26 @@
+import { movieResponse } from '../types/movie'
+
+const API_MOVIE_KEY = 'd92949d8'
+
+export const fetchMovie = async (
+  title: string,
+  page: string = '1',
+  type?: string,
+  year?: string
+): Promise<movieResponse> => {
+  let query = `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}s=${title}&page=${page}`
+
+  if (type) query += `&type=${type}`
+  if (year) query += `&year=${year}`
+
+  const response = await fetch(query)
+    .then((response) => response.json())
+    .then((data) => {
+      return data
+    })
+    .catch((error) => {
+      console.log('Error:', error)
+    })
+
+  return response
+}

src/main.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import { BrowserRouter as Router } from 'react-router-dom'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    <Router>
       <App />
+    </Router>
   </React.StrictMode>
 )

src/types/movie.ts

@@ -7,3 +7,9 @@ export type movieObject = {
 }
 
 export type modalMovieType = movieObject | null
+
+export type movieResponse = {
+  Response: string
+  totalResults: string
+  Search: movieObject[]
+}

src/util/navigate.ts

@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router'
+
+const navigate = useNavigate()
+
+export const navigateToPage = (
+  title?: string,
+  page: string = '1',
+  type?: string,
+  year?: string
+) => {
+  if (!title) navigate('')
+  else {
+    let query = `?title=${title}&page=${page}`
+
+    if (type) query += `&type=${type}`
+    if (year) query += `&year=${year}`
+
+    navigate(query)
+  }
+}