Retrieve profile picture

client/src/components/CommentsModule.tsx

@@ -3,19 +3,20 @@ import instance from "../security/http";
 import config from "../config";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from "@nextui-org/react";
+import { Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, User } from "@nextui-org/react";
 import { ChatBubbleOvalLeftEllipsisIcon, EllipsisHorizontalIcon, HandThumbsUpIcon } from "../icons";
 
 interface Comment {
     id: string;
     content: string;
+    user: User; // Make user optional
 }
 
-//   type User = {
-//     id: string;
-//     firstName: string;
-//     lastName: string;
-//   };
+interface User {
+    id: string;
+    firstName: string;
+    lastName: string;
+}
 
 export default function CommentsModule() {
     const { id } = useParams();
@@ -27,6 +28,7 @@ export default function CommentsModule() {
         instance
             .get(config.serverAddress + `/post/${postId}/getComments`).then((res) => {
                 setCommentList(res.data);
+                console.log(res.data);
             });
     };
     useEffect(() => {
@@ -45,21 +47,24 @@ export default function CommentsModule() {
                 <div className="w-8/12 mx-auto">
                     {commentList.length > 0 ? (
                         commentList.map((comment) => {
+                            // console.log(comment); // Log each comment to verify its structure
+                            // // Check if `comment.user` is defined before accessing properties
+                            // const user = comment.user || { firstName: "Unknown", lastName: "" };
                             return (
                                 <div className="flex flex-col w-full bg-primary-50 dark:bg-primary-950 rounded-xl mb-2 p-3 mx-auto"
                                     key={comment.id}>
-                                    <div className="flex flex-row w-full">
+                                    <div className="flex flex-row flex-shrink-0 w-full">
                                         <div>
                                             <Avatar
                                                 src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
                                                 size="md"
                                             />
                                         </div>
-                                        <div className="flex flex-col w-10/12 text-sm ml-3">
+                                        <div className="flex flex-col w-10/12 flex-grow text-sm ml-3">
                                             <div className="font-bold">Name</div>
                                             <div className="break-words whitespace-pre-wrap">{comment.content}</div>
                                         </div>
-                                        <div className="ml-10">
+                                        <div className="flex-shrink-0 ml-10">
                                             <div className="flex flex-row-reverse justify-center items-center size-7">
                                                 <Dropdown>
                                                     <div>

client/src/pages/CommunityPage.tsx

@@ -46,6 +46,7 @@ type User = {
   id: string;
   firstName: string;
   lastName: string;
+
 };
 
 export default function CommunityPage() {
@@ -57,7 +58,6 @@ export default function CommunityPage() {
   const [userInformation, setUserInformation] = useState<Record<string, User>>({});
   const [currentUserInfo, setCurrentUserInfo] = useState(null);
 
-
   let accessToken = localStorage.getItem("accessToken");
   if (!accessToken) {
     return (
@@ -89,6 +89,7 @@ export default function CommunityPage() {
     const fetchUserInformation = async (userId: string) => {
       try {
         const user = await retrieveUserInformationById(userId);
+
         setUserInformation((prevMap) => ({
           ...prevMap,
           [userId]: user,
@@ -168,6 +169,11 @@ export default function CommunityPage() {
     navigate(`post/${id}`);
   };
 
+  // Get pfp from server directly(no need convert blob to url)
+  const getProfilePicture = (userId: string): string => {
+    return `${config.serverAddress}/users/profile-image/${userId}`;
+  };
+
   return (
     <div className="w-full h-full">
       <div className="flex flex-row gap-4 m-10">
@@ -180,6 +186,7 @@ export default function CommunityPage() {
           </div>
           <div className="flex flex-col gap-4">
             {communityList.map((post) => {
+              const profilePictureUrl = getProfilePicture(post.userId);
               return (
                 <section
                   className="flex flex-row gap-4 bg-primary-50 dark:bg-primary-950 border border-none rounded-2xl p-4"
@@ -188,7 +195,7 @@ export default function CommunityPage() {
                 >
                   <div onClick={(e) => e.stopPropagation()}>
                     <Avatar
-                      src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
+                      src={profilePictureUrl}
                       size="lg"
                     />
                   </div>

client/src/pages/PostPage.tsx

@@ -77,6 +77,11 @@ const PostPage: React.FC = () => {
     }
   }, [post]);
 
+  useEffect(() => {
+    // Scroll to the top of the page when the component mounts
+    window.scrollTo(0, 0);
+  }, []);
+
   if (!post) {
     return (
       <div className="flex justify-center min-h-screen">
@@ -102,6 +107,11 @@ const PostPage: React.FC = () => {
     }
   };
 
+  const getProfilePicture = (userId: string): string => {
+    return `${config.serverAddress}/users/profile-image/${userId}`;
+  };
+  const profilePictureUrl = post ? getProfilePicture(post.userId) : "";
+
   return (
     <div className="w-full h-full">
       <section className="flex">
@@ -124,7 +134,7 @@ const PostPage: React.FC = () => {
               >
                 <div>
                   <Avatar
-                    src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
+                    src={profilePictureUrl}
                     size="lg"
                   />
                 </div>

server/routes/post.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const router = express.Router();
-const { Post, Comment } = require('../models');
+const { Post, Comment, User } = require('../models');
 const { Op, where } = require("sequelize");
 const yup = require("yup");
 const multer = require("multer");
@@ -184,6 +184,12 @@ router.get("/:id/getComments", async (req, res) => {
 
     let condition = {
         where: { postId: id },
+        include: [
+            {
+                model: User,
+                attributes: ['id', 'firstName', 'lastName'] // Specify the attributes you need
+            }
+        ],
         order: [['createdAt', 'DESC']]
     };