Merge branch 'main' into fixes+tweaks

src/client/index.ts

@@ -215,13 +215,11 @@ export interface SchemaShow {
   booking_fee: number
   /** @max 255 */
   child_ticket_price: number
-  /** @maxLength 255 */
   end_time: string
   id: string
   movie_id: string
   /** @max 255 */
   senior_ticket_price: number
-  /** @maxLength 255 */
   start_time: string
   /** @maxLength 1023 */
   theater_location: string
@@ -330,12 +328,10 @@ export interface SchemaUpsertShow {
   booking_fee: number
   /** @max 255 */
   child_ticket_price: number
-  /** @maxLength 255 */
   end_time: string
   movie_id: string
   /** @max 255 */
   senior_ticket_price: number
-  /** @maxLength 255 */
   start_time: string
   /** @maxLength 1023 */
   theater_location: string

src/components/Footer/index.tsx

@@ -2,9 +2,12 @@ import Container from 'react-bootstrap/Container'
 
 const Index: React.FC = () => (
   <footer className='footer mt-auto py-3 bg-body-tertiary'>
-    <Container fluid>
+    <Container
+      fluid
+      className='d-flex justify-content-center align-items-center'
+    >
       <span className='text-body-secondary'>
-        <p> </p>
+        CSCI X050 A7 - Cinema E-Booking System
       </span>
     </Container>
   </footer>

src/pages/ChangePassword/index.tsx

@@ -1,8 +1,9 @@
 import { useRequest } from 'ahooks'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import { useAuth } from 'hooks/useAuth'
 import { useState } from 'react'
-import { Col, Row } from 'react-bootstrap'
+import { Alert, Col, Row } from 'react-bootstrap'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
@@ -15,6 +16,7 @@ const ChangeForm: React.FC = () => {
   const [username, setUsername] = useState('')
   const [currentPassword, setCurrentPassword] = useState('')
   const [newPassword, setNewPassword] = useState('')
+  const [error, setError] = useState('')
   const navigate = useNavigate()
   const { run: changePasssword } = useRequest(
     async () => {
@@ -34,6 +36,9 @@ const ChangeForm: React.FC = () => {
       manual: true,
       onSuccess: () => {
         navigate('/logout') // Navigate to the login page
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
       }
     }
   )
@@ -106,6 +111,7 @@ const ChangeForm: React.FC = () => {
             </Col>
           </Form.Group>
         </Form>
+        {error ? <Alert variant='danger'>{error}</Alert> : null}
       </Col>
     </>
   ) : (

src/pages/Checkout/index.tsx

@@ -1,29 +1,20 @@
 import './style.module.css'
 import { useRequest } from 'ahooks'
 import type { SchemaCard } from 'client'
+import type { ErrorResponse } from 'client/error'
 import Card from 'components/Card'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
 import { Form, Button, Col, Row, Alert } from 'react-bootstrap'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import Backend from 'utils/service'
 
 const RegistrationForm = () => {
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const [error, setError] = useState('')
   const [cards, setCards] = useState<SchemaCard[]>([])
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    setError('TODO: Implement Checkout')
-    navigate('/order/confirm')
-  }
-  useRequest(async () => Backend.user.v1UsersMeList(), {
-    onSuccess: res => {
-      setCards(res.data.cards)
-    }
-  })
   const [card, setCard] = useState<SchemaCard>({
     id: '',
     number: '',
@@ -36,6 +27,32 @@ const RegistrationForm = () => {
     type: ''
   })
 
+  const { run: checkoutOrder } = useRequest(
+    async () =>
+      Backend.order.v1OrdersCheckoutCreate(
+        searchParams.get('order') ?? '',
+        card
+      ),
+    {
+      manual: true,
+      onSuccess: data => {
+        navigate(`/order/confirm?order=${data.data.id}`)
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
+      }
+    }
+  )
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    checkoutOrder()
+  }
+  useRequest(async () => Backend.user.v1UsersMeList(), {
+    onSuccess: res => {
+      setCards(res.data.cards)
+    }
+  })
+
   return (
     <>
       <div className='text-center'>

src/pages/ForgotPassword/index.tsx

@@ -1,4 +1,5 @@
 import { useRequest } from 'ahooks'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import { useState } from 'react'
 import { Col, Row, Form, Button, Alert } from 'react-bootstrap'
@@ -7,12 +8,16 @@ import Backend from 'utils/service'
 const ForgotPassword: React.FC = () => {
   const [email, setEmail] = useState('')
   const [info, setInfo] = useState('')
+  const [error, setError] = useState('')
   const { run } = useRequest(
     async () => Backend.auth.v1AuthForgotpasswordCreate({ email }),
     {
       manual: true,
       onSuccess: () => {
         setInfo('Done! Check you email!')
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
       }
     }
   )
@@ -50,6 +55,7 @@ const ForgotPassword: React.FC = () => {
             </Col>
           </Form.Group>
         </Form>
+        {error ? <Alert variant='danger'>{error}</Alert> : null}
       </Col>
     </PageContainer>
   )

src/pages/Login/index.tsx

@@ -17,16 +17,16 @@ const LoginForm: React.FC = () => {
   const defUsername = localStorage.getItem('currentUsername')
   const [username, setUsername] = useState(defUsername ?? '')
   const [password, setPassword] = useState('')
-  const [remember, setRemember] = useState(false)
+  const [remember, setRemember] = useState(true)
   const navigate = useNavigate()
   const { run: login } = useRequest(
     async () => {
       const from = searchParams.get('from') ?? '/'
       return Backend.auth.v1AuthLoginCreate(
         {
           username,
-          password
-          // remember
+          password,
+          remember
         },
         {
           redirect_url: `${DOMAIN_HOST}${from}`
@@ -115,6 +115,7 @@ const LoginForm: React.FC = () => {
               <Form.Check
                 type='checkbox'
                 label='Remember me'
+                checked
                 onChange={() => {
                   setRemember(!remember)
                 }}

src/pages/MovieManage/index.tsx

@@ -1,10 +1,11 @@
 import styles from './style.module.css'
 import { useRequest } from 'ahooks'
 import type { SchemaMovie } from 'client'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
-import { Button, Card, Form, Modal, Table } from 'react-bootstrap'
+import { Alert, Button, Card, Form, Modal, Table } from 'react-bootstrap'
 import Backend from 'utils/service'
 
 const MovieRow: React.FC<{
@@ -26,6 +27,7 @@ const MovieRow: React.FC<{
   const [synopsis, setSynopsis] = useState(movie.synopsis)
   const [trailerPicture, setTrailerPicture] = useState(movie.trailer_picture)
   const [trailerVideo, setTrailerVideo] = useState(movie.trailer_video)
+  const [error, setError] = useState('')
   const { run: update } = useRequest(
     async () => {
       Backend.movie.v1MoviesUpdate(movie.id, {
@@ -47,6 +49,9 @@ const MovieRow: React.FC<{
       onSuccess: () => {
         refresh()
         handleClose()
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
       }
     }
   )
@@ -60,7 +65,9 @@ const MovieRow: React.FC<{
         <td className={styles.hideOverflow}>{movie.producer}</td>
         <td className={styles.hideOverflow}>{movie.rating_code}</td>
         <td className={styles.hideOverflow}>{movie.reviews}</td>
-        <td className={styles.hideOverflow}>{movie.show_time}</td>
+        <td className={styles.hideOverflow}>
+          {new Date(movie.show_time).toLocaleString()}
+        </td>
         <td className={styles.hideOverflow}>{movie.synopsis}</td>
         <td className={styles.hideOverflow}>{movie.trailer_picture}</td>
         <td className={styles.hideOverflow}>{movie.trailer_video}</td>
@@ -165,6 +172,7 @@ const MovieRow: React.FC<{
               />
             </Form.Group>
           </Form>
+          {error ? <Alert variant='danger'>{error}</Alert> : null}
         </Modal.Body>
         <Modal.Footer>
           <Button variant='primary' onClick={update}>
@@ -195,6 +203,7 @@ const Index: React.FC = () => {
   const [trailerVideo, setTrailerVideo] = useState(
     'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&amp;controls=0'
   )
+  const [error, setError] = useState('')
   const {
     data,
     loading,
@@ -220,6 +229,9 @@ const Index: React.FC = () => {
       onSuccess: () => {
         refresh()
         handleClose()
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
       }
     }
   )
@@ -390,6 +402,7 @@ const Index: React.FC = () => {
               />
             </Form.Group>
           </Form>
+          {error ? <Alert variant='danger'>{error}</Alert> : null}
         </Modal.Body>
         <Modal.Footer>
           <Button

src/pages/MovieSeatSelect/index.tsx

@@ -1,9 +1,13 @@
 import styles from './style.module.css'
+import { useRequest } from 'ahooks'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import { useState } from 'react'
+import { Alert } from 'react-bootstrap'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
-import { Link, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import Backend from 'utils/service'
 
 interface Seat {
   id: string
@@ -13,21 +17,40 @@ interface Seat {
 }
 
 enum TicketType {
-  Adult = 'Adult',
-  Senior = 'Senior',
-  Children = 'Children',
-  Veteran = 'Veteran',
-  Student = 'Student'
+  Adult = 'adult',
+  Senior = 'senior',
+  Child = 'child'
 }
 
 const Index: React.FC = () => {
   const [searchParams] = useSearchParams()
+  const [error, setError] = useState('')
   const [selectedSeats, setSelectedSeats] = useState<Seat[]>([])
   const [selectedTicketType, setSelectedTicketType] = useState<TicketType>(
     TicketType.Adult
   )
   const [promotion, setPromotion] = useState<string>('')
-
+  const navigate = useNavigate()
+  const { run: createOrder } = useRequest(
+    async () =>
+      Backend.order.v1OrdersCreate({
+        promotion_code: promotion,
+        show_id: searchParams.get('show') ?? '',
+        tickets: selectedSeats.map(seat => ({
+          seat: seat.id,
+          type: seat.ticketType?.toString() ?? ''
+        }))
+      }),
+    {
+      manual: true,
+      onSuccess: data => {
+        navigate(`/order/summary?order=${data.data.id}`)
+      },
+      onError: err => {
+        setError((err as ErrorResponse).error.msg)
+      }
+    }
+  )
   const totalSelectedSeats = selectedSeats.length
 
   const handleSeatClick = (seat: Seat) => {
@@ -69,7 +92,7 @@ const Index: React.FC = () => {
               type='button'
               key={seat.id}
               onClick={() => handleSeatClick(seat)}
-              className={`${styles.seat} ${
+              className={`btn-secondary ${styles.seat} ${
                 selectedSeats.some(selectedSeat => selectedSeat.id === seat.id)
                   ? styles.selected
                   : ''
@@ -88,7 +111,6 @@ const Index: React.FC = () => {
     <PageContainer>
       <div className='text-center'>
         <h1>Select Seat & Promotion</h1>
-        <h2>Show: {searchParams.get('show')}</h2>
       </div>
       <div className={`${styles.seatContainer} mt-3`}>{renderSeats()}</div>
       <div className='w-50 mx-auto'>
@@ -136,11 +158,14 @@ const Index: React.FC = () => {
             />
           </Form.Group>
         </Form>
-        <Link to='/order/summary' state={selectedSeats}>
-          <Button className='mt-4 w-100' disabled={totalSelectedSeats === 0}>
-            Create Order
-          </Button>
-        </Link>
+        {error ? <Alert variant='danger'>{error}</Alert> : null}
+        <Button
+          onClick={createOrder}
+          className='mt-4 w-100'
+          disabled={totalSelectedSeats === 0}
+        >
+          Create Order
+        </Button>
       </div>
     </PageContainer>
   )

src/pages/MovieSeatSelect/style.module.css

@@ -10,6 +10,7 @@
 }
 
 .selected {
-  background-color: #3498db; /* Example color for selected seats */
+  background-color: #309800; /* Example color for selected seats */
   color: #fff; /* Example text color for selected seats */
+  transition: all 0.3s ease; /* Add a transition effect */
 }