diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx index 5d5e1c734dec848a5af802e72c859f0d1ae46ae4..18de699ce18e0c4c802fee8df02c8831c41fafdf 100644 --- a/messages-app-frontend/src/Message.tsx +++ b/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> ) }