import React, { FormEvent, useEffect, useState } from "react"; import { useNavigate } 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 { File } from "formidable"; 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: "", city: "", date: "", user: "", counts: 0, _id: "", }); 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)) { for (var i = 0; i < filelist.length; i++) { formdata.append("picture", filelist?.[i]); } // formdata: post, imgs const res = await postApi.createImgAndPost(formdata); } // else { // const res = await postApi.createImgAndPostTable(formdata); // } }; async function handlePostSubmit(event: FormEvent) { event.preventDefault(); try { setError(""); console.log("user data", user); if (postingFormMatch(user)) { setLoading(true); if (file) { const res = sendImg2Db(file); console.log(res); } // const res = await postApi.posting(user); // console.log("서버연결됬나요", res); navigate("/board", { replace: true }); setSuccess(true); setError(""); } } catch (error) { console.log("에러발생"); catchErrors(error, setError); } finally { setLoading(false); } } function postingFormMatch(user: PostType) { if (!isLength(user.title ?? "", { min: 1 })) { setError("제목을 입력해 주세요."); return false; } else if (!isLength(user.text ?? "", { min: 1 })) { setError("내용을 입력해 주세요."); return false; } else if (equals(city, "city")) { setError("도시를 선택해 주세요."); return false; } else if (equals(theme, "theme")) { 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}장까지 업로드 가능합니다!`); } } }; return (