ScheduleForm.js 6.73 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import { useState, useEffect } from "react";
2
import { Redirect, useParams } from "react-router-dom";
Kim, Subin's avatar
Kim, Subin committed
3
import BtnGroup from "../Buttons/BtnGroup";
4
import scheduleApi from "../../apis/schedule.api";
Kim, Subin's avatar
Kim, Subin committed
5
6
import { useAuth } from "../../utils/context";
import catchErrors from "../../utils/catchErrors";
Kim, Subin's avatar
Kim, Subin committed
7
8
9
import styles from "./form.module.scss";

const ScheduleForm = () => {
Kim, Subin's avatar
context    
Kim, Subin committed
10
    const { user } = useAuth()
Kim, Subin's avatar
Kim, Subin committed
11
12
13
14
15
16
    const [schedule, setSchedule] = useState({
        title: "",
        startDate: "",
        endDate: "",
        startTime: "",
        endTime: "",
Kim, Subin's avatar
context    
Kim, Subin committed
17
        allDay: user.role === "admin" ? "on" : "",
Kim, Subin's avatar
Kim, Subin committed
18
19
20
21
22
        location: "",
        memo: ""
    })
    const [disabled, setDisabled] = useState(true)
    const [success, setSuccess] = useState(false)
Kim, Subin's avatar
Kim, Subin committed
23
    const [error, setError] = useState("")
24
25
26
27
28
    const { scheduleId } = useParams()

    useEffect(() => {
        if (scheduleId) getOne(scheduleId)
    }, [])
Kim, Subin's avatar
Kim, Subin committed
29
30

    useEffect(() => {
Kim, Subin's avatar
Kim, Subin committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
        let isMounted = true;
        const checkInfo = { title: schedule.title, startDate: schedule.startDate, endDate: schedule.endDate }
        if (schedule.allDay !== "on") {
            checkInfo.startTime = schedule.startTime
            checkInfo.endTime = schedule.endTime
        } else {
            delete checkInfo.startTime
            delete checkInfo.endTime
        }
        if (isMounted) {
            const isSchedule = Object.values(checkInfo).every((el) => Boolean(el));
            isSchedule ? setDisabled(false) : setDisabled(true);
        }
        return () => {
            isMounted = false;
        };
    }, [schedule])

49
50
51
    async function getOne(id) {
        try {
            setError("")
Kim, Subin's avatar
Kim, Subin committed
52
53
54
            let resSchedule = null
            if (user.role === "admin") resSchedule = await scheduleApi.getOne(id)
            else resSchedule = await scheduleApi.getOne(id, user.id)
55
56
57
58
59
60
            setSchedule({ ...schedule, ...resSchedule })
        } catch (error) {
            catchErrors(error, setError)
        }
    }

Kim, Subin's avatar
Kim, Subin committed
61
62
63
64
65
66
67
68
69
70
    function handleChange(e) {
        const { name, value } = e.target
        if (name === "allDay") {
            schedule.allDay !== "on" ? setSchedule({ ...schedule, [name]: value }) : setSchedule({ ...schedule, [name]: "off" })
        } else if (name === "startDate") {
            setSchedule({ ...schedule, [name]: value, endDate: value })
        } else if (name === "startTime") {
            setSchedule({ ...schedule, [name]: value, endTime: value })
        } else setSchedule({ ...schedule, [name]: value })
    }
Kim, Subin's avatar
Kim, Subin committed
71
72
73
74
75

    async function handleSubmit(e) {
        e.preventDefault()
        try {
            setError("")
76
            if (scheduleId) {
Kim, Subin's avatar
Kim, Subin committed
77
78
                if (user.role === "admin") await scheduleApi.edit(scheduleId, schedule)
                else await scheduleApi.edit(scheduleId, schedule, user.id)
79
80
81
                alert('해당 일정이 성공적으로 수정되었습니다.')
            }
            else {
Kim, Subin's avatar
Kim, Subin committed
82
83
                if (user.role === "admin") await scheduleApi.submit(schedule)
                else await scheduleApi.submit(schedule, user.id)
84
85
                alert('해당 일정이 성공적으로 등록되었습니다.')
            }
Kim, Subin's avatar
Kim, Subin committed
86
            setSuccess(true)
Kim, Subin's avatar
Kim, Subin committed
87
88
89
        } catch (error) {
            catchErrors(error, setError)
        }
Kim, Subin's avatar
Kim, Subin committed
90
91
92
    }

    if (success) {
Kim, Subin's avatar
context    
Kim, Subin committed
93
94
        if (user.role === "admin") return <Redirect to="/admin" />
        else return <Redirect to="/home" />
Kim, Subin's avatar
Kim, Subin committed
95
    }
Kim, Subin's avatar
Kim, Subin committed
96
97

    return (
98
        <form className="pt-5">
99
            <div>
Kim, Subin's avatar
Kim, Subin committed
100
                <input className={`form-control form-control-lg shadow-none rounded-0 px-1 mb-5 ${styles.textInput}`} type="text" name="title" value={schedule.title} placeholder="제목" aria-label="title" onChange={handleChange} autoFocus autoComplete="off" />
101
            </div>
Kim, Subin's avatar
Kim, Subin committed
102
            <div className="d-flex mb-4">
Kim, Subin's avatar
Kim, Subin committed
103
                <label className="col col-form-label align-self-center py-0">시작</label>
Kim, Subin's avatar
context    
Kim, Subin committed
104
                <div className={(user.role === "admin" || schedule.allDay === "on") ? "col-7" : "col-5"}>
105
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="startDate" value={schedule.startDate} aria-label="startDate" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
106
                </div>
Kim, Subin's avatar
context    
Kim, Subin committed
107
                <div className={"col-5 " + ((user.role === "admin" || schedule.allDay === "on") ? "d-none" : "d-block")}>
Kim, Subin's avatar
Kim, Subin committed
108
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="startTime" value={schedule.startTime} aria-label="startTime" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
109
110
                </div>
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
111
            <div className={"d-flex " + (user.role === "admin" ? "mb-5" : "mb-3")}>
Kim, Subin's avatar
Kim, Subin committed
112
                <label className="col col-form-label align-self-center py-0">종료</label>
Kim, Subin's avatar
context    
Kim, Subin committed
113
                <div className={(user.role === "admin" || schedule.allDay === "on") ? "col-7" : "col-5"}>
Kim, Subin's avatar
Kim, Subin committed
114
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" value={schedule.endDate} aria-label="endDate" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
115
                </div>
Kim, Subin's avatar
context    
Kim, Subin committed
116
                <div className={"col-5 " + ((user.role === "admin" || schedule.allDay === "on") ? "d-none" : "d-block")}>
Kim, Subin's avatar
Kim, Subin committed
117
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" value={schedule.endTime} aria-label="endTime" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
118
119
                </div>
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
120
121
            <div className={"d-flex justify-content-end form-check mb-4 " + (user.role === "admin" ? "d-none" : "d-block")}>
                <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" id="allDay" name="allDay" onChange={handleChange} checked={schedule.allDay === "on" ? true : false} />
Kim, Subin's avatar
Kim, Subin committed
122
                <label className="form-check-label ms-2" htmlFor="allDay">하루 종일</label>
Kim, Subin's avatar
Kim, Subin committed
123
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
124
            <div className={"d-flex justify-content-between align-items-center mb-4 " + (user.role === "admin" ? "d-none" : "d-block")}>
Kim, Subin's avatar
Kim, Subin committed
125
126
                <i className="col bi bi-geo-alt fs-3"></i>
                <div className="col-10">
Kim, Subin's avatar
Kim, Subin committed
127
                    <input className={`form-control shadow-none rounded-0 px-1 ${styles.textInput}`} type="text" name="location" value={schedule.location} placeholder="장소" aria-label="location" onChange={handleChange} autoComplete="off" />
Kim, Subin's avatar
Kim, Subin committed
128
129
130
131
132
                </div>
            </div>
            <div className="d-flex justify-content-between mb-5">
                <i className="col bi bi-journal-text fs-3"></i>
                <div className="col-10">
133
                    <textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" value={schedule.memo} rows="5" onChange={handleChange}></textarea>
Kim, Subin's avatar
Kim, Subin committed
134
                </div>
Kim, Subin's avatar
Kim, Subin committed
135
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
136
            <BtnGroup text={scheduleId} disabled={disabled} handleSubmit={handleSubmit} />
Kim, Subin's avatar
Kim, Subin committed
137
138
139
140
141
        </form>
    )
}

export default ScheduleForm