✨ modal showing for each movie

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

src/components/MovieTableRow/index.tsx

@@ -0,0 +1,27 @@
+import type { movieObject } from '../../types/movie'
+import Modal from 'react-modal'
+import q from 'qjuul'
+import { useState } from 'react'
+
+interface MovieTableRowProps {
+  movie: movieObject
+  onClick: () => void
+}
+
+const mainAppElement = document.getElementById('root')
+
+Modal.setAppElement(mainAppElement as HTMLElement)
+
+const MovieTableRow: React.FC<MovieTableRowProps> = ({ movie, onClick }) => {
+  return (
+    <q.tr onClick={onClick} className="card rounded-md">
+      <q.td className="p-2">
+        <q.img src={movie.Poster} alt={movie.Title} width="100" />
+      </q.td>
+      <q.td>{movie.Title}</q.td>
+      <q.td>{movie.Year}</q.td>
+    </q.tr>
+  )
+}
+
+export default MovieTableRow

src/components/Pagination/index.tsx

@@ -22,7 +22,6 @@ const Pagination: React.FC<PaginationProps> = ({
       setShowLeftDots(currentPage > 4 ? true : false)
       setShowRightDots(currentPage < totalPages - 3 ? true : false)
     }
-    console.log('hei')
     if (!showLeftDots && !showRightDots) {
       setShowingNumbers(Array.from(Array(totalPages).keys()))
     }
@@ -60,7 +59,7 @@ const Pagination: React.FC<PaginationProps> = ({
           )}
 
           {showingNumbers.map((page) => (
-            <q.div>
+            <q.div key={page}>
               <PaginationButton
                 pageNumber={page}
                 handlePageChange={handlePageChange}

src/components/index.ts

@@ -1 +1,2 @@
 export { default as PaginationButton } from './PaginationButton'
+export { default as MovieTableRow } from './MovieTableRow'