ScheduleModal.js 2.48 KB
Newer Older
1
import { useState, useEffect } from "react";
Kim, Subin's avatar
Kim, Subin committed
2
import Item from "../AdminScheduleItem.js";
3
4
import scheduleApi from "../../apis/schedule.api";
import catchErrors from "../../utils/catchErrors.js";
Kim, Subin's avatar
Kim, Subin committed
5
import moment from 'moment';
Kim, Subin's avatar
Kim, Subin committed
6
7
import styles from "./modal.module.scss";

Kim, Subin's avatar
Kim, Subin committed
8
const ScheduleModal = ({ dateShow, setDateShow }) => {
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    const [scheduleList, setScheduleList] = useState([])
    const [error, setError] = useState("")

    useEffect(() => {
        if (dateShow.show) getSchedule()
    }, [dateShow])

    async function getSchedule() {
        try {
            setError("")
            const resList = await scheduleApi.getbyDate(dateShow.date)
            setScheduleList(resList)
        } catch (error) {
            catchErrors(error, setError)
        }
    }

    async function delSchedule(id) {
        try {
            setError("")
            await scheduleApi.remove(id)
            alert("해당 일정을 삭제했습니다.")
            getSchedule()
        } catch (error) {
            catchErrors(error, setError)
        }
    }

Kim, Subin's avatar
Kim, Subin committed
37
    return (
Kim, Subin's avatar
Kim, Subin committed
38
39
40
41
42
43
44
45
46
47
        <>
            {dateShow.show ? <div className="modal-backdrop fade show"></div> : null}
            <div className={"modal " + (dateShow.show ? "d-block" : "d-none")} id="scheduleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="scheduleModalLabel" aria-hidden="true">
                <div className="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
                    <div className="modal-content">
                        <div className={`modal-header ${styles.header}`}>
                            <h5 className="modal-title text-white mx-auto" id="scheduleModalLabel">{moment(dateShow.date).format("MM.DD")}</h5>
                            <button type="button" className={`btn-close btn-close-white ms-0 ${styles.closeBtn}`} data-bs-dismiss="modal" aria-label="Close" onClick={() => setDateShow({ ...dateShow, show: false })}></button>
                        </div>
                        <div className={`modal-body text-dark ${styles.body}`}>
48
49
50
                            {scheduleList.length !== 0 ? 
                            scheduleList.map((schedule, idx) => <Item key={idx} schedule={schedule} handleClick={delSchedule} />)
                        : <p className="text-center mb-0">선택한 날짜에 일정이 없습니다.</p>}
Kim, Subin's avatar
Kim, Subin committed
51
                        </div>
Kim, Subin's avatar
Kim, Subin committed
52
53
54
                    </div>
                </div>
            </div>
Kim, Subin's avatar
Kim, Subin committed
55
        </>
Kim, Subin's avatar
Kim, Subin committed
56
57
58
59
    )
}

export default ScheduleModal