import React, { FormEvent, MouseEventHandler, useState } from "react"; import { useNavigate, useLocation, Link } 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 location = useLocation() as PostState; const post = location.state; const [city, setCity] = useState(post.city); const [theme, setTheme] = useState(post.theme); const [title, setTitle] = useState(""); const [text, setText] = useState(""); const [file, setFile] = useState(); const [imgSrc, setImgSrc] = useState(); const [change, setChange] = useState(false); const navigate = useNavigate(); const [user, setUser] = useState({ title: post.title, text: post.text, theme: post.theme, city: post.city, date: post.date, user: post.user, counts: post.counts, _id: post._id, file: post.file, }); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [disabled, setDisabled] = useState(false); const [success, setSuccess] = useState(false); const imgArr = new Array(); console.log("post.file", post.file); const updateImg2Db = async (filelist: FileList | undefined) => { 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) { const res = await postApi.updateImgAndPost(user._id, formdata); return res; } else { for (var i = 0; i < filelist.length; i++) { formdata.append("picture", filelist?.[i]); } console.log("one file update before"); const res = await postApi.updateImgAndPost(user._id, formdata); console.log("one file update", res); return res; } }; async function reWriteSubmit(event: FormEvent) { event.preventDefault(); try { if (confirm("게시물을 수정하시겠습니까?") == true) { setError(""); if (postingFormMatch(user) === true) { setLoading(true); const updateRes = await updateImg2Db(file); // console.log("find newfilename", updateRes); navigate( { pathname: `/post/${post._id}` }, { replace: true, state: updateRes } ); setSuccess(true); setError(""); } } else { return false; } } catch (error) { console.log("에러발생"); catchErrors(error, setError); } finally { setLoading(false); } } const handleInputPic = async (event: React.ChangeEvent) => { setChange(true); const maxImg = 10; const { files } = event.target; // console.log("update file", files); 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}장까지 업로드 가능합니다!`); } } }; function postingFormMatch(user: PostType) { if (!isLength(user.title ?? "", { min: 1 })) { alert("제목을 입력해 주세요."); setError("제목을 입력해 주세요."); return false; } else if (!isLength(user.text ?? "", { min: 1 })) { alert("내용을 입력해 주세요."); setError("내용을 입력해 주세요."); return false; } else if (equals(city, "city")) { alert("도시를 선택해 주세요."); setError("도시를 선택해 주세요."); return false; } else if (equals(theme, "theme")) { alert("테마를 선택해 주세요."); setError("테마를 선택해 주세요."); return false; } else { return true; } } const titleChange = (event: React.ChangeEvent) => { 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) => { 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) => { 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) => { const theme = event.currentTarget.value; const newUser = { ...user, theme: theme }; console.log(event.currentTarget.value); setTheme(event.currentTarget.value); setUser(newUser); }; const GoBack = () => { if (confirm("취소하시겠습니까?") == true) { navigate(-1); } }; const oldFileShow = (post: PostType) => { const res = post.file?.map((file, i) => ( )); // console.log("oldfiles", res); return res; }; const newFileShow = (imgSrc: string[] | undefined) => { const res = imgSrc?.map((img, i) => ( )); return res; }; return (