♻️ refactored movieform
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen
parent
42fd4ee7aa
commit
db6b29b7d2
3 changed files with 75 additions and 45 deletions
53
src/App.tsx
53
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
|
||||
|
|
|
|||
64
src/components/MovieForm/index.tsx
Normal file
64
src/components/MovieForm/index.tsx
Normal file
|
|
@ -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
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
Reference in a new issue