Refactoring and adding modified and created -dates to messages

messages-app-frontend/src/App.tsx

@@ -5,10 +5,12 @@ import NewMessage from "./NewMessage";
 import Welcome from "./Welcome";
 import Message from "./Message";
 
-type messageType = {
+export type messageType = {
   message: string,
   __v: Number,
-  _id: string
+  _id: string,
+  createdAt: Date,
+  modifiedAt: Date
 }
 
 type AppState = {
@@ -20,7 +22,11 @@ type AppState = {
     _id: string
   }
 }
+//ACTUAL URL
+//https://messages-app-backend.herokuapp.com/
 
+//DEV URL
+//http://localhost:3010/
 const api = axios.create({
   baseURL: `https://messages-app-backend.herokuapp.com/`
 });
@@ -37,7 +43,7 @@ const messageBox = {
 
 
 
-export default class App extends React.Component{
+export class App extends React.Component{
 
   state: AppState = {
     messages: [],

messages-app-frontend/src/Message.tsx

 import React from 'react';
-import {IconButton, Paper} from '@mui/material';
+import {IconButton, Paper, Typography} from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
-
-type messageType = {
-    message: string,
-    __v: Number,
-    _id: string
-}
+import type {messageType} from "./App";
 
 type IProps = {
     singleMessage: messageType,
@@ -17,8 +12,30 @@ type IProps = {
 
 export default class Message extends React.Component<IProps>{
 
+    timeCreated = (singleMessage: messageType) => {
+        if(this.props.singleMessage.createdAt !== undefined){
+            return (
+                <Typography>
+                    Created at: {this.props.singleMessage.createdAt.toString()}
+                </Typography>
+            )
+        }
+    }
+
+
+    timeModified = (singleMessage: messageType) => {
+        if(this.props.singleMessage.modifiedAt !== undefined){
+            return (
+                <Typography>
+                    Modified at: {this.props.singleMessage.modifiedAt.toString()}
+                </Typography>
+            )
+        }
+    }
+    
 
     render(): React.ReactNode{
+            
         return(
             <Paper 
                 elevation={5} 
@@ -47,9 +64,12 @@ export default class Message extends React.Component<IProps>{
                 >
                     <DeleteIcon />
                 </IconButton>
+                {this.timeCreated(this.props.singleMessage)}
+                {this.timeModified(this.props.singleMessage)}
 
             </Paper>
         )
+            
     }
 
 }
\ No newline at end of file

messages-app-frontend/src/index.tsx

 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import {App} from './App';
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 

messagesAppBackend/src/Message.ts

@@ -2,14 +2,16 @@ import mongoose from "mongoose";
 
 
 export interface messageInterface extends Document {
-    message: String
+    message: String,
+    createdAt: Date,
+    modifiedAt: Date
 }
 
 
 const messageSchema: mongoose.Schema = new mongoose.Schema({
-    message: {type: String}
+    message: {type: String},
+    createdAt: {type: Date},
+    modifiedAt: {type: Date}
 });
 
-const messageModel = mongoose.model<messageInterface>("messages", messageSchema);
-
-export default messageModel;
\ No newline at end of file
+export default mongoose.model<messageInterface>("messages", messageSchema);
\ No newline at end of file

messagesAppBackend/src/server.ts

@@ -18,35 +18,27 @@ app.get("/users", async (req, res) => {
 })
 
 app.get("/messages", async (req, res) => {
-    //await mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
     let messages = await findMessage();
     res.send(messages);
-    //mongoose.disconnect();
 })
 
 app.post("/messages", async (req, res) => {
-    //await mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
     await addMessage(req.body.message);
     res.sendStatus(200);
-    //mongoose.disconnect();
 })
 
 app.delete("/messages/:id", async (req, res) => {
-    //await mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
     await deleteMessage(req.params.id);
     res.sendStatus(200);
-    //mongoose.disconnect();
 })
 
 app.put("/messages/:id", async (req, res) => {
-    //await mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
     await modifyMessage(req.params.id, req.body.message);
     res.sendStatus(200);
-    //mongoose.disconnect();
 })
 
 async function modifyMessage(messageID, messageBody){
-    await Message.updateOne({_id: messageID}, {message: messageBody})
+    await Message.updateOne({_id: messageID}, {message: messageBody, modifiedAt: new Date()})
 }
 
 async function deleteMessage(messageID){
@@ -55,7 +47,7 @@ async function deleteMessage(messageID){
 
 
 async function addMessage(messageContent){
-    await Message.create({message: messageContent})
+    await Message.create({message: messageContent, createdAt: new Date()})
 }
 
 async function findMessage(){