feat: create movie use user input

src/pages/MovieCreate/index.tsx

@@ -9,22 +9,35 @@ import Backend from 'utils/service'
 const Index: React.FC = () => {
   const navigate = useNavigate()
   const [movieTitle, setMovieTitle] = useState('my movie')
+  const [cast, setCast] = useState('cast')
+  const [category, setCategory] = useState('category')
+  const [director, setDirector] = useState('director')
+  const [producer, setProducer] = useState('producer')
+  const [ratingCode, setRatingCode] = useState('rating code')
+  const [reviews, setReviews] = useState('reviews')
+  const [showTime, setShowTime] = useState('2016-01-02T15:04:05Z')
+  const [synopsis, setSynopsis] = useState('synopsis')
+  const [trailerPicture, setTrailerPicture] = useState(
+    'https://placehold.co/400x592'
+  )
+  const [trailerVideo, setTrailerVideo] = useState(
+    'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&controls=0'
+  )
+
   const { run: create } = useRequest(
     async () =>
-      // TODO: replace the movie with user input
       Backend.movie.v1MoviesCreate({
         title: movieTitle,
-        cast: 'cast',
-        category: 'category',
-        director: 'director',
-        producer: 'producer',
-        rating_code: 'rating_code',
-        reviews: 'reviews',
-        show_time: '2016-01-02T15:04:05Z',
-        synopsis: 'synopsis',
-        trailer_picture: 'https://placehold.co/400x592',
-        trailer_video:
-          'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&controls=0'
+        cast,
+        category,
+        director,
+        producer,
+        rating_code: ratingCode,
+        reviews,
+        show_time: showTime,
+        synopsis,
+        trailer_picture: trailerPicture,
+        trailer_video: trailerVideo
       }),
     {
       manual: true,
@@ -50,6 +63,117 @@ const Index: React.FC = () => {
             }}
           />
         </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Cast</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Cast'
+            defaultValue={cast}
+            onChange={e => {
+              setCast(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Category</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Category'
+            defaultValue={category}
+            onChange={e => {
+              setCategory(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Director</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Director'
+            defaultValue={director}
+            onChange={e => {
+              setDirector(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Producer</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Producer'
+            defaultValue={producer}
+            onChange={e => {
+              setProducer(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Rating Code</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Rating Code'
+            defaultValue={ratingCode}
+            onChange={e => {
+              setRatingCode(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Reviews</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Reviews'
+            defaultValue={reviews}
+            onChange={e => {
+              setReviews(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Show Time</Form.Label>
+          <Form.Control
+            type='date'
+            placeholder='Show Time'
+            defaultValue={showTime}
+            onChange={e => {
+              setShowTime(new Date(e.target.value).toISOString())
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Synopsis</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Synopsis'
+            defaultValue={synopsis}
+            onChange={e => {
+              setSynopsis(e.target.value)
+            }}
+          />
+        </Form.Group>
+        {/* add onChange for these form controls */}
+        <Form.Group className='mb-3'>
+          <Form.Label>Trailer Picture</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Trailer Picture'
+            defaultValue={trailerPicture}
+            onChange={e => {
+              setTrailerPicture(e.target.value)
+            }}
+          />
+        </Form.Group>
+        <Form.Group className='mb-3'>
+          <Form.Label>Trailer Video</Form.Label>
+          <Form.Control
+            type='text'
+            placeholder='Trailer Video'
+            defaultValue={trailerVideo}
+            onChange={e => {
+              setTrailerVideo(e.target.value)
+            }}
+          />
+        </Form.Group>
         <Button
           variant='primary'
           type='button'