Fixed bug causing time received on recent message card to be displayed incorrectly

Author: jusexton

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.1.3
+
+- Fixed bug causing the time received on the recent message card to be displayed incorrectly
+
 # 1.1.2
 
 - Updated API routes to new routes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio-website",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "dependencies": {
     "@hookform/resolvers": "^0.1.0",

src/components/Dashboard/Dash/RecentMessageCard/index.jsx

@@ -1,20 +1,33 @@
 import { Card, CardContent, Grid, Typography } from '@material-ui/core'
 import MailIcon from '@material-ui/icons/Mail'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 export const RecentMessageCard = ({ message, onClick, elevate = true }) => {
   const [elevation, setElevation] = React.useState(5)
+  const [received, setReceived] = useState()
+
+  useEffect(() => {
+    const getDaysAgo = (date) => {
+      const now = new Date()
+      return Math.floor((now - date) / (1000 * 60 * 60 * 24))
+    }
+
+    const date = new Date(message.timeCreated)
+    const daysAgo = getDaysAgo(date)
+
+    if (daysAgo < 1) {
+      setReceived('Today')
+    } else if (daysAgo >= 1 && daysAgo < 2) {
+      setReceived('Yesterday')
+    } else {
+      setReceived(`${daysAgo} days ago`)
+    }
+  }, [message])
 
   const handleMouseOver = () => elevate && setElevation(12)
   const handleMouseOut = () => elevate && setElevation(5)
 
-  const daysAgo = (dateString) => {
-    const now = new Date()
-    const date = new Date(dateString)
-    return Math.floor((now - date) / (1000 * 60 * 60 * 24))
-  }
-
   return (
     <Card
       elevation={elevation}
@@ -28,9 +41,7 @@ export const RecentMessageCard = ({ message, onClick, elevate = true }) => {
           <Typography style={{ marginRight: '12px' }}>
             {message.sender.alias}
           </Typography>
-          <Typography variant="caption">
-            {daysAgo(message.timeCreated)} days ago
-          </Typography>
+          <Typography variant="caption">{received}</Typography>
         </Grid>
 
         <Typography style={{ marginTop: '8px' }}>{message.message}</Typography>