Merge pull request #5 from matteoauger/feature/post-submit-time

Feature/post submit time

Author: MeghalBisht

client/src/Components/Screens/Home.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import Loading from './Loading'
 import { UserContext } from '../../App'
 import M from 'materialize-css'
+import { relativeDate } from '../../Utils/date-util.js';
 
 function Home() {
 
@@ -207,7 +208,8 @@ function Home() {
                                     <img src={post.photo} alt="post_img" />
                                 </div>
                                 <div className="card-content">
-                                    {
+                                  <div class="post-info-stripe">
+                                  {
                                         miniLoading ?
                                             <div className="like-loader">
                                             </div>
@@ -221,6 +223,9 @@ function Home() {
                                                 }
                                             </div>
                                     }
+                                    <div class="post-date">{ relativeDate(post.createdAt) }</div>
+                                  </div>
+                                    
                                     <p className="likes">{post.likes.length} likes</p>
                                     <p>{post.body}</p>
 
@@ -272,4 +277,4 @@ function Home() {
         )
     }
 }
-export default Home
+export default Home

client/src/Components/Screens/SinglePost.js

@@ -6,6 +6,7 @@ import '../../Styles/Home.css'
 import { Link } from 'react-router-dom'
 import { UserContext } from '../../App'
 import M from 'materialize-css'
+import { relativeDate } from '../../Utils/date-util.js';
 
 
 function SinglePost() {
@@ -156,7 +157,8 @@ function SinglePost() {
           <img src={post.photo} alt="post_img" />
         </div>
         <div className="card-content">
-          {
+          <div class="post-info-stripe">
+            {
             miniLoading ?
               <div className="like-loader">
               </div>
@@ -169,7 +171,10 @@ function SinglePost() {
                     <i onClick={() => likePost(post._id)} className="like material-icons">thumb_up</i>
                 }
               </div>
-          }
+            }
+            <div class="post-date">{ relativeDate(post.createdAt) }</div>
+            </div>
+          
           <p className="likes">{post.likes.length} likes</p>
           <p>{post.body}</p>
 
@@ -217,4 +222,4 @@ function SinglePost() {
   )
 }
 
-export default SinglePost
+export default SinglePost

client/src/Styles/Home.css

@@ -226,4 +226,19 @@ color: var(--sec-text) !important;
     font-size: 18px;
     color: var(--primary-text);
     font-weight: 600;
-}
+}
+
+.card
+> .card-content 
+> .post-info-stripe {
+    display: flex;
+    justify-content: space-between;
+}
+
+.card
+> .card-content 
+> .post-info-stripe 
+> .post-date {
+    color: var(--sec-text);
+    font-style: italic;
+}

client/src/Utils/date-util.js

@@ -0,0 +1,31 @@
+export const relativeDate = (timestamp) => {
+  const NB_DAYS_YEAR = 365; // nb days on a year
+  const NB_HOURS_DAY = 24; // nb hours on a day
+  const NB_MINUTES_HOUR = 60; // nb minutes on a hour
+  const now    = new Date();
+  const utcNow = new Date(now.toUTCString());
+  const utcDate = new Date(new Date(timestamp).toUTCString())
+  const diffMs = utcNow.getTime() - utcDate.getTime()
+
+  const diffMinutes = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMinutes / NB_MINUTES_HOUR);
+  const diffDays = Math.floor(diffHours / NB_HOURS_DAY);
+  const diffYears = Math.floor(diffDays / NB_DAYS_YEAR);
+
+  if (diffMinutes < 2) return "Posted a few minutes ago";
+
+  if (diffMinutes < NB_MINUTES_HOUR) return `Posted ${diffMinutes} minutes ago`;
+
+  if (diffHours < NB_HOURS_DAY) {
+    const hourLabel = diffHours === 1 ? "hour" : "hours";
+    return `Posted ${diffHours} ${hourLabel} ago`;
+  }
+
+  if (diffDays < NB_DAYS_YEAR) {
+    const dayLabel = diffDays === 1 ? "day" : "days";
+    return `Posted ${diffDays} ${dayLabel} ago`;
+  }
+
+  const yearLabel = diffYears === 1 ? "year" : "years";
+  return `Posted ${diffYears} ${yearLabel} ago`;
+};