ScheduleForm.js 5.2 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import { useState, useEffect } from "react";
2
import { Redirect, useLocation } from "react-router-dom";
Kim, Subin's avatar
Kim, Subin committed
3
import BtnGroup from "../Buttons/BtnGroup.js";
Kim, Subin's avatar
Kim, Subin committed
4
import catchErrors from "../../utils/catchErrors.js";
Kim, Subin's avatar
Kim, Subin committed
5
6
7
import styles from "./form.module.scss";

const ScheduleForm = () => {
8
    const location = useLocation()
Kim, Subin's avatar
Kim, Subin committed
9
10
11
12
13
14
15
16
17
18
19
20
    const [schedule, setSchedule] = useState({
        title: "",
        startDate: "",
        endDate: "",
        startTime: "",
        endTime: "",
        allDay: "",
        location: "",
        memo: ""
    })
    const [disabled, setDisabled] = useState(true)
    const [success, setSuccess] = useState(false)
Kim, Subin's avatar
Kim, Subin committed
21
22
23
    const [error, setError] = useState("")

    useEffect(() => {
Kim, Subin's avatar
Kim, Subin committed
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
        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])

    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
52
53
54
55
56

    async function handleSubmit(e) {
        e.preventDefault()
        try {
            setError("")
Kim, Subin's avatar
Kim, Subin committed
57
58
            if (schedule.allDay === "on") setSchedule({ ...schedule, startTime: '00:00', endTime: '23:59' })
            setSuccess(true)
Kim, Subin's avatar
Kim, Subin committed
59
60
61
        } catch (error) {
            catchErrors(error, setError)
        }
Kim, Subin's avatar
Kim, Subin committed
62
63
64
65
66
67
    }

    if (success) {
        alert('해당 일정이 성공적으로 등록되었습니다.')
        return <Redirect to="/home" />
    }
Kim, Subin's avatar
Kim, Subin committed
68
69

    return (
Kim, Subin's avatar
Kim, Subin committed
70
        <form className="pt-5" onSubmit={handleSubmit}>
71
72
73
            <div>
                <input className={`form-control form-control-lg shadow-none px-1 mb-5 ${styles.textInput}`} type="text" name="title" placeholder="제목" aria-label="title" onChange={handleChange} autoFocus />
            </div>
Kim, Subin's avatar
Kim, Subin committed
74
            <div className="d-flex mb-4">
Kim, Subin's avatar
Kim, Subin committed
75
                <label className="col col-form-label align-self-center py-0">시작</label>
Kim, Subin's avatar
Kim, Subin committed
76
77
                <div className={schedule.allDay === "on" ? "col-7" : "col-5"}>
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="startDate" aria-label="startDate" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
78
                </div>
Kim, Subin's avatar
Kim, Subin committed
79
80
                <div className={"col-5 " + (schedule.allDay === "on" ? "d-none" : "d-block")}>
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="startTime" aria-label="startTime" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
81
82
83
                </div>
            </div>
            <div className="d-flex mb-3">
Kim, Subin's avatar
Kim, Subin committed
84
                <label className="col col-form-label align-self-center py-0">종료</label>
Kim, Subin's avatar
Kim, Subin committed
85
86
                <div className={schedule.allDay === "on" ? "col-7" : "col-5"}>
                    <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
87
                </div>
Kim, Subin's avatar
Kim, Subin committed
88
89
                <div className={"col-5 " + (schedule.allDay === "on" ? "d-none" : "d-block")}>
                    <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
90
91
                </div>
            </div>
Kim, Subin's avatar
Kim, Subin committed
92
            <div className="d-flex justify-content-end form-check mb-4">
Kim, Subin's avatar
Kim, Subin committed
93
                <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" id="allDay" name="allDay" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
94
95
96
97
98
                <label className="form-check-label ms-2" htmlFor="allDay">하루 종일</label>
            </div>
            <div className="d-flex justify-content-between align-items-center mb-4">
                <i className="col bi bi-geo-alt fs-3"></i>
                <div className="col-10">
Kim, Subin's avatar
Kim, Subin committed
99
                    <input className={`form-control shadow-none px-1 ${styles.textInput}`} type="text" name="location" placeholder="장소" aria-label="location" onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
100
101
102
103
104
                </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">
Kim, Subin's avatar
Kim, Subin committed
105
                    <textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" rows="5" onChange={handleChange}></textarea>
Kim, Subin's avatar
Kim, Subin committed
106
                </div>
Kim, Subin's avatar
Kim, Subin committed
107
            </div>
Kim, Subin's avatar
Kim, Subin committed
108
            <BtnGroup disabled={disabled} />
Kim, Subin's avatar
Kim, Subin committed
109
110
111
112
113
        </form>
    )
}

export default ScheduleForm