From e84062383d1e5b8d56cc026efc7754ce550fadcc Mon Sep 17 00:00:00 2001
From: WiFiHan <mukss0909056@gmail.com>
Date: Thu, 1 Jun 2023 13:39:03 +0900
Subject: [PATCH] [feat]MyPage React

---
 src/App.js                         |   4 +
 src/apis/api.js                    |  19 ++++
 src/components/Comment/index.jsx   |  66 ++++++++++++++
 src/components/EditInput/index.jsx | 139 +++++++++++++++++++++++++++++
 src/components/Header/index.jsx    |  15 +++-
 src/routes/MyPage.jsx              |  54 +++++++++++
 src/routes/PostCreatePage.jsx      |  48 ++++++++++
 src/routes/PostDetailPage.jsx      |  47 +++++-----
 src/routes/PostEditPage.jsx        |  79 ----------------
 9 files changed, 366 insertions(+), 105 deletions(-)
 create mode 100644 src/components/EditInput/index.jsx
 create mode 100644 src/routes/MyPage.jsx

diff --git a/src/App.js b/src/App.js
index d27da22..0a42959 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import PostEditPage from "./routes/PostEditPage";
 import SignUpPage from "./routes/SignUpPage";
 import PostDetailPage from "./routes/PostDetailPage";
 import SignInPage from "./routes/SignInPage";
+import MyPage from "./routes/MyPage";
 
 function App() {
   return (
@@ -27,6 +28,9 @@ function App() {
           <Route path="/signup" element={<SignUpPage />} />
           {/* sign up */}
           <Route path="/signin" element={<SignInPage />} />
+          {/* MyPage */}
+          <Route path="/mypage" element={<MyPage />} />
+
         </Routes>
         <Footer />
       </BrowserRouter>
diff --git a/src/apis/api.js b/src/apis/api.js
index 9ccc1e4..71a4255 100644
--- a/src/apis/api.js
+++ b/src/apis/api.js
@@ -30,6 +30,16 @@ export const getUser = async () => {
   return response.data;
 };
 
+export const getMyPage = async () => {
+  const response = await instanceWithToken.get("/account/mypage/");
+  if (response.status === 200) {
+    console.log("GET USER SUCCESS");
+  } else {
+    console.log("[ERROR] error while updating comment");
+  }
+  return response.data;
+};
+
 // Post 관련 API들
 export const getPosts = async () => {
   const response = await instance.get("/post/");
@@ -61,6 +71,15 @@ export const updatePost = async (id, data, navigate) => {
   }
 };
 
+export const updateMyInfo = async (data) => {
+  const response = await instanceWithToken.patch(`/account/info/`, data);
+  if (response.status === 201) {
+    console.log("POST UPDATE SUCCESS");
+  } else {
+    console.log("[ERROR] error while updating post");
+  }
+};
+
 //과제!!
 export const deletePost = async (id, navigate) => {
   const response = await instanceWithToken.delete(`post/${id}/`)
diff --git a/src/components/Comment/index.jsx b/src/components/Comment/index.jsx
index e69de29..4960023 100644
--- a/src/components/Comment/index.jsx
+++ b/src/components/Comment/index.jsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import CommentElement from "./CommentElement";
+import { createComment, getComments, deleteComment } from "../../apis/api";
+
+
+const Comment = ({ postId }) => {
+  const [commentList, setCommentList] = useState([]); // state for comments
+  const [newContent, setNewContent] = useState(""); // state for new comment
+
+  useEffect(() => {
+    const getCommentsAPI = async () => {
+      const comments = await getComments(postId);
+      setCommentList(comments);
+    };
+    getCommentsAPI();
+  }, [postId]);
+
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    setNewContent("");
+    createComment({ post: postId, content: newContent });
+  };
+
+  // 과제!!
+  const handleCommentDelete = async (commentId) => {
+    const confirmDelete = window.confirm("정말로 댓글을 삭제하시겠습니까?");
+    if (confirmDelete) {
+      await deleteComment(commentId);
+      window.location.reload();
+    }
+  };
+
+  return (
+    <div className="w-full mt-5 self-start">
+      <h1 className="text-3xl font-bold mt-5 mb-3">Comments</h1>
+      {commentList.map((comment) => {
+        return (
+          <div className="w-full flex flex-row" key={comment.id}>
+            <CommentElement
+              comment={comment}
+              handleCommentDelete={handleCommentDelete}
+            />
+          </div>
+        );
+      })}
+      {/* comment form component */}
+      <form
+        className="flex items-center justify-center mt-10 gap-2"
+        onSubmit={handleCommentSubmit}
+      >
+        <input
+          type="text"
+          value={newContent}
+          placeholder="댓글을 입력해주세요"
+          className="input h-14"
+          onChange={(e) => setNewContent(e.target.value)}
+        />
+        <button type="submit" className="button">
+          comment
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Comment;
\ No newline at end of file
diff --git a/src/components/EditInput/index.jsx b/src/components/EditInput/index.jsx
new file mode 100644
index 0000000..29bfac7
--- /dev/null
+++ b/src/components/EditInput/index.jsx
@@ -0,0 +1,139 @@
+import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { updateMyInfo } from "../../apis/api";
+
+export const MyPageInput = ({ content }) => {
+  const [isEmailEdit, setIsEmailEdit] = useState(false);
+  const [isUsernameEdit, setIsUsernameEdit] = useState(false);
+  const [isCollegeEdit, setIsCollegeEdit] = useState(false);
+  const [isMajorEdit, setIsMajorEdit] = useState(false);
+  const [formData, setFormData] = useState(content);
+
+  const handleChange = (e) => {
+
+    if (e.target.id === "email" || e.target.id === "username")
+      {
+        setFormData({ ...formData, [`user`]: {...formData.user, [e.target.id]: e.target.value} });
+      }
+    else setFormData({ ...formData, [e.target.id]: e.target.value });
+  };
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    await updateMyInfo(formData);
+    setIsEmailEdit(false);
+    setIsUsernameEdit(false);
+    setIsCollegeEdit(false);
+    setIsMajorEdit(false);
+  };
+
+  const onEmailEditClick = async (e) => {
+    setIsEmailEdit(true);
+  };
+
+  const onUsernameEditClick = async (e) => {
+    setIsUsernameEdit(true);
+  };
+
+  const onCollegeEditClick = async (e) => {
+    setIsCollegeEdit(true);
+  };
+
+  const onMajorEditClick = async (e) => {
+    setIsMajorEdit(true);
+  };
+
+
+  const onCancelClick = async (e) => {
+    setFormData(content);
+  };
+
+  return (
+    <>
+      {formData && (
+        <form className="form" onSubmit={onSubmit}>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="email"
+              value={formData.user.email}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isEmailEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onEmailEditClick}>edit</button>
+            )}
+          </>
+          </div>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="username"
+              value={formData.user.username}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isUsernameEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onUsernameEditClick}>edit</button>
+            )}
+          </>
+          </div>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="college"
+              value={formData.college}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isCollegeEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onCollegeEditClick}>edit</button>
+            )}
+          </>
+          </div>
+          <div className="flex  w-full gap-x-5">
+            <input
+              type="text"
+              placeholder="Add Tags.."
+              id="major"
+              value={formData.major}
+              className="input grow"
+              onChange={handleChange}
+            />
+            <>
+            {isMajorEdit ? (
+              <div>
+                <button className="small-button w-16">submit</button>
+                <button className="small-button w-16" onClick={onCancelClick}>cancel</button>
+              </div>
+            ) : (
+              <button className="small-button w-16" onClick={onMajorEditClick}>edit</button>
+            )}
+          </>
+          </div>
+        </form>
+      )}
+    </>
+  );
+};
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 72f7e1e..9f171cf 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,19 +1,27 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState,  } from "react";
 import lion from "../../assets/images/lion.jpeg";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { getCookie, removeCookie } from "../../utils/cookie";
+
+
 const Header = () => {
   const [isUser, setIsUser] = useState("");
+  
 
   useEffect(() => {
     const user = getCookie("access_token") ? true : false;
     setIsUser(user);
   }, []);
 
+
+
   const handleLogout = () => {
     removeCookie("access_token");
     window.location.href = "/"; // 새로고침 - 로그아웃 되었다는 것을 인지시켜주기 위해
   };
+
+
+
   return (
     <div
       id="header-wrapper"
@@ -38,6 +46,9 @@ const Header = () => {
           </>
         ) : (
           <>
+            <Link to="/mypage" className="mr-10 p-3 uppercase">
+              mypage
+            </Link>
             <Link to="/" onClick={handleLogout} className="mr-10 p-3 uppercase">
               log out
             </Link>
diff --git a/src/routes/MyPage.jsx b/src/routes/MyPage.jsx
new file mode 100644
index 0000000..b1827f3
--- /dev/null
+++ b/src/routes/MyPage.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { SmallPost } from "../components/Posts";
+import { MyPageInput } from "../components/EditInput";
+
+import { Link } from "react-router-dom";
+import { getPosts, getUser, getMyPage } from "../apis/api";
+import { getCookie } from "../utils/cookie";
+
+const MyPage = () => {
+  const [userProfile, setUserProfile] = useState();
+
+  const [tags, setTags] = useState([]);
+  const [searchTags, setSearchTags] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
+  const [postList, setPostList] = useState([]);
+
+  useEffect(() => {
+    // access_token이 있으면 유저 정보 가져옴
+    if (getCookie("access_token")) {
+      const getMyPageAPI = async () => {
+        const userProfile = await getMyPage();
+        setUserProfile(userProfile);
+      };
+      const getPostsAPI = async () => {
+        const posts = await getPosts();
+        setPostList(posts);
+      };
+      getPostsAPI();
+      getMyPageAPI();
+    }
+  }, []);
+
+  return (
+    <div>
+      {userProfile && (//userProfile을 안 받아왔을 때에 대한 처리.
+        <>
+          <MyPageInput content={userProfile}></MyPageInput>
+        </>
+      )}
+      <div className="w-full flex-row">
+      {postList.filter((post) =>
+        post.author.id === userProfile.user.id
+      )
+      .map((post) => (
+        <SmallPost key={post.id} post={post} />
+      ))
+      }
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;
diff --git a/src/routes/PostCreatePage.jsx b/src/routes/PostCreatePage.jsx
index e69de29..cfead23 100644
--- a/src/routes/PostCreatePage.jsx
+++ b/src/routes/PostCreatePage.jsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { PostForm } from "../components/Form";
+import { useNavigate } from "react-router-dom";
+import { createPost, getTags } from "../apis/api";
+
+const PostCreatePage = () => {
+  const navigate = useNavigate();
+
+  const [formData, setFormData] = useState({
+    title: "",
+    content: "",
+    tags: [],
+  });
+
+  // 기존 태그 불러오기
+  // TODO : api connect(get all tags)
+  const [tags, setTags] = useState([]);
+  useEffect(() => {
+    const getTagsAPI = async () => {
+      const tags = await getTags();
+      const tagContents = tags.map((tag) => {
+        return tag.content;
+      });
+      setTags(tagContents);
+    };
+    getTagsAPI();
+  }, []);
+
+  const onSubmit = (e) => {
+    //TODO : api connect(post post)
+    e.preventDefault();
+    createPost(formData, navigate);
+  };
+
+  return (
+    <div className="flex flex-col items-center w-3/5">
+      <h3 className="font-bold text-4xl">New Post</h3>
+      <PostForm
+        onSubmit={onSubmit}
+        tags={tags}
+        formData={formData}
+        setFormData={setFormData}
+      />
+    </div>
+  );
+};
+
+export default PostCreatePage;
\ No newline at end of file
diff --git a/src/routes/PostDetailPage.jsx b/src/routes/PostDetailPage.jsx
index 752265a..890d6b9 100644
--- a/src/routes/PostDetailPage.jsx
+++ b/src/routes/PostDetailPage.jsx
@@ -36,31 +36,30 @@ const PostDetailPage = () => {
   };
 
   return (
-    post && (
-      <div className="flex flex-col items-center w-3/5 p-8">
-        {/* post detail component */}
-        <BigPost post={post} />
-
-        {/* comments component */}
-        <Comment postId={postId} />
-
-        <div>
-          {user?.id === post?.author.id ? (
-            <>
-              <Link to={`/${post.id}/edit`}>
-                <button className="button mt-10 mx-4 py-2 px-10">Edit</button>
-              </Link>
-              <button
-                className="button mt-10 mx-4 py-2 px-10"
-                onClick={onClickDelete}
-              >
-                Delete
-              </button>
-            </>
-          ) : null}
+    <>
+      {post && (
+        <div className="flex flex-col items-center w-3/5 p-8">
+          {/* post detail component */}
+          <BigPost post={post} />
+          <Comment postId={postId} />
+          <div>
+            {user?.id === post?.author.id ? (
+              <>
+                <Link to={`/${post.id}/edit`}>
+                  <button className="button mt-10 mx-4 py-2 px-10">Edit</button>
+                </Link>
+                <button
+                  className="button mt-10 mx-4 py-2 px-10"
+                  onClick={onClickDelete}
+                >
+                  Delete
+                </button>
+              </>
+            ) : null}
+          </div>
         </div>
-      </div>
-    )
+      )}
+    </>
   );
 };
 
diff --git a/src/routes/PostEditPage.jsx b/src/routes/PostEditPage.jsx
index 4f26572..e8306ac 100644
--- a/src/routes/PostEditPage.jsx
+++ b/src/routes/PostEditPage.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-<<<<<<< HEAD
 import { useNavigate, useParams } from "react-router-dom";
 import { PostForm } from "../components/Form";
 import { Link } from "react-router-dom";
@@ -58,84 +57,6 @@ const PostEditPage = () => {
         setFormData={setFormData}
       />
     </div>
-=======
-import { BigPost } from "../components/Posts";
-import { PostForm } from "../components/Form";
-import posts from "../data/posts";
-import { useParams } from "react-router-dom";
-import { Link } from "react-router-dom";
-
-const PostEditPage = () => {
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  // 화면그리기
-  const { postId } = useParams();
-  const [formData, setFormData] = useState({});
-
-  useEffect(() => {
-    const post = posts.find((post) => post.id === parseInt(postId));
-    const postFormData = { ...post, tags: post.tags.map((tag) => tag.content) };
-    setFormData(postFormData);
-  }, [postId]);
-
-  // 기존 태그 불러오기
-  // TODO : api call(get all tags)
-  const [tags, setTags] = useState([]);
-  useEffect(() => {
-    const duplicatedTagList = posts.reduce((acc, post) => {
-      for (let tag of post.tags) {
-        acc.add(tag.content);
-      }
-
-      return acc;
-    }, new Set());
-
-    const tagList = [...duplicatedTagList];
-
-    setTags([...tagList]);
-  }, []);
-
-  const onSubmit = (e) => {
-    //TODO : api connect
-    e.preventDefault();
-    console.log(formData);
-
-    // 지워질코드
-    const createdPost = {
-      ...formData,
-      like_users: [],
-      tags: formData.tags.map((tag, idx) => {
-        return { id: idx + 1, content: tag };
-      }),
-    };
-    setFormData(createdPost);
-    setIsSubmitted(true);
-  };
-
-  return (
-    <>
-      {isSubmitted ? (
-        <div className="flex flex-col items-center w-3/5 p-8">
-          <BigPost post={formData} />
-        </div>
-      ) : (
-        <div className="flex flex-col items-center w-3/5">
-          <div className="flex w-full items-center">
-            <Link to={`/${postId}`}>
-              <button className="w-20">{`< Back`}</button>
-            </Link>
-            <h3 className="flex-1 font-bold text-4xl">Edit Post</h3>
-          </div>
-
-          <PostForm
-            tags={tags}
-            onSubmit={onSubmit}
-            formData={formData}
-            setFormData={setFormData}
-          />
-        </div>
-      )}
-    </>
->>>>>>> upstream/jinmo
   );
 };