StudyPlanEditForm.js 6.11 KB
Newer Older
1
import { useState, useEffect } from 'react';
Kim, Subin's avatar
Kim, Subin committed
2
import { useParams, Redirect } 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
    const { user } = useAuth();
    const params = useParams();
    const [disabled, setDisabled] = useState(true)
    const [error, setError] = useState("");
Kim, Subin's avatar
Kim, Subin committed
15
    const [success, setSuccess] = useState(false)
16
17
18
    const [studyplan, setStudyplan] = useState({
        studyplanTitle: "",
        endDate: "",
Choi Ga Young's avatar
Choi Ga Young committed
19
20
21
        memo: "",
        deadline: "",
        selected: ""
22
    })
Kim, Subin's avatar
Kim, Subin committed
23
    const [subjectList, setList] = useState([])
24
25
26

    useEffect(() => {
        let isMounted = true;
Kim, Subin's avatar
plan    
Kim, Subin committed
27
        const checkInfo = { studyplanTitle: studyplan.studyplanTitle, endDate: studyplan.endDate, selected: studyplan.selected }
Choi Ga Young's avatar
Choi Ga Young committed
28
        if (studyplan.deadline === "on") {
29
30
31
32
33
34
35
36
37
38
39
40
41
            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
42
    useEffect(() => {
Kim, Subin's avatar
Kim, Subin committed
43
        getSubject(user.id)
Kim, Subin's avatar
plan    
Kim, Subin committed
44
45
        if (params.subjectId) setStudyplan({...studyplan, selected: params.subjectId })
        else if (params.planId) getInfo(params.planId);
Choi Ga Young's avatar
Choi Ga Young committed
46
47
    }, [])

Kim, Subin's avatar
plan    
Kim, Subin committed
48
    async function getSubject(id) {
Kim, Subin's avatar
Kim, Subin committed
49
50
        try {
            setError("")
Kim, Subin's avatar
plan    
Kim, Subin committed
51
52
            const result = await subjectApi.subjectTitle(id)
            setList(result)
Kim, Subin's avatar
Kim, Subin committed
53
54
        } catch (error) {
            catchErrors(error, setError)
Choi Ga Young's avatar
Choi Ga Young committed
55
        }
Choi Ga Young's avatar
Choi Ga Young committed
56
57
    }

Kim, Subin's avatar
plan    
Kim, Subin committed
58
    async function getInfo(planId) {
Kim, Subin's avatar
Kim, Subin committed
59
60
        try {
            setError("")
Kim, Subin's avatar
plan    
Kim, Subin committed
61
62
            const result = await planApi.getDetail(planId)
            setStudyplan({ ...studyplan, ...result })
Kim, Subin's avatar
Kim, Subin committed
63
64
65
        } catch (error) {
            catchErrors(error, setError)
        }
Choi Ga Young's avatar
Choi Ga Young committed
66
67
    }

68
69
70
71
72
73
74
75
76
    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
77
78
79
80
    async function handleSubmit(e) {
        e.preventDefault();
        try {
            setError("")
Kim, Subin's avatar
plan    
Kim, Subin committed
81
            if (params.subjectId) {
Choi Ga Young's avatar
Choi Ga Young committed
82
                //등록함수 실행
Kim, Subin's avatar
plan    
Kim, Subin committed
83
                await planApi.submit(studyplan, params.subjectId)
Kim, Subin's avatar
Kim, Subin committed
84
                alert("해당 학업계획이 성공적으로 등록되었습니다.")
Choi Ga Young's avatar
Choi Ga Young committed
85
86
            } else {
                //수정함수 실행
Kim, Subin's avatar
plan    
Kim, Subin committed
87
                await planApi.edit(studyplan, params.planId)
Kim, Subin's avatar
Kim, Subin committed
88
                alert("해당 학업계획이 성공적으로 수정되었습니다.")
Choi Ga Young's avatar
Choi Ga Young committed
89
            }
Kim, Subin's avatar
Kim, Subin committed
90
            setSuccess(true)
Choi Ga Young's avatar
Choi Ga Young committed
91
92
93
94
95
96
        } catch (error) {
            catchErrors(error, setError)
            setStudyplan({
                studyplanTitle: "",
                endDate: "",
                deadline: "",
Kim, Subin's avatar
plan    
Kim, Subin committed
97
98
                memo: "",
                selected: ""
Choi Ga Young's avatar
Choi Ga Young committed
99
100
101
102
            })
        }
    }

Kim, Subin's avatar
Kim, Subin committed
103
104
105
106
    if (success) {
        return <Redirect to="/studyplan" />
    }

107
    return (
Kim, Subin's avatar
Kim, Subin committed
108
        <div className="pt-5">
Kim, Subin's avatar
plan    
Kim, Subin committed
109
110
111
112
113
114
115
116
117
118
            {console.log("studyplan---",studyplan)}
            <select className={`form-select mb-4 ${styles.selectInput}`} name="selected" aria-label="Choose subject" onChange={handleChange}>
                {subjectList.length !== 0 ? subjectList.map((subject, idx) => {
                    if (idx === 0) return <>
                        <option selected={studyplan.selected === "" ? true : false}>관련 과목을 선택해주세요.</option>
                        <option value={subject.id} selected={studyplan.selected === subject.id ? true : false}>{subject.name}</option>
                    </>
                    else return <option value={subject.id} selected={studyplan.selected === subject.id ? true : false}>{subject.name}</option>
                })
                : <option selected>새로운 과목을 만들어주세요.</option>}
Kim, Subin's avatar
Kim, Subin committed
119
120
121
            </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
122
                placeholder="제목" value={studyplan.studyplanTitle} onChange={handleChange} />
Kim, Subin's avatar
Kim, Subin committed
123
124
            <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
125
126
                <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} />
127
                </div>
Choi Ga Young's avatar
Choi Ga Young committed
128
129
                <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} />
130
                </div>
Kim, Subin's avatar
Kim, Subin committed
131
132
            </div>
            <div className="d-flex justify-content-end form-check mb-4">
Choi Ga Young's avatar
Choi Ga Young committed
133
                <input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} checked={studyplan.deadline === "on" ? true : false} />
Kim, Subin's avatar
Kim, Subin committed
134
135
136
137
138
                <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
139
                    <textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" rows="5" value={studyplan.memo} onChange={handleChange}></textarea>
140
141
                </div>
            </div>
Choi Ga Young's avatar
Choi Ga Young committed
142
            <BtnGroup disabled={disabled} handleSubmit={handleSubmit} />
Kim, Subin's avatar
Kim, Subin committed
143
        </div>
144
145
146
147
    )
}

export default StudyPlanEditForm