From db6b29b7d21f374765f6279f2a1668afaada2488 Mon Sep 17 00:00:00 2001
From: haraldnilsen <harald_998@hotmail.com>
Date: Tue, 5 Sep 2023 17:31:22 +0200
Subject: [PATCH] :recycle: refactored movieform

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 src/App.tsx                        | 53 +++++--------------------
 src/components/MovieForm/index.tsx | 64 ++++++++++++++++++++++++++++++
 src/components/index.ts            |  3 +-
 3 files changed, 75 insertions(+), 45 deletions(-)
 create mode 100644 src/components/MovieForm/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f9bc564..899ab31 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react'
 import './App.css'
 import q from 'qjuul'
-import Pagination from './components/Pagination'
-import { MovieTableRow } from './components'
+import { MovieTableRow, MovieForm, Pagination } from './components'
 import type { movieObject } from './types/movie'
 import Modal from 'react-modal'
 
@@ -95,48 +94,14 @@ function App() {
         <q.div className="flex flex-col w-full items-center">
           <q.h1 className="py-4">All movies</q.h1>
 
-          <q.form
-            className="flex flex-col gap-3 card p-4 rounded-lg w-full px-28"
-            onSubmit={handleMovieSubmit}
-          >
-            <q.label>Choose a movie title:</q.label>
-            <q.input
-              type="text"
-              id="movieTitle"
-              placeholder="Movie title"
-              onChange={(e) => setMovieTitle(e.target.value)}
-              className="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
-            />
-            <q.label>Choose year movie was made: (OPTIONAL)</q.label>
-            <q.select
-              className="p-2 rounded-md border  border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
-              onChange={(e) => setMovieYear(e.target.value)}
-            >
-              {/* Option for year 1923-2023 */}
-              <q.option value="">All years</q.option>
-              {Array.from(Array(100), (e, i) => {
-                const year = 2023 - i
-                return (
-                  <q.option key={i} value={year}>
-                    {year}
-                  </q.option>
-                )
-              })}
-            </q.select>
-            <q.label>Choose type: (OPTIONAL)</q.label>
-            <q.select
-              className="p-2 rounded-md border  border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
-              onChange={(e) => setMovieType(e.target.value)}
-            >
-              <q.option value="">All types</q.option>
-              <q.option value="movie">Movies</q.option>
-              <q.option value="series">Series</q.option>
-              <q.option value="episode">Episodes</q.option>
-            </q.select>
-            <q.button className="bg-white p-3 my-2 rounded-md w-2/5 mx-auto text-red-900 font-semibold">
-              Find movies
-            </q.button>
-          </q.form>
+          <MovieForm
+            {...{
+              handleMovieSubmit,
+              setMovieTitle,
+              setMovieType,
+              setMovieYear,
+            }}
+          />
           <q.div className="flex pt-10">
             {!loading && totalPages && (
               <Pagination
diff --git a/src/components/MovieForm/index.tsx b/src/components/MovieForm/index.tsx
new file mode 100644
index 0000000..0acd638
--- /dev/null
+++ b/src/components/MovieForm/index.tsx
@@ -0,0 +1,64 @@
+import type { movieObject } from '../../types/movie'
+import Modal from 'react-modal'
+import q from 'qjuul'
+
+interface MovieFormProps {
+  handleMovieSubmit: (event: any) => void
+  setMovieTitle: (title: string) => void
+  setMovieYear: (year: string) => void
+  setMovieType: (type: string) => void
+}
+
+const MovieForm: React.FC<MovieFormProps> = ({
+  handleMovieSubmit,
+  setMovieTitle,
+  setMovieType,
+  setMovieYear,
+}) => {
+  return (
+    <q.form
+      className="flex flex-col gap-3 card p-4 rounded-lg w-full px-28"
+      onSubmit={handleMovieSubmit}
+    >
+      <q.label>Choose a movie title:</q.label>
+      <q.input
+        type="text"
+        id="movieTitle"
+        placeholder="Movie title"
+        onChange={(e) => setMovieTitle(e.target.value)}
+        className="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+      />
+      <q.label>Choose year movie was made: (OPTIONAL)</q.label>
+      <q.select
+        className="p-2 rounded-md border  border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+        onChange={(e) => setMovieYear(e.target.value)}
+      >
+        {/* Option for year 1923-2023 */}
+        <q.option value="">All years</q.option>
+        {Array.from(Array(100), (e, i) => {
+          const year = 2023 - i
+          return (
+            <q.option key={i} value={year}>
+              {year}
+            </q.option>
+          )
+        })}
+      </q.select>
+      <q.label>Choose type: (OPTIONAL)</q.label>
+      <q.select
+        className="p-2 rounded-md border  border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+        onChange={(e) => setMovieType(e.target.value)}
+      >
+        <q.option value="">All types</q.option>
+        <q.option value="movie">Movies</q.option>
+        <q.option value="series">Series</q.option>
+        <q.option value="episode">Episodes</q.option>
+      </q.select>
+      <q.button className="bg-white p-3 my-2 rounded-md w-2/5 mx-auto text-red-900 font-semibold">
+        Find movies
+      </q.button>
+    </q.form>
+  )
+}
+
+export default MovieForm
diff --git a/src/components/index.ts b/src/components/index.ts
index de0881d..2860fa7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
-export { default as PaginationButton } from './PaginationButton'
+export { default as Pagination } from './Pagination'
 export { default as MovieTableRow } from './MovieTableRow'
+export { default as MovieForm } from './MovieForm'