import { useState, useEffect } from 'react' import { Link } from 'react-router-dom' import movieApi from '../apis/movie.api.js' import cinemaApi from "../apis/cinema.api.js" import TicketingMovie from "../components/TicketingMovie/TicketingMovie.js" import TicketingTheater from "../components/TicketingTheater/TicketingTheater.js" import TicketingTimeTable from "../components/TicketingTimeTable/TicketingTimeTable.js" import catchErrors from "../utils/catchErrors.js" const TicketingPage = ({ location }) => { const [ticketInfo, setTicketInfo] = useState({ ...location.state, cinema: "", selectedTheater: "1", time: "2021/07/21 10:00" }) const [cinemaInfo, setCinemaInfo] = useState({}) const [movieInfo, setMovieInfo] = useState() const [error, setError] = useState("") useEffect(() => { getCinemaInfo() }, []) useEffect(() => { getMovieInfo() }, [ticketInfo]) async function getMovieInfo() { try { const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId) setMovieInfo(data) } catch (error) { catchErrors(error, setError) } } async function getCinemaInfo() { try { const response = await cinemaApi.getCinemaInfo() setCinemaInfo(response.data) } catch (error) { catchErrors(error, setError) } } return (

영화

극장

시간표

{movieInfo ? 영화포스터 :
영화선택
}
극장선택
{movieInfo && ticketInfo.cinema ?
  • 영화: {movieInfo.title}
  • 극장: {ticketInfo.cinema}
  • 일시: {ticketInfo.time}
  • 상영관: {ticketInfo.selectedTheater}
:
}
좌석선택
{movieInfo && ticketInfo.cinema ? 예매하기 : 예매하기 }
) } export default TicketingPage