Display comments on posts

All posts will still display the reply box underneath them. Added default profile picture fallback to notification dropdowns.
MaoShizhong · Jan 2, 2024 · e35b4fd · e35b4fd
1 parent 9be726d
commit e35b4fd
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 4 deletions.
diff --git a/src/components/header/FriendRequests.jsx b/src/components/header/FriendRequests.jsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { Link, useParams } from 'react-router-dom';
+import { DEFAULT_PROFILE_PICTURE } from '../../helpers/constants';
 import { useCloseDropdown } from '../../helpers/hooks';
 import { getFullNameFromDetails } from '../../helpers/util';
 import dropdownStyles from './css/dropdown.module.css';
@@ -31,7 +32,7 @@ export function FriendRequests({ setIsOpen, button, friendRequests }) {
                         reloadDocument={request.handle === currentPage}
                     >
                         <img
-                            src={request.profilePicture}
+                            src={request.profilePicture ?? DEFAULT_PROFILE_PICTURE}
                             height="40"
                             width="40"
                             alt="friend request profile picture"

diff --git a/src/components/header/Notifications.jsx b/src/components/header/Notifications.jsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { Link, useParams } from 'react-router-dom';
+import { DEFAULT_PROFILE_PICTURE } from '../../helpers/constants';
 import { useCloseDropdown } from '../../helpers/hooks';
 import { getFullNameFromDetails, getPostPreview, getRelativeTimestamp } from '../../helpers/util';
 import dropdownStyles from './css/dropdown.module.css';
@@ -28,7 +29,7 @@ export function Notifications({ setIsOpen, button, ownHandle, notifications, set
                             onClick={() => setNotifications([])}
                         >
                             <img
-                                src={notification.author.profilePicture}
+                                src={notification.author.profilePicture ?? DEFAULT_PROFILE_PICTURE}
                                 height="40"
                                 width="40"
                                 alt="notification profile picture"

diff --git a/src/components/post/Comments.jsx b/src/components/post/Comments.jsx
@@ -0,0 +1,60 @@
+import { Link, useOutletContext } from 'react-router-dom';
+import { DEFAULT_PROFILE_PICTURE } from '../../helpers/constants';
+import {
+    autoResizeTextarea,
+    getFullNameFromDetails,
+    getRelativeTimestamp,
+} from '../../helpers/util';
+import commentStyles from './css/comment.module.css';
+import postStyles from './css/post.module.css';
+
+export function Comments({ postID, comments }) {
+    const { user } = useOutletContext();
+
+    async function postComment(e) {
+        e.preventDefault();
+    }
+
+    return (
+        <div className={commentStyles.comments}>
+            {comments.map((comment) => (
+                <div key={comment._id} className={commentStyles.comment}>
+                    <img
+                        src={comment.author.profilePicture ?? DEFAULT_PROFILE_PICTURE}
+                        alt="comment profile picture"
+                    />
+
+                    <div className={commentStyles.content}>
+                        <div className={commentStyles.top}>
+                            <Link to={`/${comment.author.handle}`}>
+                                {getFullNameFromDetails(comment.author.details)}
+                            </Link>
+
+                            {user._id === comment.author._id && (
+                                <button className={commentStyles.delete}>Delete</button>
+                            )}
+                        </div>
+
+                        <p>{comment.body}</p>
+
+                        <div className={postStyles.timestamp}>
+                            {getRelativeTimestamp(comment.timestamp)}
+                        </div>
+                    </div>
+                </div>
+            ))}
+
+            <form onSubmit={postComment} className={commentStyles.reply}>
+                <label htmlFor={`reply_${postID}`}>Reply:</label>
+                <textarea
+                    name="body"
+                    id={`reply_${postID}`}
+                    rows="1"
+                    placeholder="Comment on this post..."
+                    onInput={autoResizeTextarea}
+                ></textarea>
+                <button className={commentStyles.postComment}>Post</button>
+            </form>
+        </div>
+    );
+}
diff --git a/src/components/post/Post.jsx b/src/components/post/Post.jsx
@@ -10,6 +10,7 @@ import {
 import { PostMenuButton } from '../buttons/PostMenuButton';
 import buttonStyles from '../buttons/css/button.module.css';
 import { Loading } from '../loading/Loading';
+import { Comments } from './Comments';
 import { ThumbsUp } from './ThumbsUp';
 import postStyles from './css/post.module.css';
 
@@ -141,6 +142,8 @@ export function Post({ post, setPosts }) {
                         </span>
                     )}
                 </div>
+
+                <Comments postID={post._id} comments={post.comments} />
             </div>
         </article>
     );

diff --git a/src/components/post/css/comment.module.css b/src/components/post/css/comment.module.css
@@ -0,0 +1,68 @@
+.comments {
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+        background-color: var(--main-fade-vl);
+        padding: 6px;
+    }
+}
+
+.comment {
+    border-bottom: 1px solid var(--faint-l);
+    display: flex;
+    gap: 6px;
+
+    & > img {
+        --profile-pciture-size: 42px;
+
+        height: var(--profile-pciture-size);
+        width: var(--profile-pciture-size);
+    }
+}
+
+.content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    font-size: small;
+    gap: 4px;
+
+    & > p {
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+}
+
+.top {
+    display: flex;
+    justify-content: space-between;
+}
+
+.delete {
+    background-color: transparent;
+    font-size: x-small;
+
+    &:hover {
+        color: var(--main-d);
+        text-decoration: underline;
+    }
+}
+
+.reply {
+    align-items: center;
+    display: flex;
+    gap: 6px;
+
+    & > textarea {
+        flex: 1;
+        padding-inline: 4px;
+        resize: none;
+    }
+}
+
+.postComment {
+    align-self: flex-end;
+    composes: bold from '../../buttons/css/button.module.css';
+    font-size: small;
+}
diff --git a/src/global_stylesheets/theme.css b/src/global_stylesheets/theme.css
@@ -5,7 +5,7 @@
     --main-l: #379580;
     --main-fade-d: #0b201cd7;
     --main-fade-l: #1c3b3860;
-    --main-fade-vl: #3a7a673d;
+    --main-fade-vl: rgba(56, 146, 119, 0.185);
 
     --off-black: #080808;
 

diff --git a/src/helpers/util.js b/src/helpers/util.js
@@ -166,7 +166,7 @@ export const autoResizeTextarea = (e) => {
 
     textarea.style.height = 'auto';
     // the +2 gets rid of the scrollbar
-    textarea.style.height = `${textarea.scrollHeight + 2}px`;
+    textarea.style.height = `${textarea.scrollHeight}px`;
 };
 
 export const checkFileDetails = (e, setFileError) => {