import React, { FormEvent, useEffect, useState } from "react"; import { useNavigate, 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"; export default function Posting() { const [city, setCity] = useState("city"); const [theme, setTheme] = useState("theme"); const [title, setTitle] = useState(""); const [text, setText] = useState(""); const [file, setFile] = useState(); const [imgSrc, setImgSrc] = useState(); const navigate = useNavigate(); const [user, setUser] = useState({ title: "", text: "", theme: "theme", city: "city", date: "", user: { _id: "", name: "", avatar: "", }, counts: 0, _id: "", file: [ { _id: "", originalfilename: "", newfilename: "", picturepath: "", }, ], }); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [disabled, setDisabled] = useState(false); const [success, setSuccess] = useState(false); const imgArr = new Array(); const sendImg2Db = 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)) { if (filelist.length === 1) { formdata.append("picture", filelist?.[0]); const res = await postApi.createFileAndPost(formdata); return res; } else { for (var i = 0; i < filelist.length; i++) { formdata.append("picture", filelist?.[i]); } const res = await postApi.createFileAndPost(formdata); return res; } } }; async function handlePostSubmit(event: FormEvent) { event.preventDefault(); try { if (confirm("게시물을 작성하시겠습니까?") == true) { setError(""); if (postingFormMatch(user, file)) { setLoading(true); if (file) { const postRes = await sendImg2Db(file); navigate("/posts", { replace: true, state: postRes }); } setSuccess(true); setError(""); } } else { return false; } } catch (error) { console.log("에러발생"); catchErrors(error, setError); } finally { setLoading(false); } } function postingFormMatch(user: PostType, file: FileList | undefined) { if (!isLength(user.title ?? "", { min: 1 })) { alert("제목을 입력해 주세요."); setError("제목을 입력해 주세요."); return false; } else if (!isLength(user.text ?? "", { min: 1 })) { alert("내용을 입력해 주세요."); setError("내용을 입력해 주세요."); return false; } else if (file === undefined) { alert("사진을 첨부해 주세요."); setError("사진을 첨부해 주세요."); return false; } else if (equals(user.city, "city")) { alert("도시를 선택해 주세요."); setError("도시를 선택해 주세요."); return false; } else if (equals(user.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 handleInputPic = async (event: React.ChangeEvent) => { 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}장까지 업로드 가능합니다!`); } } }; const GoBack = () => { if (confirm("취소하시겠습니까?") == true) { navigate(-1); } }; return (
당신의 여행을 알려주세요!