Skip to content

GitLab

Commit e0e61741 authored by Lee Soobeom's avatar Lee Soobeom
Browse files

0816

parent a092f3d1
Hide whitespace changes
Inline Side-by-side
frontend/src/board/board.tsx
View file @ e0e61741
import React, { useState, MouseEvent, useEffect } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import {
Link,
Outlet,
useLocation,
useNavigate,
useOutletContext,
} from "react-router-dom";
import { PostType } from "../types";
import Post from "../post/post";
import { postApi } from "../apis";
import { useAuth } from "../auth/auth.context";
interface Posts {
interface Props {
posts: PostType[];
}
......@@ -14,36 +20,13 @@ interface Newpost {
}
export default function BoardPage() {
const [posts, setPosts] = useState<PostType[]>();
const posts = useOutletContext<PostType[]>();
const location = useLocation() as Newpost;
const newPost = location.state;
const deletePostId = location.state._id;
const navigate = useNavigate();
const { user } = useAuth();
// console.log("get newPost Info", newPost);
const setNewPosts = (newpost: PostType) => {
const postArr = posts?.splice(-1, 0, newPost);
if (!(postArr === undefined)) {
setPosts(postArr);
}
};
useEffect(() => {
getDataList();
setNewPosts(newPost);
}, []);
const getDataList = async () => {
const res = await postApi.getData();
setPosts(res); //posts = res
};
const deletePost = async (postId: string) => {
const res = await postApi.deletePost(postId);
return res;
};
console.log("posts", posts);
const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {
const postId = event.currentTarget.id;
......@@ -55,8 +38,6 @@ export default function BoardPage() {
if (!(newpost?._id === undefined)) {
const post = newpost;
const res = await postApi.addCounts(post._id, post.counts);
// console.log(res);
// setPosts(res);
}
};
......@@ -82,7 +63,7 @@ export default function BoardPage() {
<div className="flex justify-end">
<div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
<button onClick={GoLogin}>
<Link to="/posting">글쓰기</Link>
<Link to="posting">글쓰기</Link>
</button>
</div>
</div>
......@@ -99,6 +80,8 @@ export default function BoardPage() {
</div>
</div>
</div>
<Outlet />
</div>
);
}
frontend/src/board/posts.tsx
View file @ e0e61741
import React, { ReactNode } from "react";
import { Outlet } from "react-router-dom";
import React, { ReactNode, useState, useEffect } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { postApi } from "../apis";
import { PostType } from "../types";
interface FormType {
state: FormData;
}
export default function Posts() {
return <Outlet />;
const [posts, setPosts] = useState<PostType[]>([]);
const location = useLocation() as FormType;
const formdata = location.state;
useEffect(() => {
getDataList();
}, []);
//Read
const getDataList = async () => {
const res = await postApi.getData();
setPosts(res);
};
//Create
const createPost = async (filelist: FileList) => {
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;
}
}
};
//Delete
const deletePost = async (postId: string) => {
const res = await postApi.deletePost(postId);
return res;
};
console.log("sdfa", posts);
return <Outlet context={{ posts, createPost, deletePost }} />;
}
frontend/src/home/header.tsx
View file @ e0e61741
......@@ -73,7 +73,7 @@ export default function Header() {
<div></div>
<button className="shrink-0 mr-3 text-xs ">
<Link
to="/board"
to="/posts"
className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
>
게시판
......
frontend/src/post/intopost.tsx
View file @ e0e61741
......@@ -30,9 +30,9 @@ export function IntoPost() {
try {
if (confirm("삭제하시겠습니까?") == true) {
const postId = event.currentTarget.id;
const res = await postApi.deletePost(postId);
navigate("/board");
console.log("delete post", res);
// const res = await postApi.deletePost(postId);
navigate("/posts");
// console.log("delete post", res);
} else {
return false;
}
......
frontend/src/post/posting.tsx
View file @ e0e61741
......@@ -45,29 +45,29 @@ export default function Posting() {
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 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);
// 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;
// } else {
// for (var i = 0; i < filelist.length; i++) {
// formdata.append("picture", filelist?.[i]);
// }
// const res = await postApi.createFileAndPost(formdata);
return res;
}
}
};
// return res;
// }
// }
// };
async function handlePostSubmit(event: FormEvent) {
event.preventDefault();
......@@ -77,8 +77,13 @@ export default function Posting() {
if (postingFormMatch(user, file)) {
setLoading(true);
if (file) {
const postRes = await sendImg2Db(file);
navigate("/posts", { replace: true, state: postRes });
const formdata = new FormData();
formdata.append("title", user.title);
formdata.append("text", user.text);
formdata.append("theme", user.theme);
formdata.append("city", user.city);
// const postRes = await createPost(file, formdata);
navigate("/posts", { replace: true, state: formdata });
}
setSuccess(true);
setError("");
......@@ -120,33 +125,17 @@ export default function Posting() {
}
}
const titleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
const title = event.currentTarget.value;
const newUser = { ...user, title: title };
const stringChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
const { name, value } = event.currentTarget;
const newUser = { ...user, [name]: value };
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 };
const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const { name, value } = event.currentTarget;
const newUser = { ...user, [name]: value };
console.log(event.currentTarget.value);
setTheme(event.currentTarget.value);
setUser(newUser);
......@@ -206,7 +195,7 @@ export default function Posting() {
<select
name="city"
className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={cityChange}
onChange={selectChange}
defaultValue="city"
>
<option value="city">도시</option>
......@@ -225,7 +214,7 @@ export default function Posting() {
<select
name="theme"
className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={themeChange}
onChange={selectChange}
defaultValue="theme"
>
<option value="theme">테마</option>
......@@ -254,7 +243,7 @@ export default function Posting() {
<div className="flex flex-col w-full border-y-2 border-sky-500">
<textarea
name="title"
onChange={titleChange}
onChange={stringChange}
placeholder="제목을 입력해 주세요!"
className="flex focus:outline-none"
/>
......@@ -266,7 +255,7 @@ export default function Posting() {
</div>
</div>
<textarea
onChange={textChange}
onChange={stringChange}
name="text"
placeholder="여행 후기를 알려주세요!"
className="flex h-44 border-t-2 border-sky-200 focus:outline-none "
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment