From 83e8183197a481b01d12d988ecf6846efd884c7c Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Tue, 27 Jun 2023 14:17:19 +0000
Subject: [PATCH] #21 Add comments to post page.

---
 src/pages/posts/PostPage.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/pages/posts/PostPage.js b/src/pages/posts/PostPage.js
index 4dda49f..264bb49 100644
--- a/src/pages/posts/PostPage.js
+++ b/src/pages/posts/PostPage.js
@@ -9,10 +9,17 @@ import { useParams } from "react-router-dom";
 import { axiosReq } from "../../api/axiosDefaults";
 import Post from "./Post";
 
+import CommentCreateForm from "../comments/CommentCreateForm";
+import { useCurrentUser } from "../../contexts/CurrentUserContext";
+
 function PostPage() {
   const { id } = useParams();
   const [post, setPost] = useState({ results: [] });
 
+  const currentUser = useCurrentUser();
+  const traveler_image = currentUser?.traveler_image;
+  const [comments, setComments] = useState({ results: [] });
+
   useEffect(() => {
     const handleMount = async () => {
       try {
@@ -32,12 +39,24 @@ function PostPage() {
   return (
     <Row className="h-100">
       <Col className="py-2 p-0 p-lg-2" lg={8}>
-        <p>Popular profiles for mobile</p>
+        <p>Popular travelers for mobile</p>
         <Post {...post.results[0]} setPosts={setPost} postPage />
-        <Container className={appStyles.Content}>Comments</Container>
+        <Container className={appStyles.Content}>
+          {currentUser ? (
+            <CommentCreateForm
+              traveler_id={currentUser.traveler_id}
+              travelerImage={traveler_image}
+              post={id}
+              setPost={setPost}
+              setComments={setComments}
+            />
+          ) : comments.results.length ? (
+            "Comments"
+          ) : null}
+        </Container>
       </Col>
       <Col lg={4} className="d-none d-lg-block p-0 p-lg-2">
-        Popular profiles for desktop
+        Popular travelers for desktop
       </Col>
     </Row>
   );