From 2bd0d079613afbb11f9b21da736981f1186c11cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Sepp=C3=A4?= <joasep@utu.fi>
Date: Mon, 13 Mar 2023 07:44:36 +0200
Subject: [PATCH] Refactoring the App to use reusable components of NewMessage
and Welcome
---
messages-app-frontend/src/App.tsx | 31 ++++++++-------------
messages-app-frontend/src/NewMessage.tsx | 35 +++---------------------
messages-app-frontend/src/Welcome.tsx | 12 ++++++++
messagesAppBackend/src/server.ts | 2 +-
4 files changed, 28 insertions(+), 52 deletions(-)
create mode 100644 messages-app-frontend/src/Welcome.tsx
diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 3866f51..5c1c077 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import axios from 'axios';
-import {Button, IconButton, Container, Typography, Box, Input, Paper} from '@mui/material';
-import SendIcon from '@mui/icons-material/Send';
+import {Button, IconButton, Container, Box, Input, Paper} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
-import NewMessage from "./NewMessage"
+import NewMessage from "./NewMessage";
+import Welcome from "./Welcome";
//import IconButton from '@mui/material';
//import SendIcon from '@mui/icons-material';
@@ -49,6 +49,7 @@ export default class App extends React.Component{
}
createMessage = async () => {
+ console.log("New message has been created!")
await api.post('/messages', {message: this.state.newMessage});
this.setState({newMessage: ""});
this.getMessages();
@@ -76,8 +77,8 @@ export default class App extends React.Component{
this.getMessages();
}
- inputValueChanged(newValue: any){
- this.setState({newMessage: newValue})
+ inputValueChanged = (newValue: any) => {
+ this.setState({newMessage: newValue});
//(p) => this.setState({newMessage: p.target.value})
}
@@ -120,18 +121,14 @@ export default class App extends React.Component{
if(this.state.editingMessage.bool){
return(
<Container>
- <Box sx={{bgcolor: 'white', marginX: 10, padding: 1, marginY: 2, borderRadius: 5, boxShadow: 20}}>
- <Typography variant="h3" sx={{textAlign: "center", margin: 3}}>Welcome to my Messaging Application!</Typography>
- </Box>
+
+ <Welcome />
<Box sx={{bgcolor: "darkgreen", marginX: 10, padding: 3, display: "grid", /*flexDirection: "column", alignItems: "center",*/ justifyContent: "center", boxShadow: 20, borderRadius: 5}}>
{this.state.messages.map((p) => this.updatingMessage(p))}
</Box>
- <Box sx={{textAlign: "center", paddingTop: 5}}>
- <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
- <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
- </Box>
+ <NewMessage inputValue={this.state.newMessage} createMessage={this.createMessage} onChangeValue={this.inputValueChanged}/>
</Container>
)
}
@@ -140,9 +137,7 @@ export default class App extends React.Component{
return(
<Container>
- <Box sx={{bgcolor: 'white', marginX: 10, padding: 1, marginY: 2, borderRadius: 5, boxShadow: 20}}>
- <Typography variant="h3" sx={{textAlign: "center", margin: 3}}>Welcome to my Messaging Application!</Typography>
- </Box>
+ <Welcome />
<Box sx={{bgcolor: "darkgreen", marginX: 10, padding: 3, display: "grid", /*flexDirection: "column", alignItems: "center",*/ justifyContent: "center", boxShadow: 20, borderRadius: 5}}>
@@ -161,11 +156,7 @@ export default class App extends React.Component{
)}
</Box>
- <Box sx={{textAlign: "center", paddingTop: 5}}>
- <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
- <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
- </Box>
-
+ <NewMessage inputValue={this.state.newMessage} createMessage={this.createMessage} onChangeValue={this.inputValueChanged}/>
</Container>
)
diff --git a/messages-app-frontend/src/NewMessage.tsx b/messages-app-frontend/src/NewMessage.tsx
index 20cdb8d..c7974eb 100644
--- a/messages-app-frontend/src/NewMessage.tsx
+++ b/messages-app-frontend/src/NewMessage.tsx
@@ -1,47 +1,20 @@
import React from 'react';
-import {Button, IconButton, Container, Typography, Box, Input, Paper} from '@mui/material';
+import {Button, Box, Input} from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import { AxiosInstance } from 'axios';
-type hello = {
+type IProps = {
inputValue: string,
createMessage: Function,
onChangeValue: Function
}
-type NewMessageState = {
+export default class NewMessage extends React.Component<IProps>{
-}
-
-export default class NewMessage extends React.Component<hello>{
-
- state: NewMessageState = {
-
- }
-
- /*
- createMessage = async () => {
- await this.props.api.post('/messages', {message: this.state.newMessage});
- this.setState({newMessage: ""});
- //this.getMessages();
- }
- */
-
- /*
-
- <Box sx={{textAlign: "center", paddingTop: 5}}>
- <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
- <Button /*color="success"*//* sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
- </Box>
-
- */
render(){
return(
<Box sx={{textAlign: "center", paddingTop: 5}}>
<Input value={this.props.inputValue} onChange={(p) => this.props.onChangeValue(p.target.value)}></Input>
- <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.props.createMessage()}>Send</Button>
+ <Button sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={() => this.props.createMessage()}>Send</Button>
</Box>
)
}
diff --git a/messages-app-frontend/src/Welcome.tsx b/messages-app-frontend/src/Welcome.tsx
new file mode 100644
index 0000000..f6a1a93
--- /dev/null
+++ b/messages-app-frontend/src/Welcome.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import {Typography, Box} from '@mui/material';
+
+export default class Welcome extends React.Component{
+ render(): React.ReactNode {
+ return(
+ <Box sx={{bgcolor: 'white', marginX: 10, padding: 1, marginY: 2, borderRadius: 5, boxShadow: 20}}>
+ <Typography variant="h3" sx={{textAlign: "center", margin: 3}}>Welcome to my Messaging Application!</Typography>
+ </Box>
+ )
+ }
+}
\ No newline at end of file
diff --git a/messagesAppBackend/src/server.ts b/messagesAppBackend/src/server.ts
index 5dc201c..83d3acf 100644
--- a/messagesAppBackend/src/server.ts
+++ b/messagesAppBackend/src/server.ts
@@ -7,7 +7,7 @@ const app = express()
app.use(express.json());
app.use(cors());
-//mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
+mongoose.connect("mongodb+srv://joasep:koira@messagescluster0.nvb8tqc.mongodb.net/?retryWrites=true&w=majority");
app.get("/", async (req, res) => {
res.send("This is the root of the API!");
--
GitLab