Image upload for posts and profile + ImageFormat util to display corr…

…ect img

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vite-project",
+  "name": "connect",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/RouterController.jsx

@@ -5,13 +5,11 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"
 import ErrorPage from './pages/ErrorPage';
 import Login from './pages/Login/Login';
 import Signup from './pages/Signup/Signup';
-import Home from './components/Home/Home';
-import PostForm from './components/PostForm/PostForm';
+import Home from './pages/Home/Home';
+import PostForm from './pages/PostForm/PostForm';
 import Timeline from "./pages/Timeline/Timeline";
 import Profile from './pages/Profile/Profile';
-import Friends from './components/Friends/Friends';
-import Notifications from './components/Notifications/Notifications';
-import Search from './components/Search/Search';
+import Notifications from './pages/Notifications/Notifications';
 
 // Utils
 import ProtectedRoute from './utils/ProtectedRoute';
@@ -37,12 +35,8 @@ const RouterController = () => {
           <Route path='post-form' element={ <PostForm /> } />
           {/* PROFILE */}
           <Route path='profile/:id' element={ <Profile /> } />
-          {/* FRIENDS */}
-          {/* <Route path='friends' element={ <Friends /> } /> */}
           {/* NOTIFICATIONS */}
           <Route path='notifications' element={ <Notifications /> } />
-          {/* SEARCH */}
-          {/* <Route path='search' element={ <Search /> } /> */}
         </Route>
 
         {/* 404 PAGE */}

src/components/Comment/Comment.css

@@ -3,3 +3,7 @@
     gap: .75rem;
     align-items: flex-start;
 }
+
+#comment-message {
+    padding-top: 2px;
+}

src/components/Comment/Comment.jsx

@@ -41,7 +41,7 @@ const Comment = ({ commentId }) => {
                 fontSize="1rem"
                 gap=".5rem"
             />
-            <div>{comment?.message}</div>
+            <div id="comment-message">{comment?.message}</div>
         </div>
     )
 }

src/components/FriendRequestBtn/FriendRequestBtn.jsx

@@ -42,7 +42,7 @@ const FriendRequestBtn = ({ userObj }) => {
 
     useEffect(() => {
         // Set init state
-        console.log(userObj.status)
+        // console.log(userObj.status)
         setStatus(userObj.status);
     }, [])
 

src/components/FriendSlider/FriendSlider.jsx

@@ -56,9 +56,6 @@ const FriendSlider = ({ profileId }) => {
                                     <UserInfo 
                                     userObj={friend}
                                     requestButton={true}
-                                    imageSize="3rem"
-                                    fontSize="1rem"
-                                    gap=".5rem"
                                     orientation="column"
                                 />
                             </li>

src/components/Post/Post.css

@@ -3,10 +3,9 @@
     overflow: visible;
     position: relative;
     background-color: var(--post-background);
-    /* color: var(--text-light); */
-    /* border: 1px solid var(--dark-gray); */
     color: var(--text-dark);
     height: fit-content;
+    max-height: 50rem;
     border-bottom-right-radius: 3rem;
     padding-bottom: .5rem;
 }
@@ -22,7 +21,6 @@
         width: 5px;
         height: 5px;
         border-radius: 100%;
-        /* background-color: var(--text-light); */
         background-color: var(--text-dark);
     }
 
@@ -106,11 +104,13 @@
     z-index: initial;
     border-top-left-radius: 3rem;
     background-color: var(--comment-background);
+    border-bottom-right-radius: 3rem;
 }
 
 .comment-form form {
     gap: .5rem;
     width: 100%;
+    padding-right: 2rem;
 }
 
 /* Post & Comment backgrounds */
@@ -126,7 +126,7 @@
 }
 
 .comment-form-background {
-    background-color: var(--post-background);
+    background: linear-gradient(-45deg, transparent 50%, var(--post-background) 50%);
 }
 
 .comment-background {
@@ -154,3 +154,25 @@
     border-top-left-radius: 0;
 }
 
+.post-content img {
+    width: fit-content;
+    max-width: 100%;
+    height: 100%;
+    image-rendering: auto;
+    aspect-ratio: 1/1;
+}
+
+.post-content {
+    max-height: 25rem;
+    display: flex;
+    flex-direction: column;
+    overflow: none;
+    gap: 5px;
+}
+
+#post-img {
+    aspect-ratio: 1/1;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+}

src/components/Post/Post.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 
 // Utils
 import axios from "../../utils/AxiosConfig";
+import ImageFormat from "../../utils/ImageFormat";
 
 // CSS
 import './Post.css';
@@ -92,7 +93,6 @@ const Post = ({ post }) => {
             try {
                 const like_status = await axios.get(`/api/posts/like/${post._id}`, axiosConfig);
                 setLiked(like_status.data);
-
             } catch (err) {
                 console.log(err);
             }
@@ -118,9 +118,12 @@ const Post = ({ post }) => {
             {isCommentFormVisible || comments.length !== 0 ? <div className="post-background timeline-background"/> : null}
 
             {/* Author icon */}
-            {undefined !== post.user_id.picture ? 
-            <Link to={`/profile/${post.user_id._id}`} className='user-picture post-picture' style={{backgroundImage: `url(${post.user_id?.picture})`}}/> : 
-            <Link to={`/profile/${post.user_id._id}`} className='user-picture guest-picture post-picture' style={{backgroundImage: `url(${'../../guest-32.png'})`}} />}
+            <Link 
+                to={`/profile/${post.user_id._id}`} 
+                className='user-picture post-picture' 
+                style={ImageFormat(post.user_id?.picture)}
+            /> 
+
             {/* Username and Date */}
             <div className="post-header">
                 <h3>{post.user_id.username}</h3>
@@ -132,14 +135,17 @@ const Post = ({ post }) => {
             </div>
             {/* Post post */}
             <div className="post-content">
+                {undefined !== post.image ?
+                    <div id='post-img' style={{backgroundImage: `url("data:image/png;base64, ${post.image}")`}}/>
+                : null }
                 <div>{post.message}</div>
             </div>
             {/* Footer with icons */}
             <div className="post-footer">
                 <div className="post-footer-icons">
                     <button><FontAwesomeIcon icon={isLiked ? heart_solid : heart_outline} onClick={handleLike}/></button>
                     <button><FontAwesomeIcon icon={isCommentFormVisible ? comment_solid : comment_outline} onClick={handleComment}/></button>
-                    <button><FontAwesomeIcon icon={faPaperPlane} onClick={handleShare}/></button>
+                    {/* <button><FontAwesomeIcon icon={faPaperPlane} onClick={handleShare}/></button> */}
                 </div>
                 <div id='like-counter'>{likeCount} {likeCount === 1 ? 'like' : 'likes'} </div>
             </div>

src/components/PostPreview/PostPreview.css

@@ -9,12 +9,7 @@
     width: 100%;
     aspect-ratio: 1/1;
     font-size: 1.5rem;
-
-    & .profile-post-content {
-        padding: 1rem;
-        max-height: 90%;
-        overflow: hidden;
-    }
+    padding: 1rem;
 }
 
 .profile-post-wrapper:hover .profile-post-stats{
@@ -32,6 +27,8 @@
     gap: 2rem;
     width: 100%;
     height: 100%;
+    top: 0;
+    left: 0;
 
     & div {
         display: flex;
@@ -44,4 +41,13 @@
             height: 30px;
         }
     }
+}
+
+.profile-post-content {
+    padding: 1rem;
+    overflow: hidden;
+    aspect-ratio: 1/1;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
 }