StudyPlanEditForm.js 5.8 KB
Newer Older
1
import { useState, useEffect } from 'react';
Choi Ga Young's avatar
Choi Ga Young committed
2
import { useParams } from 'react-router-dom';
Kim, Subin's avatar
Kim, Subin committed
3
import { useAuth } from "../../utils/context";
4
import BtnGroup from "../Buttons/BtnGroup";
Kim, Subin's avatar
Kim, Subin committed
5
6
7
import subjectApi from '../../apis/subject.api';
import planApi from '../../apis/plan.api';
import catchErrors from '../../utils/catchErrors';
8
9
10
import styles from "./form.module.scss";

const StudyPlanEditForm = () => {
Choi Ga Young's avatar
Choi Ga Young committed
11
12
13
14
15
    const { user } = useAuth();
    const params = useParams();
    const [disabled, setDisabled] = useState(true)
    const [selected, setSelected] = useState("");
    const [error, setError] = useState("");
16
17
18
19
    const [studyplan, setStudyplan] = useState({
        studyplanTitle: "",
        endDate: "",
        deadline: "",
Choi Ga Young's avatar
Choi Ga Young committed
20
21
22
        memo: "",
        deadline: "",
        selected: ""
23
    })
Choi Ga Young's avatar
Choi Ga Young committed
24
    const [list, setList] = useState([])
25
26
27

    useEffect(() => {
        let isMounted = true;
Choi Ga Young's avatar
Choi Ga Young committed
28
29
        const checkInfo = { studyplanTitle: studyplan.studyplanTitle, endDate: studyplan.endDate, selected: selected }
        if (studyplan.deadline === "on") {
30
31
32
33
34
35
36
37
38
39
40
41
42
            checkInfo.endTime = studyplan.endTime
        } else {
            delete checkInfo.endTime
        }
        if (isMounted) {
            const isStudyPlan = Object.values(checkInfo).every((el) => Boolean(el));
            isStudyPlan ? setDisabled(false) : setDisabled(true);
        }
        return () => {
            isMounted = false;
        }
    }, [studyplan])

Choi Ga Young's avatar
Choi Ga Young committed
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
    useEffect(() => {
        subjectTitle(user.id)
        if (params.hasOwnProperty('planId')) {
            console.log('planId params확인');
            getInfo(params.planId);
        }
    }, [])

    async function getInfo(id) {
        const result = await planApi.getDetail(id)
        console.log('수정 getInfo result', result)
    }

    async function subjectTitle(id) {
        const result = await subjectApi.subjectTitle(id)
        console.log('result확인--select', result)
        setList(result)
    }

62
63
64
65
66
67
68
69
70
    function handleChange(e) {
        const { name, value } = e.target
        if (name === "deadline") {
            studyplan.deadline !== "on" ? setStudyplan({ ...studyplan, [name]: value }) : setStudyplan({ ...studyplan, [name]: "off" })
        } else {
            setStudyplan({ ...studyplan, [name]: value })
        }
    }

Choi Ga Young's avatar
Choi Ga Young committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    async function handleSubmit(e) {
        e.preventDefault();
        try {
            setError("")
            studyplan.selected = selected
            if (params.hasOwnProperty('subjectId')) {
                //등록함수 실행
                console.log('등록함수')
                const result = await planApi.addPlan(studyplan, params.subjectId)
                if (result) {
                    alert("등록되었습니다")
                    setList([])
                    setStudyplan({
                        studyplanTitle: "",
                        endDate: "",
                        deadline: "",
                        memo: "",
                        selected: ""
                    })
                } else {
                    alert("등록에 실패하였습니다.")
                }
            } else {
                //수정함수 실행
                console.log('수정함수')
                const result = await planApi.editPlan(studyplan, params.subjectId)
                console.log('수정 후 result확인', result)
            }

        } catch (error) {
            catchErrors(error, setError)
            setStudyplan({
                studyplanTitle: "",
                endDate: "",
                deadline: "",
                memo: ""
            })
        }
    }

    function handleSelect(e) {
        setSelected(e.target.value);
    }

115
    return (
Kim, Subin's avatar
Kim, Subin committed
116
        <div className="pt-5">
Choi Ga Young's avatar
Choi Ga Young committed
117
            <select className={`form-select mb-4 ${styles.selectInput}`} aria-label="Choose subject" onChange={handleSelect}>
Kim, Subin's avatar
Kim, Subin committed
118
                <option selected>관련 과목을 선택해주세요.</option>
Choi Ga Young's avatar
Choi Ga Young committed
119
                {list.length !== 0 ? list.map((i) => <option value={i.id}>{i.name}</option>) : null}
Kim, Subin's avatar
Kim, Subin committed
120
121
122
            </select>
            <input type="text" name="studyplanTitle"
                className={`form-control shadow-none rounded-0 mb-5 ${styles.textInput}`}
Choi Ga Young's avatar
Choi Ga Young committed
123
                placeholder="제목" value={studyplan.studyplanTitle} onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
124
125
            <div className="d-flex mb-3">
                <label className="col col-form-label align-self-center py-0">마감일</label>
Choi Ga Young's avatar
Choi Ga Young committed
126
127
                <div className={studyplan.deadline === "on" ? "col-5" : "col-7"}>
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" aria-label="endDate" value={studyplan.endDate} onChange={handleChange} />
128
                </div>
Choi Ga Young's avatar
Choi Ga Young committed
129
130
                <div className={"col-4 " + (studyplan.deadline === "on" ? "d-block" : "d-none")}>
                    <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" aria-label="endTime" value={studyplan.endTime} onChange={handleChange} />
131
                </div>
Kim, Subin's avatar
Kim, Subin committed
132
133
134
135
136
137
138
139
            </div>
            <div className="d-flex justify-content-end form-check mb-4">
                <input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} />
                <label className="form-check-label" htmlFor="deadline">시간 </label>
            </div>
            <div className="d-flex justify-content-between mb-5">
                <i className="col bi bi-journal-text fs-3"></i>
                <div className="col-10">
Choi Ga Young's avatar
Choi Ga Young committed
140
                    <textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" rows="5" value={studyplan.memo} onChange={handleChange}></textarea>
141
142
                </div>
            </div>
Choi Ga Young's avatar
Choi Ga Young committed
143
            <BtnGroup disabled={disabled} handleSubmit={handleSubmit} />
Kim, Subin's avatar
Kim, Subin committed
144
        </div>
145
146
147
148
    )
}

export default StudyPlanEditForm