editpost.tsx 5.88 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, { FormEvent, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import isLength from "validator/lib/isLength";
import equals from "validator/lib/equals";
import { catchErrors } from "../helpers";
import { PostType } from "../types";
import { postApi } from "../apis";
import { PostState } from "./intopost";

export function EditPost() {
  const [city, setCity] = useState<string>("질문종류");
  const [theme, setTheme] = useState<string>("질문종류");
  const [title, setTitle] = useState<string>("");
  const [text, setText] = useState<string>("");
  const navigate = useNavigate();
  const location = useLocation() as PostState;

  const post = location.state;

  const [user, setUser] = useState<PostType>({
    title: post.title,
    text: post.text,
    theme: post.theme,
    city: post.city,
    date: post.date,
    user: post.user,
    counts: 0,
    _id: post._id,
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [disabled, setDisabled] = useState(false);
  const [success, setSuccess] = useState(false);

Lee Soobeom's avatar
Lee Soobeom committed
36
  async function reWriteSubmit(event: FormEvent) {
Lee Soobeom's avatar
Lee Soobeom committed
37
38
39
40
41
42
    event.preventDefault();
    try {
      setError("");

      console.log("user data", user);

Lee Soobeom's avatar
Lee Soobeom committed
43
      if (postingFormMatch(user) === true) {
Lee Soobeom's avatar
Lee Soobeom committed
44
45
        setLoading(true);
        const res = await postApi.updating(user);
Lee Soobeom's avatar
Lee Soobeom committed
46
47

        console.log("clear", res);
Lee Soobeom's avatar
Lee Soobeom committed
48
49
50
51
52
53
54
55
56
57
58
59
        navigate("/board", { replace: true });
        setSuccess(true);
        setError("");
      }
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    } finally {
      setLoading(false);
    }
  }

Lee Soobeom's avatar
Lee Soobeom committed
60
  function postingFormMatch(user: PostType) {
Lee Soobeom's avatar
Lee Soobeom committed
61
62
63
64
65
66
    if (!isLength(user.title ?? "", { min: 1 })) {
      setError("제목을 입력해 주세요.");
      return false;
    } else if (!isLength(user.text ?? "", { min: 1 })) {
      setError("내용을 입력해 주세요.");
      return false;
Lee Soobeom's avatar
Lee Soobeom committed
67
    } else if (equals(city, "city")) {
Lee Soobeom's avatar
Lee Soobeom committed
68
69
      setError("테마를 선택해 주세요.");
      return false;
Lee Soobeom's avatar
Lee Soobeom committed
70
    } else if (equals(theme, "theme")) {
Lee Soobeom's avatar
Lee Soobeom 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
      setError("도시를 선택해 주세요.");
      return false;
    } else {
      return true;
    }
  }

  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);
  };

  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);
  };

  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);
  };

  return (
    <div className="flex flex-col border-3">
Lee Soobeom's avatar
Lee Soobeom committed
112
      <form onSubmit={reWriteSubmit} className="w-full items-center">
Lee Soobeom's avatar
Lee Soobeom committed
113
114
115
116
117
118
119
        <div className="flex flex-row relative">
          <p className="basis-1/12 gap-x-8">Id</p>
          <p className="basis-8/12 invisible">empty</p>
          <select
            name="city"
            className="border border-3 border-black w-1/12"
            onChange={cityChange}
Lee Soobeom's avatar
Lee Soobeom committed
120
            defaultValue={post.city}
Lee Soobeom's avatar
Lee Soobeom committed
121
          >
Lee Soobeom's avatar
Lee Soobeom committed
122
            <option value="city">도시</option>
Lee Soobeom's avatar
Lee Soobeom committed
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
            <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"
            className="border border-3 border-black w-1/12"
            onChange={themeChange}
Lee Soobeom's avatar
Lee Soobeom committed
138
            defaultValue={post.theme}
Lee Soobeom's avatar
Lee Soobeom committed
139
          >
Lee Soobeom's avatar
Lee Soobeom committed
140
            <option value="theme">테마</option>
Lee Soobeom's avatar
Lee Soobeom committed
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
            <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>

          <button
            type="submit"
            className="border border-black basis-1/12 gap-x-8"
          >
Lee Soobeom's avatar
Lee Soobeom committed
159
            Rewrite
Lee Soobeom's avatar
Lee Soobeom committed
160
161
162
163
164
165
166
167
168
          </button>
        </div>

        <div className="flex border-4">
          <textarea
            name="title"
            onChange={titleChange}
            placeholder="title"
            className="w-full h-8"
Lee Soobeom's avatar
Lee Soobeom committed
169
170
            defaultValue={post.title}
          ></textarea>
Lee Soobeom's avatar
Lee Soobeom committed
171
172
173
174
175
176
177
        </div>
        <div className="flex border-2">
          <textarea
            onChange={textChange}
            name="text"
            placeholder="text"
            className="w-full h-96"
Lee Soobeom's avatar
Lee Soobeom committed
178
179
            defaultValue={post.text}
          ></textarea>
Lee Soobeom's avatar
Lee Soobeom committed
180
181
182
183
184
        </div>
      </form>
    </div>
  );
}