Refactoring the App to use reusable components of NewMessage and Welcome

messages-app-frontend/src/App.tsx

 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>
 
       )

messages-app-frontend/src/NewMessage.tsx

 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>
         )
     }

messages-app-frontend/src/Welcome.tsx

+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

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!");