[#161] Refactor PostCard and add activity status for posts on user profile

frontend/src/components/posts/interactions/InteractionsView.jsx

@@ -1,18 +1,19 @@
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
-import CommentIcon from '@mui/icons-material/Comment'
+import MessageOutlineIcon from '@mui/icons-material/MessageOutlined'
 import ShareIcon from '@mui/icons-material/Share'
 import classes from './interactions.module.scss'
 
 const InteractionsView = ({ postData, onLike, onComment, onShare }) => (
   <div className={classes.container}>
-    <div onClick={onLike}>
-      {postData.usersLiked}
+    <div className={classes.like} onClick={onLike}>
       <FavoriteBorderIcon />
+      {postData.usersLiked}
     </div>
     <div onClick={onComment}>
+      <MessageOutlineIcon />
       {postData.children.length}
-      <CommentIcon />
     </div>
+    <div className={classes.spacer} />
     <div onClick={onShare}>
       {postData.usersShared}
       <ShareIcon />

frontend/src/components/posts/interactions/interactions.module.scss

@@ -2,12 +2,21 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  width: 100%;
+  color: grey;
 
   > div {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.15rem;
     cursor: pointer;
   }
+
+  .spacer {
+    margin: auto;
+  }
+  .like {
+    margin-right: 20px;
+  }
 }

frontend/src/components/posts/post/PostController.jsx

@@ -7,11 +7,12 @@ import { HandleContext } from '../../../contexts/HandleProvider'
 
 /**
  * Creates a post. One of either id or data must be provided
- * @prop {string} activity - optional, POSTED, SHARED or LIKED
+ * @prop {string} activity - optional, POSTED, SHARED, COMMENTED or LIKED
  * @prop {number} id - optional, data will be fetched using the id
  * @prop {object} data - optional, use this post data to render the post
  * @prop {boolean} condensed - optional, makes the post take up less space
  * @prop {boolean} showReplies - optional, also renders each 1st level reply to the post
+ * @prop {boolean} newPost
  */
 const PostController = ({
   activity = 'POSTED',
@@ -22,7 +23,10 @@ const PostController = ({
 }) => {
   const { tags } = useContext(TagContext)
   const { handles } = useContext(HandleContext)
+  const username = localStorage.getItem('username')
   let postData = data
+  let activityText
+
   if (id) {
     const { data: resData, loading, err } = useApi(`posts/${id}`)
 
@@ -34,6 +38,23 @@ const PostController = ({
       return <div>Error: {err}</div>
     }
 
+    switch (activity) {
+      case 'POSTED':
+        activityText = `${username} posted`
+        break
+      case 'SHARED':
+        activityText = `${username} reshared @${resData.username}'s post`
+        break
+      case 'COMMENTED':
+        activityText = `${username} commented on @${resData.username}'s post`
+        break
+      case 'LIKED':
+        activityText = `${username} liked @${resData.username}'s post`
+        break
+      default:
+        activityText = null
+    }
+
     postData = resData
   } else if (!data) {
     // true if neither id or data is given
@@ -42,7 +63,7 @@ const PostController = ({
 
   return (
     <PostView
-      activity={activity}
+      activityText={activityText}
       condensed={condensed}
       postData={postData}
       showReplies={showReplies}

frontend/src/components/posts/post/PostView.jsx

@@ -8,7 +8,7 @@ import processMentions from '../../../functions/mentions'
 import classes from './post.module.scss'
 
 const PostView = ({
-  activity,
+  activityText,
   postData,
   condensed,
   showReplies,
@@ -18,9 +18,9 @@ const PostView = ({
   if (condensed) {
     return (
       <div className={classes.condensed}>
-        {activity !== 'POSTED' && (
+        {activityText && (
           <div className={classes.activity}>
-            <span>{activity}</span>
+            <span>{activityText}</span>
           </div>
         )}
         <SimpleUserDetails

frontend/src/components/posts/post/post.module.scss

@@ -29,9 +29,11 @@
   align-items: left;
   justify-content: start;
   gap: 0.5rem;
+  width: 100%;
 
   &Interactions {
-    width: 10rem;
+    width: 100%;
+    margin-top: 15px;
   }
 }
 
@@ -49,3 +51,15 @@
   text-decoration: none;
   color: #3281c9;
 }
+
+.postStyle {
+  text-decoration: none;
+  padding-top: 1rem;
+  padding: 10px;
+  border: 1px solid #afafaf;
+  border-radius: 25px;
+}
+
+.activity {
+  font-weight: bold;
+}

frontend/src/components/user/simpledetails/SimpleUserDetailsView.jsx

@@ -11,16 +11,17 @@ const SimpleUserDetailsView = ({ user, condensed, time }) => {
       to={`/user/${user.username}`}
       className={condensed ? classes.condensedContainer : classes.container}
     >
-      <div>
+      <div className={classes.timestampContainer}>
         <div className={classes.timestamp}>
-          <span>{user.nickname}</span>
+          <span className={classes.nickname}>{user.nickname}</span>
+          <div className={classes.spacer} />
           {time !== 0 && (
-            <div>
+            <div className={classes.timestampText}>
               • <ReactTimeAgo date={time} timeStyle="twitter" />
             </div>
           )}
         </div>
-        <span>@{user.username}</span>
+        <span className={classes.username}>@{user.username}</span>
       </div>
       <Avatar
         sx={{ width: size, height: size }}

frontend/src/components/user/simpledetails/simpleuserdetails.module.scss

@@ -38,6 +38,31 @@
 
 .timestamp {
   display: flex;
+  justify-self: flex-end;
+  align-self: flex-end;
   flex-direction: row;
   gap: 0.25rem;
+  width: 100%;
+}
+
+.nickname {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.timestampContainer {
+  width: 100%;
+}
+
+.spacer {
+  margin: auto;
+}
+
+.username {
+  color: grey;
+  margin-top: -5px;
+}
+
+.timestampText {
+  color: grey;
 }

frontend/src/pages/dashboard/DashboardPageView.jsx

@@ -11,11 +11,11 @@ import classes from './dashboardpage.module.scss'
  * Card container for each feed post
  */
 const FeedCard = styled(Card)({
-  width: '90%',
+  width: '85%',
   margin: 'auto',
-  marginTop: '10px',
+  marginTop: '20px',
   marginBottom: '10px',
-  padding: '10px',
+  padding: '20px',
 })
 
 const FloatingAddButton = styled(Fab)({

frontend/src/pages/user/UserPageView.jsx

@@ -33,8 +33,11 @@ const UserPageView = ({
 
       <ProfileUserDetails user={userData} />
 
-      <div className={classes.posts}>
+      <div className={classes.activity}>
         <h2>Activity</h2>
+      </div>
+
+      <div className={classes.posts}>
         <List>
           {userFeed?.map((post) => (
             <ListItem

frontend/src/pages/user/userpage.module.scss

@@ -23,8 +23,16 @@
   float: right;
 }
 
-.posts {
+.activity {
   border-top: 1px solid theme.$divider;
   margin-top: 1rem;
   padding-top: 1rem;
 }
+.posts {
+  border-top: 1px solid theme.$divider;
+  margin-top: 1rem;
+  padding: 10px;
+  border: 1px solid #a8a8a8;
+  border-radius: 25px;
+  margin-bottom: 1rem;
+}