#15 Add card to post

SandraBergstrom · Jun 24, 2023 · ec22ae3 · ec22ae3
1 parent 4c754dd
commit ec22ae3
Showing 1 changed file with 51 additions and 6 deletions.
diff --git a/src/pages/posts/Post.js b/src/pages/posts/Post.js
@@ -1,11 +1,14 @@
 import React from "react";
-import {useCurrentUser} from "../../contexts/CurrentUserContext"
+import { useCurrentUser } from "../../contexts/CurrentUserContext";
 
 import styles from "../../styles/Post.module.css";
-import Card from 'react-bootstrap/Card';
-import { Media } from "react-bootstrap";
+
+import Card from "react-bootstrap/Card";
+import Media from "react-bootstrap/Media";
 import { Link } from "react-router-dom";
-import Avatar from "../../components/Avatar"
+import Avatar from "../../components/Avatar";
+import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import Tooltip from "react-bootstrap/Tooltip";
 
 const Post = (props) => {
   const {
@@ -23,7 +26,7 @@ const Post = (props) => {
     postPage,
   } = props;
 
-  const currentUser = useCurrentUser;
+  const currentUser = useCurrentUser();
   const is_owner = currentUser?.username === owner;
 
   return (
@@ -32,11 +35,53 @@ const Post = (props) => {
         <Media className="align-items-center justify-content-between">
           <Link to={`/travelers/${traveler_id}`}>
             <Avatar src={traveler_image} height={55} />
+            {owner}
           </Link>
+          <div className="d-flex align-items-center">
+            <span>{updated_at}</span>
+            {is_owner && postPage && "..."}
+          </div>
         </Media>
       </Card.Body>
+      <Link to={`/posts/${id}`}>
+        <Card.Img src={image} alt={title} />
+      </Link>
+      <Card.Body>
+        {title && <Card.Title className="text-center">{title}</Card.Title>}
+        {content && <Card.Text>{content}</Card.Text>}
+        <div className={styles.PostBar}>
+          {is_owner ? (
+            <OverlayTrigger
+              placement="top"
+              overlay={<Tooltip>You can't like your own post!</Tooltip>}
+            >
+              <i className="far fa-heart" />
+            </OverlayTrigger>
+          ) : like_id ? (
+            <span onClick={() => {}}>
+              <i className={`fas fa-heart ${styles.Heart}`} />
+            </span>
+          ) : currentUser ? (
+            <span onClick={() => {}}>
+              <i className={`far fa-heart ${styles.HeartOutline}`} />
+            </span>
+          ) : (
+            <OverlayTrigger
+              placement="top"
+              overlay={<Tooltip>Log in to like posts!</Tooltip>}
+            >
+              <i className="far fa-heart" />
+            </OverlayTrigger>
+          )}
+          {likes_count}
+          <Link to={`/posts/${id}`}>
+            <i className="far fa-comments" />
+          </Link>
+          {comments_count}
+        </div>
+      </Card.Body>
     </Card>
   );
 };
 
-export default Post;
+export default Post;