From 1074c8bcc7b6691a0f0ac2c1127f50d3b82b8871 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 15 Apr 2024 09:57:35 +0100 Subject: [PATCH] created individual post and comment components --- .../Comment/{Comments.css => Comment.css} | 2 +- frontend/src/components/Comment/Comment.jsx | 63 +++++++++++++++++ frontend/src/components/Comment/Comments.jsx | 66 +++--------------- frontend/src/components/NavBar/Navbar.css | 19 ++---- frontend/src/components/Post/CreatePost.css | 3 +- .../components/Post/{Posts.css => Post.css} | 0 frontend/src/components/Post/Post.jsx | 66 ++++++++++++++++++ frontend/src/components/Post/Posts.jsx | 63 ++--------------- frontend/src/components/User/userDetails.css | 68 +++++++++---------- 9 files changed, 187 insertions(+), 163 deletions(-) rename frontend/src/components/Comment/{Comments.css => Comment.css} (92%) create mode 100644 frontend/src/components/Comment/Comment.jsx rename frontend/src/components/Post/{Posts.css => Post.css} (100%) create mode 100644 frontend/src/components/Post/Post.jsx diff --git a/frontend/src/components/Comment/Comments.css b/frontend/src/components/Comment/Comment.css similarity index 92% rename from frontend/src/components/Comment/Comments.css rename to frontend/src/components/Comment/Comment.css index d98f1d6..8a35612 100644 --- a/frontend/src/components/Comment/Comments.css +++ b/frontend/src/components/Comment/Comment.css @@ -3,7 +3,7 @@ padding: 15px; margin-bottom: 10px; background-color: #fff; - border: 1px solid #ccc; /* Add border around the comment */ + border: 1px solid #ccc; border-radius: 8px; display: flex; } diff --git a/frontend/src/components/Comment/Comment.jsx b/frontend/src/components/Comment/Comment.jsx new file mode 100644 index 0000000..3e7b034 --- /dev/null +++ b/frontend/src/components/Comment/Comment.jsx @@ -0,0 +1,63 @@ +import React from "react"; +import { LikeCommentButton } from "../Like/Like"; +import "./Comment.css"; + +const Comment = ({ comments, loggedInUser, fetchComments }) => { + const addOrdinalSuffix = (day) => { + if (day === 1 || day === 21 || day === 31) return day + "st"; + if (day === 2 || day === 22) return day + "nd"; + if (day === 3 || day === 23) return day + "rd"; + return day + "th"; + }; + + const formatDate = (createdAt) => { + const date = new Date(createdAt); + const day = addOrdinalSuffix(date.getDate()); + const month = date.toLocaleString("en-GB", { month: "short" }); + const time = date.toLocaleString("en-GB", { + hour: "numeric", + minute: "numeric", + }); + + return `${day} ${month} ${date.getFullYear()} at ${time}`; + }; + + return ( +
+
+ {comments.map((comment) => ( +
+
+
+ {comment.user.fullName} +
+
+ {comment.user.fullName} +
+
+ {formatDate(comment.createdAt)} +
+
+
+
{comment.comment_text}
+
+ +
+
{comment.likedBy.length}
+
+
+ ))} +
+
+ ); +}; + +export default Comment; diff --git a/frontend/src/components/Comment/Comments.jsx b/frontend/src/components/Comment/Comments.jsx index 7155b43..95131b6 100644 --- a/frontend/src/components/Comment/Comments.jsx +++ b/frontend/src/components/Comment/Comments.jsx @@ -1,11 +1,10 @@ import React, { useState, useEffect } from "react"; import { getComments } from "../../services/comments"; -import { LikeCommentButton } from "../Like/Like"; +import Comment from "./Comment"; import CreateComment from "./CreateComment"; -import "./Comments.css"; const Comments = ({ postId }) => { - const [commentData, setCommentData] = useState([]); + const [comments, setComments] = useState([]); const loggedInUser = localStorage.getItem("userId"); @@ -15,7 +14,7 @@ const Comments = ({ postId }) => { getComments(postId, token) // Fetch comments for the specific post .then((data) => { console.log("Received comment data:", data); - setCommentData(data.comments); + setComments(data.comments); }) .catch((error) => console.error("Error fetching comments:", error)); } @@ -25,62 +24,17 @@ const Comments = ({ postId }) => { fetchComments(); }, []); - const addOrdinalSuffix = (day) => { - if (day === 1 || day === 21 || day === 31) return day + "st"; - if (day === 2 || day === 22) return day + "nd"; - if (day === 3 || day === 23) return day + "rd"; - return day + "th"; - }; - return ( -
+ <>
-
- {commentData.map((comment) => { - const date = new Date(comment.createdAt); - const day = addOrdinalSuffix(date.getDate()); - const month = date.toLocaleString("en-GB", { month: "short" }); - const time = date.toLocaleString("en-GB", { - hour: "numeric", - minute: "numeric", - }); - - const formattedDate = `${day} ${month} ${date.getFullYear()} at ${time}`; - - return ( -
-
-
- -
-
- {comment.user.fullName} -
-
{formattedDate}
-
-
-
{comment.comment_text}
-
- -
-
- {comment.likedBy.length} -
-
-
- ); - })} -
-
+ + ); }; diff --git a/frontend/src/components/NavBar/Navbar.css b/frontend/src/components/NavBar/Navbar.css index 03d44ce..74ec439 100644 --- a/frontend/src/components/NavBar/Navbar.css +++ b/frontend/src/components/NavBar/Navbar.css @@ -5,7 +5,7 @@ width: 100%; display: flex; justify-content: space-between; /* Add this to push the profile picture to the left and links to the right */ - align-items: center; /* Center vertically */ + align-items: center; padding: 5px; background-color: #1b83a4; z-index: 999; @@ -36,14 +36,9 @@ } .navbar__right a:hover { - color: #ffffff; /* Change text color on hover */ - background-color: rgba( - 255, - 255, - 255, - 0.1 - ); /* Change background color on hover */ - border-color: #fff; /* Change border color on hover */ + color: #ffffff; + background-color: rgba(255, 255, 255, 0.1); + border-color: #fff; } .navbar__right a { @@ -59,11 +54,11 @@ } .navbar_profile_pic { - width: 45px; /* Adjust size as needed */ - height: 45px; /* Adjust size as needed */ + width: 45px; + height: 45px; border-radius: 50%; - margin-left: 10px; /* Add margin between image and text */ + margin-left: 10px; margin-top: 5px; margin-bottom: 5px; } diff --git a/frontend/src/components/Post/CreatePost.css b/frontend/src/components/Post/CreatePost.css index 207c3bb..0248709 100644 --- a/frontend/src/components/Post/CreatePost.css +++ b/frontend/src/components/Post/CreatePost.css @@ -30,7 +30,6 @@ float: right; } -/* Hover state */ .image-button:hover { - background-color: #ffffff; /* Change background color on hover */ + background-color: #ffffff; } diff --git a/frontend/src/components/Post/Posts.css b/frontend/src/components/Post/Post.css similarity index 100% rename from frontend/src/components/Post/Posts.css rename to frontend/src/components/Post/Post.css diff --git a/frontend/src/components/Post/Post.jsx b/frontend/src/components/Post/Post.jsx new file mode 100644 index 0000000..895ecd1 --- /dev/null +++ b/frontend/src/components/Post/Post.jsx @@ -0,0 +1,66 @@ +import React, { useEffect } from "react"; +import { LikePostButton } from "../Like/Like"; +import Comments from "../Comment/Comments"; +import "./Post.css"; + +const Post = ({ posts, loggedInUser, fetchPosts }) => { + const addOrdinalSuffix = (day) => { + if (day === 1 || day === 21 || day === 31) return day + "st"; + if (day === 2 || day === 22) return day + "nd"; + if (day === 3 || day === 23) return day + "rd"; + return day + "th"; + }; + + const formatDate = (createdAt) => { + const date = new Date(createdAt); + const day = addOrdinalSuffix(date.getDate()); + const month = date.toLocaleString("en-GB", { month: "short" }); + const time = date.toLocaleString("en-GB", { + hour: "numeric", + minute: "numeric", + }); + + return `${day} ${month} ${date.getFullYear()} at ${time}`; + }; + + return ( + <> +
+ {posts.map((post) => ( +
+
+
+ Profile +
+
{post.user.fullName}
+
{formatDate(post.createdAt)}
+
+
+ {post.image && ( + Post + )} +
{post.message}
+
+ +
+
{post.likedBy.length}
+
+
+ +
+
+ ))} +
+ + ); +}; + +export default Post; diff --git a/frontend/src/components/Post/Posts.jsx b/frontend/src/components/Post/Posts.jsx index 6394eed..d7aa45f 100644 --- a/frontend/src/components/Post/Posts.jsx +++ b/frontend/src/components/Post/Posts.jsx @@ -1,10 +1,8 @@ import React, { useState, useEffect } from "react"; import { getPosts } from "../../services/posts"; -import { LikePostButton } from "../Like/Like"; import CreatePost from "./CreatePost"; +import Post from "./Post"; import { useNavigate } from "react-router-dom"; -import Comments from "../Comment/Comments"; -import "./Posts.css"; const Posts = () => { const [posts, setPosts] = useState([]); @@ -32,67 +30,20 @@ const Posts = () => { fetchPosts(); }, []); - const addOrdinalSuffix = (day) => { - if (day === 1 || day === 21 || day === 31) return day + "st"; - if (day === 2 || day === 22) return day + "nd"; - if (day === 3 || day === 23) return day + "rd"; - return day + "th"; - }; - return ( <>
- {posts.map((post) => { - const date = new Date(post.createdAt); - const day = addOrdinalSuffix(date.getDate()); - const month = date.toLocaleString("en-GB", { month: "short" }); - const time = date.toLocaleString("en-GB", { - hour: "numeric", - minute: "numeric", - }); - - const formattedDate = `${day} ${month} ${date.getFullYear()} at ${time}`; - - return ( -
-
-
- Profile -
-
- {post.user.fullName} -
-
{formattedDate}
-
-
- {post.image && ( - Post - )} -
{post.message}
-
- -
-
{post.likedBy.length}
-
-
- -
-
- ); - })} +
); }; + export default Posts; diff --git a/frontend/src/components/User/userDetails.css b/frontend/src/components/User/userDetails.css index afa4d36..9f0b77d 100644 --- a/frontend/src/components/User/userDetails.css +++ b/frontend/src/components/User/userDetails.css @@ -1,54 +1,50 @@ -/* userDetails.css */ - .user-details-container { - max-width: 500px; - margin: 0 auto; - padding: 30px; - border: 2px solid #ccc; - border-radius: 12px; - background-color: #fff; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + max-width: 500px; + margin: 0 auto; + padding: 30px; + border: 2px solid #ccc; + border-radius: 12px; + background-color: #fff; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } .user-details-container h1 { - font-size: 28px; - margin-bottom: 30px; - text-align: center; + font-size: 28px; + margin-bottom: 30px; + text-align: center; } .user-details-container .user-info { - display: flex; - align-items: center; - margin-bottom: 30px; + display: flex; + align-items: center; + margin-bottom: 30px; } .user-details-container .user-info img { - width: 120px; - height: 120px; - border-radius: 12px; /* Make the border-radius match the border-radius of the container */ - margin-right: 30px; - object-fit: cover; /* Ensure the image covers the entire container */ + width: 120px; + height: 120px; + border-radius: 12px; + margin-right: 30px; + object-fit: cover; /* Ensure the image covers the entire container */ } .user-details-container .user-info .user-name { - font-size: 24px; - font-weight: bold; + font-size: 24px; + font-weight: bold; } -/*neeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww*/ .profile_pic { - animation: swirl-in-top-fwd 0.6s ease-out both; + animation: swirl-in-top-fwd 0.6s ease-out both; } - @keyframes swirl-in-top-fwd { - 0% { - transform: rotate(-540deg) scale(0); - transform-origin: 50% 0; - opacity: 0; - } - 100% { - transform: rotate(0) scale(1); - transform-origin: 50% 0; - opacity: 1; - } +@keyframes swirl-in-top-fwd { + 0% { + transform: rotate(-540deg) scale(0); + transform-origin: 50% 0; + opacity: 0; + } + 100% { + transform: rotate(0) scale(1); + transform-origin: 50% 0; + opacity: 1; } - \ No newline at end of file +}