Merge pull request #11 from Sebastian-Webster/fix-image-posts-not-dis…

…playing-images fix image posts not displaying their images
Sebastian-Webster · Sep 7, 2022 · acf0b23 · acf0b23
2 parents c9ade27 + 84067c0
commit acf0b23
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 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, imageKey, previewImage, liked, publicId, postId, dispatch, userId, previewMode}) => {
+const ImagePost = ({title, body, datePosted, image, previewImage, liked, publicId, postId, dispatch, userId, previewMode}) => {
     const {darkMode, setDarkMode} = useContext(DarkModeContext)
     const changingLikeStatus = useRef(false)
     const deleting = useRef(false)
@@ -66,7 +66,7 @@ const ImagePost = ({title, body, datePosted, imageKey, previewImage, liked, publ
             <div style={{border: `1px solid ${darkMode ? 'white' : 'black'}`, maxHeight: '100%'}}>
                 <h1 style={{wordBreak: 'break-all'}}>{title}</h1>
                 <p style={{wordBreak: 'break-all'}}>{body}</p>
-                <img src={previewImage ? previewImage : `${serverUrl}/image/${imageKey}`} style={{maxHeight: '100%', maxWidth: '100%'}}/>
+                <img src={previewImage ? previewImage : image} style={{maxHeight: '100%', maxWidth: '100%'}}/>
                 <br/>
                 <FontAwesomeIcon 
                     icon={liked ? fasHeart : farHeart}

diff --git a/frontend/src/routes/Profile.js b/frontend/src/routes/Profile.js
@@ -216,10 +216,16 @@ const Profile = () => {
 
                 axios.get(`${serverUrl}/user/imagePostsByUserName/?username=${name}&skip=${Array.isArray(imagePostState.posts) ? imagePostState.posts.length : 0}&publicId=${publicId}`)
                 .then(response => response.data.data)
-                .then(result => {
+                .then(async (result) => {
+                    const posts = []
+                    for (const post of result) {
+                        const imageData = (await axios.get(`${serverUrl}/image/${post.imageKey}`)).data
+                        post.image = 'data:image/jpeg;base64,' + imageData
+                        posts.push(post)
+                    }
                     dispatchImagePostUpdate({
                         type: 'addPosts',
-                        result
+                        result: posts
                     })
                 }).catch(error => {
                     dispatchImagePostUpdate({
@@ -249,7 +255,7 @@ const Profile = () => {
     const DisplayTextPosts = useMemo(() => {
         return Array.isArray(textPostState.posts) ? textPostState.posts.map((post, index) => (
             <Fragment key={index.toString()}>
-                <TextPost {...post} publicId={publicId} dispatch={dispatchTextPostUpdate} userId={_id}/>
+                <TextPost {...post} publicId={publicId} dispatch={dispatchTextPostUpdate} userId={_id} profileName={name} profileImage={profileImageUri}/>
             </Fragment>
         )) : null
     }, [textPostState.posts, textPostState.reRenderTimes])