Made time better formatted

messages-app-frontend/src/Message.tsx

@@ -12,11 +12,27 @@ type IProps = {
 
 export default class Message extends React.Component<IProps>{
 
+    formatTime = (date: Date) => {
+        let today = new Date();
+
+        if(date.getDay() === today.getDay()){
+            return "today at " + date.toLocaleTimeString();
+        }
+        else if(date.getDay() === today.getDay()-1){
+            return "yesterday at " + date.toLocaleTimeString();
+        }
+        else{ 
+            return date.toLocaleString();
+        }
+    }
+
     timeCreated = (singleMessage: messageType) => {
         if(this.props.singleMessage.createdAt !== undefined){
+            let createdAt = new Date(this.props.singleMessage.createdAt);
+
             return (
-                <Typography>
-                    Created at: {this.props.singleMessage.createdAt.toString()}
+                <Typography variant='body2'>
+                    Created {this.formatTime(createdAt)}
                 </Typography>
             )
         }
@@ -25,9 +41,11 @@ export default class Message extends React.Component<IProps>{
 
     timeModified = (singleMessage: messageType) => {
         if(this.props.singleMessage.modifiedAt !== undefined){
+            let modifiedAt = new Date(this.props.singleMessage.modifiedAt);
+            
             return (
-                <Typography>
-                    Modified at: {this.props.singleMessage.modifiedAt.toString()}
+                <Typography variant="body2">
+                    Modified {this.formatTime(modifiedAt)}
                 </Typography>
             )
         }