Merge branch 'main' into QueryParams

package.json

@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "git-mob": "^2.4.0",
     "qjuul": "^1.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-modal": "^3.16.1"
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.15.0"
   },
   "devDependencies": {
     "@types/node": "^20.5.9",

src/App.tsx

@@ -126,4 +126,4 @@ function App() {
   )
 }
 
-export default App
+export default App

src/api/fetchMovie.ts

@@ -1,6 +1,6 @@
 import { movieResponse } from '../types/movie'
 
-const API_MOVIE_KEY = 'd92949d8'
+const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY
 
 export const fetchMovie = async (
   title: string,
@@ -21,6 +21,5 @@ export const fetchMovie = async (
     .catch((error) => {
       console.log('Error:', error)
     })
-
   return response
-}
+}

src/components/MovieForm/index.tsx

@@ -72,4 +72,4 @@ const MovieForm: React.FC<MovieFormInterface> = ({
   )
 }
 
-export default MovieForm
+export default MovieForm

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])