posting.tsx 5.75 KB
Newer Older
1
import React, { FormEvent, useState } from "react";
Lee Soobeom's avatar
Lee Soobeom committed
2
import { useNavigate } from "react-router-dom";
3
4
5
import isLength from "validator/lib/isLength";
import equals from "validator/lib/equals";
import { catchErrors } from "../helpers";
Lee Soobeom's avatar
Lee Soobeom committed
6
import { PostType } from "../types";
7
import { postApi } from "../apis";
Kim, MinGyu's avatar
Kim, MinGyu committed
8

9
10
11
12
13
export default function Posting() {
  const [city, setCity] = useState<string>("질문종류");
  const [theme, setTheme] = useState<string>("질문종류");
  const [title, setTitle] = useState<string>("");
  const [text, setText] = useState<string>("");
Lee Soobeom's avatar
Lee Soobeom committed
14
  const navigate = useNavigate();
Kim, MinGyu's avatar
Kim, MinGyu committed
15

Lee Soobeom's avatar
Lee Soobeom committed
16
  const [user, setUser] = useState<PostType>({
17
18
19
20
    title: "",
    text: "",
    theme: "",
    city: "",
Lee Soobeom's avatar
Lee Soobeom committed
21
22
    date: "",
    user: "",
Lee Soobeom's avatar
Lee Soobeom committed
23
    counts: 0,
Lee Soobeom's avatar
Lee Soobeom committed
24
    _id: "",
25
  });
Kim, MinGyu's avatar
Kim, MinGyu committed
26

27
28
29
30
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [disabled, setDisabled] = useState(false);
  const [success, setSuccess] = useState(false);
Kim, MinGyu's avatar
Kim, MinGyu committed
31

32
  async function handlePostSubmit(event: FormEvent) {
Lee Soobeom's avatar
Lee Soobeom committed
33
34
    event.preventDefault();

35
36
37
38
39
40
    try {
      setError("");
      console.log("user data", user);
      if (postingFormMatch()) {
        setLoading(true);
        const res = await postApi.posting(user);
Lee Soobeom's avatar
Lee Soobeom committed
41
        console.log("서버연결됬나요", res);
Lee Soobeom's avatar
Lee Soobeom committed
42
43
        // console.log("user save");
        navigate("/board", { replace: true });
44
45
46
47
48
49
50
51
52
        setSuccess(true);
        setError("");
      }
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    } finally {
      setLoading(false);
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
53
54
  }

55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
  function postingFormMatch() {
    if (!isLength(user.title ?? "", { min: 1 })) {
      setError("제목을 입력해 주세요.");
      return false;
    } else if (!isLength(user.text ?? "", { min: 1 })) {
      setError("내용을 입력해 주세요.");
      return false;
    } else if (equals(city, "질문종류")) {
      setError("테마를 선택해 주세요.");
      return false;
    } else if (equals(theme, "질문종류")) {
      setError("도시를 선택해 주세요.");
      return false;
    } else {
      return true;
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
71
72
  }

73
74
75
76
77
78
79
  const titleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const title = event.currentTarget.value;
    const newUser = { ...user, title: title };
    console.log(event.currentTarget.value);
    setTitle(event.currentTarget.value);
    setUser(newUser);
  };
Kim, MinGyu's avatar
Kim, MinGyu committed
80

81
82
83
84
85
86
87
  const textChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const text = event.currentTarget.value;
    const newUser = { ...user, text: text };
    console.log(event.currentTarget.value);
    setText(event.currentTarget.value);
    setUser(newUser);
  };
Kim, MinGyu's avatar
Kim, MinGyu committed
88

89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
  const cityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const city = event.currentTarget.value;
    const newUser = { ...user, city: city };
    console.log(event.currentTarget.value);
    setCity(event.currentTarget.value);
    setUser(newUser);
  };

  const themeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const theme = event.currentTarget.value;
    const newUser = { ...user, theme: theme };
    console.log(event.currentTarget.value);
    setTheme(event.currentTarget.value);
    setUser(newUser);
  };
Lee Soobeom's avatar
Lee Soobeom committed
104

Kim, MinGyu's avatar
Kim, MinGyu committed
105
106
  return (
    <div className="flex flex-col border-3">
107
      <form onSubmit={handlePostSubmit} className="w-full items-center">
Kim, MinGyu's avatar
Kim, MinGyu committed
108
109
110
        <div className="flex flex-row relative">
          <p className="basis-1/12 gap-x-8">Id</p>
          <p className="basis-8/12 invisible">empty</p>
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
          <select
            name="city"
            id="Questions"
            className="border border-3 border-black w-1/12"
            onChange={cityChange}
            defaultValue="질문종류"
          >
            <option value="질문종류">도시</option>
            <option value="Seoul">서울</option>
            <option value="Busan">부산</option>
            <option value="Incheon">인천</option>
            <option value="Daegoo">대구</option>
            <option value="Kwangjoo">광주</option>
            <option value="Daejeon">대전</option>
            <option value="Woolsan">울산</option>
            <option value="Sejong">세종</option>
            <option value="Dokdo">독도</option>
            <option value="Jeju">제주</option>
          </select>
          <select
            name="theme"
            id="Questions"
            className="border border-3 border-black w-1/12"
            onChange={themeChange}
            defaultValue="질문종류"
          >
            <option value="질문종류">테마</option>
            <option value="cycling">사이클링</option>
            <option value="surfing">서핑</option>
            <option value="activity">액티비티</option>
            <option value="camping">캠핑</option>
            <option value="sking">스키</option>
            <option value="boat">보트</option>
            <option value="desert">사막</option>
            <option value="golf">골프</option>
            <option value="cave">동굴</option>
            <option value="history">문화재</option>
            <option value="zoo">동물원</option>
            <option value="cycling">사이클링</option>
          </select>
Kim, MinGyu's avatar
Kim, MinGyu committed
151
152
153
154
155
156
157
158
159
160
161

          <button
            type="submit"
            className="border border-black basis-1/12 gap-x-8"
          >
            글쓰기
          </button>
        </div>

        <div className="flex border-4">
          <textarea
162
163
            name="title"
            onChange={titleChange}
Kim, MinGyu's avatar
Kim, MinGyu committed
164
165
166
167
            placeholder="title"
            className="w-full h-8"
          ></textarea>
        </div>
168
169
170
171
172
173
174
        <div className="flex border-2">
          <textarea
            onChange={textChange}
            name="text"
            placeholder="text"
            className="w-full h-96"
          ></textarea>
Lee Soobeom's avatar
Lee Soobeom committed
175
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
176
177
178
179
      </form>
    </div>
  );
}