♻️ componentization of objects

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

src/App.tsx

@@ -1,7 +1,13 @@
 import { useEffect, useState } from 'react'
 import './App.css'
 import q from 'qjuul'
-import { MovieTableRow, MovieForm, Pagination } from './components'
+import {
+  MovieTableRow,
+  MovieForm,
+  Pagination,
+  MovieTable,
+  MovieModal,
+} from './components'
 import type { movieObject } from './types/movie'
 import Modal from 'react-modal'
 
@@ -87,36 +93,9 @@ function App() {
   return (
     <>
       <q.div className="flex flex-col justify-center items-center mx-auto w-2/4">
-        <Modal
+        <MovieModal {...{ setModalOpen, modalMovie, modalOpen }} />
-          className="p-6 bg-black rounded-lg outline-none" // styles for the modal container
-          overlayClassName="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" // styles for the overlay
-          isOpen={modalOpen}
-          onRequestClose={() => setModalOpen(false)}
-        >
-          <q.div className="flex">
-            <q.img
-              className="h-44 max-w-sm mx-auto mb-4 rounded-md shadow"
-              src={modalMovie?.Poster}
-              alt={modalMovie?.Title}
-            />
-            <q.div className="flex flex-col px-10 pt-5">
-              <q.h1 className="text-xl font-bold mb-4">
-                {modalMovie?.Title}
-              </q.h1>
-              <q.p>Year: {modalMovie?.Year}</q.p>
-              <q.p>Type: {modalMovie?.Type}</q.p>
-              <q.a
-                className='"underline text-blue-500 hover:text-blue-700"'
-                href={`https://www.imdb.com/title/${modalMovie?.imdbID}`}
-              >
-                {`https://www.imdb.com/title/${modalMovie?.imdbID}`}
-              </q.a>
-            </q.div>
-          </q.div>
-        </Modal>
         <q.div className="flex flex-col w-full items-center">
           <q.h1 className="py-4">All movies</q.h1>
-
           <MovieForm
             {...{
               handleMovieSubmit,
@@ -135,26 +114,7 @@ function App() {
             )}
           </q.div>
           {!loading && movies ? (
-            <q.div className="w-full">
+            <MovieTable {...{ handleModalOpen, sortHandler, movies }} />
-              <q.table className="border-separate border-spacing-y-5 w-full">
-                <q.thead>
-                  <q.tr>
-                    <q.th>Poster</q.th>
-                    <q.th onClick={() => sortHandler('title')}>Title</q.th>
-                    <q.th onClick={() => sortHandler('year')}>Year</q.th>
-                  </q.tr>
-                </q.thead>
-                <q.tbody>
-                  {movies.map((movie: movieObject) => (
-                    <MovieTableRow
-                      movie={movie}
-                      key={movie.imdbID}
-                      onClick={() => handleModalOpen(movie)}
-                    />
-                  ))}
-                </q.tbody>
-              </q.table>
-            </q.div>
           ) : (
             <q.h1>Loading...</q.h1>
           )}

src/components/MovieModal/index.tsx

@@ -0,0 +1,45 @@
+import type { modalMovieType } from '../../types/movie'
+import q from 'qjuul'
+import Modal from 'react-modal'
+
+interface MovieModalProps {
+  setModalOpen: (status: boolean) => void
+  modalMovie: modalMovieType
+  modalOpen: boolean
+}
+
+const MovieModal: React.FC<MovieModalProps> = ({
+  setModalOpen,
+  modalMovie,
+  modalOpen,
+}) => {
+  return (
+    <Modal
+      className="p-6 bg-black rounded-lg outline-none" // styles for the modal container
+      overlayClassName="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" // styles for the overlay
+      isOpen={modalOpen}
+      onRequestClose={() => setModalOpen(false)}
+    >
+      <q.div className="flex">
+        <q.img
+          className="h-44 max-w-sm mx-auto mb-4 rounded-md shadow"
+          src={modalMovie?.Poster}
+          alt={modalMovie?.Title}
+        />
+        <q.div className="flex flex-col px-10 pt-5">
+          <q.h1 className="text-xl font-bold mb-4">{modalMovie?.Title}</q.h1>
+          <q.p>Year: {modalMovie?.Year}</q.p>
+          <q.p>Type: {modalMovie?.Type}</q.p>
+          <q.a
+            className='"underline text-blue-500 hover:text-blue-700"'
+            href={`https://www.imdb.com/title/${modalMovie?.imdbID}`}
+          >
+            {`https://www.imdb.com/title/${modalMovie?.imdbID}`}
+          </q.a>
+        </q.div>
+      </q.div>
+    </Modal>
+  )
+}
+
+export default MovieModal

src/components/MovieTable/index.tsx

@@ -0,0 +1,40 @@
+import type { movieObject } from '../../types/movie'
+import q from 'qjuul'
+import MovieTableRow from '../MovieTableRow'
+
+interface MovieTableProps {
+  handleModalOpen: (movie: movieObject) => void
+  sortHandler: (sortType: string) => void
+  movies: movieObject[]
+}
+
+const MovieTable: React.FC<MovieTableProps> = ({
+  handleModalOpen,
+  sortHandler,
+  movies,
+}) => {
+  return (
+    <q.div className="w-full">
+      <q.table className="border-separate border-spacing-y-5 w-full">
+        <q.thead>
+          <q.tr>
+            <q.th>Poster</q.th>
+            <q.th onClick={() => sortHandler('title')}>Title</q.th>
+            <q.th onClick={() => sortHandler('year')}>Year</q.th>
+          </q.tr>
+        </q.thead>
+        <q.tbody>
+          {movies.map((movie: movieObject) => (
+            <MovieTableRow
+              movie={movie}
+              key={movie.imdbID}
+              onClick={() => handleModalOpen(movie)}
+            />
+          ))}
+        </q.tbody>
+      </q.table>
+    </q.div>
+  )
+}
+
+export default MovieTable

src/components/index.ts

@@ -1,3 +1,5 @@
 export { default as Pagination } from './Pagination'
 export { default as MovieTableRow } from './MovieTableRow'
 export { default as MovieForm } from './MovieForm'
+export { default as MovieTable } from './MovieTable'
+export { default as MovieModal } from './MovieModal'

src/types/movie.ts

@@ -5,3 +5,5 @@ export type movieObject = {
   Year: string
   imdbID: string
 }
+
+export type modalMovieType = movieObject | null