From cc2979baceeb90fe67b7874bfa0b8da934cd093c Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Mon, 11 Sep 2023 13:26:43 +0200
Subject: [PATCH] :construction: still working on query params

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 src/App.tsx                         | 44 +++++++++++++----------------
 src/api/fetchMovie.ts               | 20 +++++++++++++
 src/components/Pagination/index.tsx |  2 +-
 3 files changed, 41 insertions(+), 25 deletions(-)
 create mode 100644 src/api/fetchMovie.ts

diff --git a/src/App.tsx b/src/App.tsx
index 177ebf5..a6c9932 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, FormEvent } from 'react'
 import './App.css'
 import q from 'qjuul'
 import { MovieForm, Pagination, MovieTable, MovieModal } from './components'
 import type { movieObject } from './types/movie'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { fetchMovie } from './api/fetchMovie'
 
 function App() {
-  const API_MOVIE_KEY = 'd92949d8'
   const [movies, setMovies] = useState<movieObject[]>([])
   const [loading, setLoading] = useState(true)
   const [currentPage, setCurrentPage] = useState(1)
@@ -28,13 +28,13 @@ function App() {
 
   useEffect(() => {
     handleMovieSubmit()
-  }, [currentPage, title, type, year])
+  }, [title, type, year])
 
-  const handleMovieSubmit = ({
+  const handleMovieSubmit = async ({
     event,
     pageNumber,
   }: {
-    event?: any
+    event?: FormEvent
     pageNumber?: number
   } = {}) => {
     if (event) event.preventDefault()
@@ -50,26 +50,22 @@ function App() {
       setLoading(false)
     }
 
-    // navigate(
-    //   movieYear && movieType
-    //     ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${currentPage}`
-    //     : movieYear
-    //     ? `?title=${movieTitle}&y=${movieYear}&page=${currentPage}`
-    //     : movieYear && movieType
-    //     ? `?title=${movieTitle}&type=${movieType}&page=${currentPage}`
-    //     : `?title=${movieTitle}&page=${currentPage}`
-    // )
-
-    fetch(
-      `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${pageNum}`
+    navigate(
+      movieYear && movieType
+        ? `?title=${movieTitle}&type=${movieType}&y=${movieYear}&page=${pageNum}`
+        : movieYear
+        ? `?title=${movieTitle}&y=${movieYear}&page=${pageNum}`
+        : movieYear && movieType
+        ? `?title=${movieTitle}&type=${movieType}&page=${pageNum}`
+        : `?title=${movieTitle}&page=${pageNum}`
     )
-      .then((response) => response.json())
-      .then((data) => {
-        setMovies(data.Search)
-        setTotalPages(data.totalResults)
-      })
-      .then(() => setLoading(false))
-      .catch((error) => console.log(error))
+
+    const response = await fetchMovie(title, type, year, pageNum)
+    if (response.Response === 'True') {
+      setMovies(response.Search)
+      setTotalPages(response.totalResults)
+      setLoading(false)
+    }
   }
 
   const calculatePages = (totalResults: number): number => {
diff --git a/src/api/fetchMovie.ts b/src/api/fetchMovie.ts
new file mode 100644
index 0000000..cb7f065
--- /dev/null
+++ b/src/api/fetchMovie.ts
@@ -0,0 +1,20 @@
+const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY
+
+export const fetchMovie = async (
+  title: string,
+  type: string,
+  year: string,
+  pageNum: number
+) => {
+  const response = await fetch(
+    `http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=${title}&type=${type}&y=${year}&page=${pageNum}`
+  )
+    .then((response) => response.json())
+    .then((data) => {
+      return data
+    })
+    .catch((error) => {
+      console.error('Error:', error)
+    })
+  return response
+}
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index 42f1e41..8ba0549 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -23,7 +23,7 @@ const Pagination: React.FC<PaginationProps> = ({
       setShowRightDots(currentPage < totalPages - 3 ? true : false)
     }
     if (!showLeftDots && !showRightDots) {
-      setShowingNumbers(Array.from(Array(totalPages).keys()))
+      setShowingNumbers(Array.from(Array(totalPages).keys()).map((n) => n + 1))
     }
     if (!showLeftDots && showRightDots) {
       setShowingNumbers([1, 2, 3, 4, 5])