TicketingPage.js 4.79 KB
Newer Older
1
import axios from 'axios'
Jiwon Yoon's avatar
Jiwon Yoon committed
2
3
4
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import movieApi from '../apis/movie.api.js'
Kim, Subin's avatar
Kim, Subin committed
5
import cinemaApi from "../apis/cinema.api.js"
Jiwon Yoon's avatar
Jiwon Yoon committed
6
7
8
import TicketingMovie from "../components/TicketingMovie/TicketingMovie.js"
import TicketingTheater from "../components/TicketingTheater/TicketingTheater.js"
import TicketingTimeTable from "../components/TicketingTimeTable/TicketingTimeTable.js"
Kim, Subin's avatar
Kim, Subin committed
9
import catchErrors from "../utils/catchErrors.js"
Jiwon Yoon's avatar
Jiwon Yoon committed
10

Jiwon Yoon's avatar
Jiwon Yoon committed
11
12
const TicketingPage = ({ location }) => {
    const [ticketInfo, setTicketInfo] = useState({
Jiwon Yoon's avatar
Jiwon Yoon committed
13
        movieId: 0,
Jiwon Yoon's avatar
Jiwon Yoon committed
14
        ...location.state,
Kim, Subin's avatar
Kim, Subin committed
15
        cinema: "",
Kim, Subin's avatar
Kim, Subin committed
16
17
        selectedTheater: "",
        time: ""
Jiwon Yoon's avatar
Jiwon Yoon committed
18
    })
19
    const [cinemaInfo, setCinemaInfo] = useState({})
Jiwon Yoon's avatar
Jiwon Yoon committed
20
    const [movieInfo, setMovieInfo] = useState()
Kim, Subin's avatar
Kim, Subin committed
21
22
23
24
25
    const [error, setError] = useState("")

    useEffect(() => {
        getCinemaInfo()
    }, [])
Jiwon Yoon's avatar
Jiwon Yoon committed
26

27
    useEffect(() => {
Jiwon Yoon's avatar
Jiwon Yoon committed
28
29
30
        if (ticketInfo.movieId > 0) {
            getMovieInfo()
        }
Jiwon Yoon's avatar
Jiwon Yoon committed
31
    }, [ticketInfo])
Jiwon Yoon's avatar
Jiwon Yoon committed
32

Jiwon Yoon's avatar
Jiwon Yoon committed
33
34
35
36
37
    async function getMovieInfo() {
        try {
            const data = await movieApi.getMovieInfofromTM(ticketInfo.movieId)
            setMovieInfo(data)
        } catch (error) {
Kim, Subin's avatar
Kim, Subin committed
38
39
40
41
42
43
44
45
46
47
            catchErrors(error, setError)
        }
    }

    async function getCinemaInfo() {
        try {
            const response = await cinemaApi.getCinemaInfo()
            setCinemaInfo(response.data)
        } catch (error) {
            catchErrors(error, setError)
Jiwon Yoon's avatar
Jiwon Yoon committed
48
49
        }
    }
50
51
52
53
54
55
    async function getCinemaInfo() {
        try {
            const response = await axios.get('/api/info/cinema')
            console.log(response.data)
            setCinemaInfo(response.data)
        } catch (error) {
Jiwon Yoon's avatar
Jiwon Yoon committed
56
            catchErrors(error, setError)
57
58
        }
    }
Jiwon Yoon's avatar
Jiwon Yoon committed
59
    return (
Jiwon Yoon's avatar
Jiwon Yoon committed
60
        <div className="container pb-5" style={{ backgroundColor: "black" }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
61
            <div className="row justify-content-center my-5">
Jiwon Yoon's avatar
Jiwon Yoon committed
62
63
64
                <div className="col-sm-4 mb-4 ">
                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>영화</h3>
                    <TicketingMovie ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
Jiwon Yoon's avatar
Jiwon Yoon committed
65
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
66
                <div className="col-sm-3 mb-4 ">
Jiwon Yoon's avatar
Jiwon Yoon committed
67
                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>극장</h3>
68
                    <TicketingTheater cinemaInfo={cinemaInfo} ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
Jiwon Yoon's avatar
Jiwon Yoon committed
69
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
70
71
                <div className="col-sm-5 mb-4 ">
                    <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>시간표</h3>
Kim, Subin's avatar
Kim, Subin committed
72
                    <TicketingTimeTable ticketInfo={ticketInfo} setTicketInfo={setTicketInfo} />
Jiwon Yoon's avatar
Jiwon Yoon committed
73
74
                </div>
            </div>
Kim, Subin's avatar
Kim, Subin committed
75
            <div className="row p-3" style={{ backgroundColor: "#252525" }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
76
                <div className="col-sm-3 text-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
77
78
79
80
                    {movieInfo
                        ? <img style={{ maxHeight: "10rem" }} src={`https://image.tmdb.org/t/p/original${movieInfo.poster_path}`} alt="영화포스터" />
                        : <div className="mb-2" style={{ color: "white" }}>영화선택</div>}
                </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
81
                <div className="col-sm-6" style={{ color: "white" }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
82
                    <div className="mb-2  text-center">극장선택</div>
83
                    {movieInfo && ticketInfo.cinema
Jiwon Yoon's avatar
Jiwon Yoon committed
84
85
                        ? <ul>
                            <li>영화: {movieInfo.title}</li>
86
                            <li>극장: {ticketInfo.cinema}</li>
Jiwon Yoon's avatar
Jiwon Yoon committed
87
                            <li>일시: {ticketInfo.time}</li>
Kim, Subin's avatar
Kim, Subin committed
88
                            <li>상영관: {(ticketInfo.selectedTheater !== "") ? ticketInfo.selectedTheater + "" : ""}</li>
Jiwon Yoon's avatar
Jiwon Yoon committed
89
90
91
92
                        </ul>
                        : <div></div>}
                </div>
                <div className="col-sm-3 text-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
93
                    <div className="mb-3" style={{ color: "white" }}>좌석선택</div>
Jiwon Yoon's avatar
Jiwon Yoon committed
94
                    {movieInfo && ticketInfo.cinema && ticketInfo.timetableId
Jiwon Yoon's avatar
Jiwon Yoon committed
95
96
                        ?
                        <Link to={{
Jiwon Yoon's avatar
Jiwon Yoon committed
97
                            pathname: `/ticket/seat`,
Kim, Subin's avatar
Kim, Subin committed
98
                            state: { ...ticketInfo, ...movieInfo }
Jiwon Yoon's avatar
Jiwon Yoon committed
99
                        }}>
Jiwon Yoon's avatar
Jiwon Yoon committed
100
                            <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" style={{width:'80px'}} />
Jiwon Yoon's avatar
Jiwon Yoon committed
101
                        </Link>
Jiwon Yoon's avatar
Jiwon Yoon committed
102
                        : <img className="border border-3 rounded-3" src="/images/icons8-arrow-white.png" alt="예매하기" style={{width:'80px'}}/>
Jiwon Yoon's avatar
Jiwon Yoon committed
103
104
105
                    }
                </div>
            </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
106
107
108
109
110
        </div>
    )
}

export default TicketingPage