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

const SubjectForm = () => {
10
  const { user } = useAuth();
11
  const { subjectId } = useParams();
12
  const [success, setSuccess] = useState(false)
13
  const [error, setError] = useState("");
Kim, Subin's avatar
Kim, Subin committed
14
  const [disabled, setDisabled] = useState(true)
15
16
17
18
19
  const [subject, setSubject] = useState({
    lectureName: "",
    prof: "",
    classRoom: ""
  })
20
21

  useEffect(() => {
Kim, Subin's avatar
Kim, Subin committed
22
    if (subjectId) getInfo(subjectId);
23
24
  }, [])

25
26
  useEffect(() => {
    let isMounted = true;
Choi Ga Young's avatar
Choi Ga Young committed
27
    const checkInfo = { lectureName: subject.lectureName }
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    if (isMounted) {
      const isSubject = Object.values(checkInfo).every((el) => Boolean(el));
      isSubject ? setDisabled(false) : setDisabled(true);
    }
    return () => {
      isMounted = false;
    }
  }, [subject])

  function handleChange(e) {
    const { name, value } = e.target
    setSubject({ ...subject, [name]: value })
  }
42

Kim, Subin's avatar
Kim, Subin committed
43
44
45
46
47
48
49
50
  async function getInfo(subjectId) {
    try {
      setError("")
      const result = await subjectApi.getSubInfo(user.id, subjectId)
      setSubject({ ...subject, ...result })
    } catch (error) {
      catchErrors(error, setError)
    }
51
  }
52

Choi Ga Young's avatar
Choi Ga Young committed
53
  async function handleSubmit(e) {
54
55
    e.preventDefault();
    try {
56
      setError("")
57
58
      if (subjectId) {
        //수정함수 실행
Kim, Subin's avatar
Kim, Subin committed
59
60
        await subjectApi.editSubject(subject, user.id, subjectId)
        alert("해당 과목 정보가 성공적으로 수정되었습니다.")
61
      } else {
62
        //등록함수 실행
Kim, Subin's avatar
Kim, Subin committed
63
64
        await subjectApi.addSubject(subject, user.id)
        alert("해당 과목 정보가 성공적으로 등록되었습니다.")
65
      }
Kim, Subin's avatar
Kim, Subin committed
66
      setSuccess(true)
67
68
    } catch (error) {
      catchErrors(error, setError)
69
70
71
72
73
      setSubject({
        lectureName: "",
        prof: "",
        classRoom: ""
      })
74
75
    }
  }
Choi Ga Young's avatar
Choi Ga Young committed
76

77
78
79
80
  if (success) {
    return <Redirect to="/studyplan" />
  }

81
  return (
Choi Ga Young's avatar
Choi Ga Young committed
82
83
84
85
86
87
88
89
90
    <div className="position-absolute top-50 start-50 translate-middle" style={{ width: "80%" }}>
      <div>
        <div className="mb-5 d-flex flex-row">
          <label className="form-label fs-4" style={{ width: "100px" }}>강의명</label>
          <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.lectureName} name="lectureName" onChange={handleChange} />
        </div>
        <div className="mb-5 pt-2 d-flex flex-row">
          <label className="form-label fs-4" style={{ width: "100px" }}>교수명</label>
          <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.prof} name="prof" onChange={handleChange} />
91
        </div>
Choi Ga Young's avatar
Choi Ga Young committed
92
93
94
        <div className="mb-5 pt-2 d-flex flex-row">
          <label className="form-label fs-4 " style={{ width: "100px", letterSpacing: "15px" }}>장소</label>
          <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.classRoom} name="classRoom" onChange={handleChange} />
Choi Ga Young's avatar
Choi Ga Young committed
95
        </div>
96
      </div>
Choi Ga Young's avatar
Choi Ga Young committed
97
98
99
100
      <div className="pt-2">
        <BtnGroup text={subjectId} disabled={disabled} handleSubmit={handleSubmit} />
      </div>
    </div>
101
102
103
104
  )
}

export default SubjectForm;