From e2e88ccf1f9d1d835fc64f6181b5405e12882877 Mon Sep 17 00:00:00 2001
From: Boming Zhang <bz14520@uga.edu>
Date: Sat, 17 Feb 2024 18:50:43 -0500
Subject: [PATCH] feat: homepage

---
 src/client/index.ts             |  80 +++++++++++--------
 src/components/Header/index.tsx |  28 ++++---
 src/pages/Main/index.tsx        | 136 +++++++++++++++++++++++++-------
 src/pages/Main/style.module.css |   6 ++
 src/pages/MovieCreate/index.tsx |  22 +++---
 5 files changed, 191 insertions(+), 81 deletions(-)
 create mode 100644 src/pages/Main/style.module.css

diff --git a/src/client/index.ts b/src/client/index.ts
index 0990721..92b83ac 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -16,16 +16,6 @@ export interface SchemaAuth {
   username?: string
 }
 
-export interface SchemaCreateMovie {
-  /** @maxLength 255 */
-  author: string
-  meta: SchemaMeta
-  status: number
-  /** @maxLength 255 */
-  title: string
-  user_id: string
-}
-
 export interface SchemaCreateUser {
   /** @maxLength 150 */
   email: string
@@ -57,27 +47,30 @@ export interface SchemaJWT {
   user_id?: string
 }
 
-export interface SchemaMeta {
-  description?: string
-  picture?: string
-  /**
-   * @min 1
-   * @max 10
-   */
-  rating?: number
-}
-
 export interface SchemaMovie {
   /** @maxLength 255 */
-  author: string
-  created_at?: string
+  cast: string
+  /** @maxLength 255 */
+  category: string
+  /** @maxLength 255 */
+  director: string
   id?: string
-  meta: SchemaMeta
-  status: number
+  /** @maxLength 255 */
+  producer: string
+  /** @maxLength 255 */
+  rating_code: string
+  /** @maxLength 255 */
+  reviews: string
+  /** @maxLength 255 */
+  show_time: string
+  /** @maxLength 255 */
+  synopsis: string
   /** @maxLength 255 */
   title: string
-  updated_at?: string
-  user_id: string
+  /** @maxLength 1023 */
+  trailer_picture: string
+  /** @maxLength 1023 */
+  trailer_video: string
 }
 
 export interface SchemaMovieListResponse {
@@ -102,6 +95,30 @@ export interface SchemaUpdateUser {
   last_name: string
 }
 
+export interface SchemaUpsertMovie {
+  /** @maxLength 255 */
+  cast: string
+  /** @maxLength 255 */
+  category: string
+  /** @maxLength 255 */
+  director: string
+  /** @maxLength 255 */
+  producer: string
+  /** @maxLength 255 */
+  rating_code: string
+  /** @maxLength 255 */
+  reviews: string
+  show_time: string
+  /** @maxLength 255 */
+  synopsis: string
+  /** @maxLength 255 */
+  title: string
+  /** @maxLength 1023 */
+  trailer_picture: string
+  /** @maxLength 1023 */
+  trailer_video: string
+}
+
 export interface SchemaUser {
   created_at?: string
   email?: string
@@ -574,6 +591,10 @@ export class Api<
         offset?: number
         /** limit */
         limit?: number
+        /** search by title */
+        search?: string
+        /** the moive is running or not */
+        running?: boolean
       },
       params: RequestParams = {}
     ) =>
@@ -595,14 +616,11 @@ export class Api<
      * @request POST:/api/v1/movies
      * @secure
      */
-    v1MoviesCreate: (
-      createmovie: SchemaCreateMovie,
-      params: RequestParams = {}
-    ) =>
+    v1MoviesCreate: (movie: SchemaUpsertMovie, params: RequestParams = {}) =>
       this.request<SchemaMovie, SchemaErrorResponse>({
         path: `/api/v1/movies`,
         method: 'POST',
-        body: createmovie,
+        body: movie,
         secure: true,
         type: ContentType.Json,
         format: 'json',
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 22d8ac6..7e33099 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -55,20 +55,22 @@ const Index: React.FC = () => {
                   </Button>
                 </Link>
               ) : (
-                <Link to={`/login?from=${location.pathname}`}>
-                  <Button type='button' className='btn my-1 mx-0 mx-lg-1'>
-                    Login
-                  </Button>
-                </Link>
+                <>
+                  <Link to={`/login?from=${location.pathname}`}>
+                    <Button type='button' className='btn my-1 mx-0 mx-lg-1'>
+                      Login
+                    </Button>
+                  </Link>
+                  <Link to='/register'>
+                    <Button
+                      type='button'
+                      className='btn btn-warning my-1 mx-0 mx-lg-1'
+                    >
+                      Register
+                    </Button>
+                  </Link>
+                </>
               )}
-              <Link to='/register'>
-                <Button
-                  type='button'
-                  className='btn btn-warning my-1 mx-0 mx-lg-1'
-                >
-                  Register
-                </Button>
-              </Link>
             </Nav>
           </Navbar.Collapse>
         </Container>
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index ce12d42..7fbe3c7 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -1,43 +1,125 @@
+import './style.module.css'
 import { useRequest } from 'ahooks'
+import type { SchemaMovie } from 'client'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
+import { useState } from 'react'
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
 import Card from 'react-bootstrap/Card'
-import ListGroup from 'react-bootstrap/ListGroup'
+import { Link } from 'react-router-dom'
 import Backend from 'utils/service'
 
+const Movie: React.FC<{ movie: SchemaMovie }> = ({ movie }) => {
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+  return (
+    <Card style={{ width: '18rem' }} className='mb-3'>
+      <Card.Img variant='top' src={movie.trailer_picture} />
+      <Card.Body>
+        <Card.Title>{movie.title}</Card.Title>
+        <Card.Text>
+          <div>Director: {movie.director}</div>
+          <div>Cast: {movie.cast}</div>
+          <div>Category: {movie.category}</div>
+        </Card.Text>
+        <Button variant='secondary' onClick={handleShow}>
+          Watch Trailer
+        </Button>{' '}
+        <Link to={`/moive/${movie.id}/book`}>
+          <Button variant='primary'>Book Movie</Button>
+        </Link>
+      </Card.Body>
+      <Modal
+        size='lg'
+        aria-labelledby='contained-modal-title-vcenter'
+        centered
+        show={show}
+        onHide={handleClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Trailer of {movie.title}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {/* eslint-disable-next-line react/iframe-missing-sandbox */}
+          <iframe
+            width='100%'
+            height='400px'
+            src={movie.trailer_video}
+            title='Trailer'
+            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+            allowFullScreen
+            sandbox='allow-scripts allow-popups allow-same-origin'
+          />
+        </Modal.Body>
+      </Modal>
+    </Card>
+  )
+}
+const MovieList: React.FC<{ movies: SchemaMovie[] }> = ({ movies }) => (
+  <Row>
+    {movies.map(movie => (
+      <Col key={movie.id}>
+        <Movie movie={movie} />
+      </Col>
+    ))}
+  </Row>
+)
+
+const RunningMovieList: React.FC<{ search: string }> = ({ search }) => {
+  const { data, loading } = useRequest(
+    async () => Backend.movie.v1MoviesList({ running: true, search }),
+    { refreshDeps: [search], debounceWait: 200 }
+  )
+  return (
+    !loading && (data?.data.data ? <MovieList movies={data.data.data} /> : null)
+  )
+}
+
+const ComingMovieList: React.FC<{ search: string }> = ({ search }) => {
+  const { data, loading } = useRequest(
+    async () => Backend.movie.v1MoviesList({ running: false, search }),
+    { refreshDeps: [search], debounceWait: 200 }
+  )
+  return (
+    !loading && (data?.data.data ? <MovieList movies={data.data.data} /> : null)
+  )
+}
+
 const Index: React.FC = () => {
-  const { data, loading } = useRequest(async () => Backend.movie.v1MoviesList())
+  const [search, setSearch] = useState('')
   return (
     <PageContainer>
-      <div className='text-center'>
-        <h1>Vite + React + React-Bootstrap Boilerplate</h1>
+      <div className='text-center mb-3'>
+        <h1>All Moives</h1>
         <p>
           Visit backend swagger: <a href='/swagger'>here</a>
         </p>
+        <Form.Control
+          type='text'
+          placeholder='Search'
+          onChange={e => setSearch(e.target.value)}
+        />
       </div>
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignContent: 'center'
-        }}
-      >
-        <Card style={{ width: '18rem' }}>
-          <Card.Body>
-            <Card.Title>
-              <b>{loading ? 'loading...' : 'Movies'}</b>
-            </Card.Title>
-          </Card.Body>
-          {!loading && (
-            <ListGroup variant='flush'>
-              {data?.data.data?.map(movie => (
-                <ListGroup.Item key={movie.id}>{movie.title}</ListGroup.Item>
-              ))}
-            </ListGroup>
-          )}
-        </Card>
-      </div>
+      <Row>
+        <Col lg={6}>
+          <div className='text-center mb-3'>
+            <h1>Currently Running</h1>
+          </div>
+          <div className='movie-list-container'>
+            <RunningMovieList search={search} />
+          </div>
+        </Col>
+        <Col lg={6}>
+          <div className='text-center mb-3'>
+            <h1>Coming Soon</h1>
+          </div>
+          <div className='movie-list-container'>
+            <ComingMovieList search={search} />
+          </div>
+        </Col>
+      </Row>
     </PageContainer>
   )
 }
diff --git a/src/pages/Main/style.module.css b/src/pages/Main/style.module.css
new file mode 100644
index 0000000..006aa18
--- /dev/null
+++ b/src/pages/Main/style.module.css
@@ -0,0 +1,6 @@
+.movie-list-container {
+  width: '100%';
+  display: 'flex';
+  justify-content: 'center';
+  align-content: 'center';
+}
diff --git a/src/pages/MovieCreate/index.tsx b/src/pages/MovieCreate/index.tsx
index 74994db..2bfa106 100644
--- a/src/pages/MovieCreate/index.tsx
+++ b/src/pages/MovieCreate/index.tsx
@@ -1,6 +1,5 @@
 import { useRequest } from 'ahooks'
 import PageContainer from 'components/PageContainer'
-import { useAuth } from 'hooks/useAuth'
 import { useState } from 'react'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
@@ -8,21 +7,24 @@ import { useNavigate } from 'react-router-dom'
 import Backend from 'utils/service'
 
 const Index: React.FC = () => {
-  const { user } = useAuth()
   const navigate = useNavigate()
   const [movieTitle, setMovieTitle] = useState('my movie')
   const { run: create } = useRequest(
     async () =>
+      // TODO: replace the movie with user input
       Backend.movie.v1MoviesCreate({
-        author: 'string',
-        meta: {
-          description: 'string',
-          picture: 'string',
-          rating: 10
-        },
-        status: 0,
         title: movieTitle,
-        user_id: user?.id ?? ''
+        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/600x400',
+        trailer_video:
+          'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&amp;controls=0'
       }),
     {
       manual: true,