#21 Add comments to post page.

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>
   );