Merge pull request #59 from Sebastian-Webster/30-give-image-post-rede…

…sign add profile name and profile image
Sebastian-Webster · Sep 12, 2022 · 9d9f4d6 · 9d9f4d6
2 parents 71954b6 + 29a3d25
commit 9d9f4d6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/components/ImagePost.js b/frontend/src/components/ImagePost.js
@@ -8,7 +8,7 @@ import Button from '@mui/material/Button'
 import axios from 'axios';
 import { ServerUrlContext } from '../context/ServerUrlContext';
 
-const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicId, postId, dispatch, userId, previewMode}) => {
+const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicId, postId, dispatch, userId, previewMode, profileName, profileImage}) => {
     const {darkMode, setDarkMode} = useContext(DarkModeContext)
     const changingLikeStatus = useRef(false)
     const deleting = useRef(false)
@@ -63,7 +63,16 @@ const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicI
 
     return (
         <Grid item xs={12} sm={6} md={4} lg={3} xl={2}>
-            <div style={{border: `1px solid ${darkMode ? 'white' : 'black'}`, maxHeight: '100%'}}>
+            <div style={{border: `1px solid ${darkMode ? 'white' : 'black'}`, maxHeight: '100%', padding: 10}}>
+                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
+                    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
+                        <img src={profileImage} alt={`Profile Image for user ${profileName}`} style={{width: 50, height: 50, borderRadius: '50%', marginRight: 10}}/>
+                        <h3>{profileName}</h3>
+                    </div>
+                    <div>
+                        <i class="fa-solid fa-ellipsis" style={{fontSize: 20, cursor: 'pointer'}}></i>
+                    </div>
+                </div>
                 <h1 style={{wordBreak: 'break-all'}}>{title}</h1>
                 <p style={{wordBreak: 'break-all'}}>{body}</p>
                 <img src={previewImage ? previewImage : image} style={{maxHeight: '100%', maxWidth: '100%'}}/>

diff --git a/frontend/src/routes/Posts.js b/frontend/src/routes/Posts.js
@@ -161,7 +161,7 @@ const Posts = () => {
                                     </Box>
                                 </>
                             :
-                                imagePreview ? <ImagePost title={title} body={body} previewImage={imagePreview} previewMode/> : <TextPost title={title} body={body} profileImage={profileImageUri} profileName={name} previewMode/>
+                                imagePreview ? <ImagePost title={title} body={body} previewImage={imagePreview} profileImage={profileImageUri} profileName={name} previewMode/> : <TextPost title={title} body={body} profileImage={profileImageUri} profileName={name} previewMode/>
                             }
                         </div>
                     </Container>

diff --git a/frontend/src/routes/Profile.js b/frontend/src/routes/Profile.js
@@ -330,7 +330,7 @@ const Profile = () => {
     const DisplayImagePosts = useMemo(() => {
         return Array.isArray(imagePostState.posts) ? imagePostState.posts.map((post, index) => (
             <Fragment key={index.toString()}>
-                <ImagePost {...post} publicId={publicId} dispatch={dispatchImagePostUpdate} userId={_id}/>
+                <ImagePost {...post} publicId={publicId} dispatch={dispatchImagePostUpdate} userId={_id} profileName={name} profileImage={profilePublicId ? profileData.profileImageUri : profileImageUri}/>
             </Fragment>
         )) : null
     }, [imagePostState.posts, imagePostState.reRenderTimes])
-Original file line number
+Diff line change
@@ Expand Up / @@ -161,7 +161,7 @@ const Posts = () => { @@
                                         </Box>
                                     </>
                                 :
-                                    imagePreview ? <ImagePost title={title} body={body} previewImage={imagePreview} previewMode/> : <TextPost title={title} body={body} profileImage={profileImageUri} profileName={name} previewMode/>
+                                    imagePreview ? <ImagePost title={title} body={body} previewImage={imagePreview} profileImage={profileImageUri} profileName={name} previewMode/> : <TextPost title={title} body={body} profileImage={profileImageUri} profileName={name} previewMode/>
                                 }
                             </div>
                         </Container>
@@ Expand Down @@