From 11e4aa379d37d2ed5318824781d4365ea18e2c80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joonas=20Sepp=C3=A4?= <joasep@utu.fi> Date: Mon, 13 Mar 2023 20:18:02 +0200 Subject: [PATCH] Refactoring and adding modified and created -dates to messages --- messages-app-frontend/src/App.tsx | 12 ++++++--- messages-app-frontend/src/Message.tsx | 36 +++++++++++++++++++++------ messages-app-frontend/src/index.tsx | 2 +- messagesAppBackend/src/Message.ts | 12 +++++---- messagesAppBackend/src/server.ts | 12 ++------- 5 files changed, 47 insertions(+), 27 deletions(-) diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx index 5bec660..49df6b4 100644 --- a/messages-app-frontend/src/App.tsx +++ b/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: [], diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx index 081e8ff..5d5e1c7 100644 --- a/messages-app-frontend/src/Message.tsx +++ b/messages-app-frontend/src/Message.tsx @@ -1,13 +1,8 @@ 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, @@ -16,9 +11,31 @@ 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 diff --git a/messages-app-frontend/src/index.tsx b/messages-app-frontend/src/index.tsx index 4515ac1..2922a97 100644 --- a/messages-app-frontend/src/index.tsx +++ b/messages-app-frontend/src/index.tsx @@ -1,6 +1,6 @@ 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"; diff --git a/messagesAppBackend/src/Message.ts b/messagesAppBackend/src/Message.ts index bbefd58..c68785e 100644 --- a/messagesAppBackend/src/Message.ts +++ b/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 diff --git a/messagesAppBackend/src/server.ts b/messagesAppBackend/src/server.ts index 83d3acf..5c92641 100644 --- a/messagesAppBackend/src/server.ts +++ b/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(){ -- GitLab