ScheduleForm.js 6.36 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
context    
Kim, Subin committed
52
            const resSchedule = await scheduleApi.getOne(id, user.id)
53
54
55
56
57
58
            setSchedule({ ...schedule, ...resSchedule })
        } catch (error) {
            catchErrors(error, setError)
        }
    }

Kim, Subin's avatar
Kim, Subin committed
59
60
61
62
63
64
65
66
67
68
    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
69
70
71
72
73

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

    if (success) {
Kim, Subin's avatar
context    
Kim, Subin committed
89
90
        if (user.role === "admin") return <Redirect to="/admin" />
        else return <Redirect to="/home" />
Kim, Subin's avatar
Kim, Subin committed
91
    }
Kim, Subin's avatar
Kim, Subin committed
92
93

    return (
94
        <form className="pt-5">
95
            <div>
96
                <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 />
97
            </div>
Kim, Subin's avatar
Kim, Subin committed
98
            <div className="d-flex mb-4">
Kim, Subin's avatar
Kim, Subin committed
99
                <label className="col col-form-label align-self-center py-0">시작</label>
Kim, Subin's avatar
context    
Kim, Subin committed
100
                <div className={(user.role === "admin" || schedule.allDay === "on") ? "col-7" : "col-5"}>
101
                    <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
102
                </div>
Kim, Subin's avatar
context    
Kim, Subin committed
103
                <div className={"col-5 " + ((user.role === "admin" || schedule.allDay === "on") ? "d-none" : "d-block")}>
Kim, Subin's avatar
Kim, Subin committed
104
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="startTime" aria-label="startTime" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
105
106
                </div>
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
107
            <div className={"d-flex " + (user.role === "admin" ? "mb-5" : "mb-3")}>
Kim, Subin's avatar
Kim, Subin committed
108
                <label className="col col-form-label align-self-center py-0">종료</label>
Kim, Subin's avatar
context    
Kim, Subin committed
109
                <div className={(user.role === "admin" || schedule.allDay === "on") ? "col-7" : "col-5"}>
Kim, Subin's avatar
Kim, Subin committed
110
                    <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
111
                </div>
Kim, Subin's avatar
context    
Kim, Subin committed
112
                <div className={"col-5 " + ((user.role === "admin" || schedule.allDay === "on") ? "d-none" : "d-block")}>
Kim, Subin's avatar
Kim, Subin committed
113
                    <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
114
115
                </div>
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
116
117
            <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
118
                <label className="form-check-label ms-2" htmlFor="allDay">하루 종일</label>
Kim, Subin's avatar
context    
Kim, Subin committed
119
120
            </div>52
            <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
121
122
                <i className="col bi bi-geo-alt fs-3"></i>
                <div className="col-10">
Kim, Subin's avatar
Kim, Subin committed
123
                    <input className={`form-control shadow-none rounded-0 px-1 ${styles.textInput}`} type="text" name="location" placeholder="장소" aria-label="location" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
124
125
126
127
128
                </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">
129
                    <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
130
                </div>
Kim, Subin's avatar
Kim, Subin committed
131
            </div>
Kim, Subin's avatar
context    
Kim, Subin committed
132
            <BtnGroup text={scheduleId} disabled={disabled} handleSubmit={handleSubmit} />
Kim, Subin's avatar
Kim, Subin committed
133
134
135
136
137
        </form>
    )
}

export default ScheduleForm