editpost.tsx 9.13 KB
Newer Older
Lee Soobeom's avatar
Lee Soobeom committed
1
import React, { FormEvent, useState, useEffect } from "react";
Lee Soobeom's avatar
Lee Soobeom committed
2
3
4
5
6
7
8
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";
Lee Soobeom's avatar
Lee Soobeom committed
9
import { FileType } from "./intopost";
Lee Soobeom's avatar
Lee Soobeom committed
10
11

export function EditPost() {
Lee Soobeom's avatar
Lee Soobeom committed
12
13
  const [city, setCity] = useState<string>("city");
  const [theme, setTheme] = useState<string>("theme");
Lee Soobeom's avatar
Lee Soobeom committed
14
15
  const [title, setTitle] = useState<string>("");
  const [text, setText] = useState<string>("");
Lee Soobeom's avatar
Lee Soobeom committed
16
17
18
  const [file, setFile] = useState<FileList>();
  const [imgSrc, setImgSrc] = useState<string[]>();
  const [filesList, setFilesList] = useState<FileType[]>();
Lee Soobeom's avatar
Lee Soobeom committed
19
20
21
22
23
24
25
26
27
28
29
30
  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,
Lee Soobeom's avatar
Lee Soobeom committed
31
    counts: post.counts,
Lee Soobeom's avatar
Lee Soobeom committed
32
33
34
35
36
37
38
39
    _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
40
41
42
  useEffect(() => {
    getFilesList(post._id);
  }, []);
Lee Soobeom's avatar
Lee Soobeom committed
43

Lee Soobeom's avatar
Lee Soobeom committed
44
45
46
47
48
49
  const imgArr = new Array();

  const getFilesList = async (postId: string) => {
    const res = await postApi.getFileByPostId(postId); //_id는 req.params에 항상 같이 보낸다
    setFilesList(res);
  };
Lee Soobeom's avatar
Lee Soobeom committed
50

Lee Soobeom's avatar
Lee Soobeom committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
  const updateImg2Db = async (filelist: FileList) => {
    const formdata = new FormData();
    formdata.append("title", user.title);
    formdata.append("text", user.text);
    formdata.append("theme", user.theme);
    formdata.append("city", user.city);
    if (filelist === undefined || filelist === null) {
      const res = await postApi.updateImgAndPost(user._id, formdata);
    } else {
      for (var i = 0; i < filelist.length; i++) {
        formdata.append("picture", filelist?.[i]);
      }
      const res = await postApi.updateImgAndPost(user._id, formdata);
    }
  };
Lee Soobeom's avatar
Lee Soobeom committed
66

Lee Soobeom's avatar
Lee Soobeom committed
67
68
69
70
  async function reWriteSubmit(event: FormEvent) {
    event.preventDefault();
    try {
      if (confirm("게시물을 수정하시겠습니까?") == true) {
Lee Soobeom's avatar
Lee Soobeom committed
71
        setError("");
Lee Soobeom's avatar
Lee Soobeom committed
72
73
74
75
76
77
78
79
80
81
82
83
84
        // console.log("user data", user);
        if (postingFormMatch(user) === true) {
          setLoading(true);
          if (file) {
            const res = updateImg2Db(file);
            // console.log(res);
          }
          navigate("/board", { replace: true });
          setSuccess(true);
          setError("");
        }
      } else {
        return false;
Lee Soobeom's avatar
Lee Soobeom committed
85
86
87
88
89
90
91
92
93
      }
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    } finally {
      setLoading(false);
    }
  }

Lee Soobeom's avatar
Lee Soobeom committed
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
  const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const maxImg = 10;
    const { files } = event.target;

    if (!(files === null)) {
      setFile(files);
    }

    if (!(files?.length === undefined)) {
      if (files?.length <= maxImg) {
        for (var i = 0; i < files.length; i++) {
          const reader = new FileReader();
          reader.readAsDataURL(files?.[i]);

          reader.onload = (e) => {
            imgArr.push(e.target?.result);
            setImgSrc(imgArr);
          };
        }
      } else {
        alert(`사진은 최대 ${maxImg}장까지 업로드 가능합니다!`);
      }
    }
  };

Lee Soobeom's avatar
Lee Soobeom committed
119
  function postingFormMatch(user: PostType) {
Lee Soobeom's avatar
Lee Soobeom committed
120
121
    if (!isLength(user.title ?? "", { min: 1 })) {
      setError("제목을 입력해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
122
      alert("제목을 입력해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
123
124
      return false;
    } else if (!isLength(user.text ?? "", { min: 1 })) {
Lee Soobeom's avatar
Lee Soobeom committed
125
      alert("내용을 입력해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
126
127
      setError("내용을 입력해 주세요.");
      return false;
Lee Soobeom's avatar
Lee Soobeom committed
128
129
    } else if (equals(user.city, "city")) {
      alert("도시를 선택해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
130
      setError("도시를 선택해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
131
      return false;
Lee Soobeom's avatar
Lee Soobeom committed
132
133
    } else if (equals(user.theme, "theme")) {
      alert("테마를 선택해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
134
      setError("테마를 선택해 주세요.");
Lee Soobeom's avatar
Lee Soobeom committed
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
      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 (
Lee Soobeom's avatar
Lee Soobeom committed
174
175
176
177
178
179
180
181
182
183
184
    <div className="flex place-content-center">
      <form
        onSubmit={reWriteSubmit}
        className="flex flex-col w-96 items-center"
      >
        <div className="flex flex-row h-8 gap-x-1">
          <div className="flex border-2 border-sky-400 rounded-full w-20 place-content-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
            <input
              id="files"
              type="file"
              multiple
Lee Soobeom's avatar
Lee Soobeom committed
185
              onChange={handleInputPic}
Lee Soobeom's avatar
Lee Soobeom committed
186
187
188
189
190
191
192
193
194
195
196
197
              className="hidden"
            />
            <label htmlFor="files" className="text-xs mt-1.5 ml-1 ">
              파일 선택
            </label>
          </div>

          <div className="flex w-20">
            <select
              name="city"
              className="border-2 border-sky-400 rounded-full w-20 text-xs"
              onChange={cityChange}
Lee Soobeom's avatar
Lee Soobeom committed
198
              defaultValue={post.city}
Lee Soobeom's avatar
Lee Soobeom committed
199
            >
Lee Soobeom's avatar
Lee Soobeom committed
200
              <option value="city">도시</option>
Lee Soobeom's avatar
Lee Soobeom committed
201
202
203
              <option value="Seoul">서울</option>
              <option value="Busan">부산</option>
              <option value="Incheon">인천</option>
Lee Soobeom's avatar
Lee Soobeom committed
204
205
              <option value="Daegu">대구</option>
              <option value="Gwangju">광주</option>
Lee Soobeom's avatar
Lee Soobeom committed
206
207
208
209
210
211
212
213
214
215
216
217
218
              <option value="Daejeon">대전</option>
              <option value="Woolsan">울산</option>
              <option value="Sejong">세종</option>
              <option value="Dokdo">독도</option>
              <option value="Jeju">제주</option>
            </select>
          </div>

          <div className="flex w-20">
            <select
              name="theme"
              className="border-2 border-sky-400 rounded-full w-20 text-xs"
              onChange={themeChange}
Lee Soobeom's avatar
Lee Soobeom committed
219
              defaultValue={post.theme}
Lee Soobeom's avatar
Lee Soobeom committed
220
            >
Lee Soobeom's avatar
Lee Soobeom committed
221
              <option value="theme">테마</option>
Lee Soobeom's avatar
Lee Soobeom committed
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
              <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>
          </div>

          <div className="flex w-20">
            <button
              type="submit"
Lee Soobeom's avatar
Lee Soobeom committed
240
              className="border-2 border-sky-400 rounded-full w-20 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
Lee Soobeom's avatar
Lee Soobeom committed
241
            >
Lee Soobeom's avatar
Lee Soobeom committed
242
              수정
Lee Soobeom's avatar
Lee Soobeom committed
243
244
            </button>
          </div>
Lee Soobeom's avatar
Lee Soobeom committed
245
246
        </div>

Lee Soobeom's avatar
Lee Soobeom committed
247
        <div className="flex flex-col">
Lee Soobeom's avatar
Lee Soobeom committed
248
249
250
          <textarea
            name="title"
            onChange={titleChange}
Lee Soobeom's avatar
Lee Soobeom committed
251
252
253
254
255
            placeholder="제목을 입력해 주세요!"
            className="flex w-96 border-2 border-sky-500 rounded"
          />
          <div className="flex flex-col mt-1 mb-1">
            <div className="flex gap-x-2 h-48 overflow-x-scroll">
Lee Soobeom's avatar
Lee Soobeom committed
256
257
258
259
260
261
262
263
              {filesList?.map((file, i) => (
                <img
                  key={i}
                  src={"http://localhost:3000/images/" + file.newfilename}
                  width={200}
                  height={200}
                />
              ))}
Lee Soobeom's avatar
Lee Soobeom committed
264
265
            </div>
          </div>
Lee Soobeom's avatar
Lee Soobeom committed
266
267
268
          <textarea
            onChange={textChange}
            name="text"
Lee Soobeom's avatar
Lee Soobeom committed
269
270
271
            placeholder="여행 후기를 알려주세요!"
            className="flex w-96 h-96 border-2 border-sky-500 rounded"
          />
Lee Soobeom's avatar
Lee Soobeom committed
272
273
274
275
276
        </div>
      </form>
    </div>
  );
}