Skip to content
Snippets Groups Projects
Commit 2bd0d079 authored by Joonas Seppä's avatar Joonas Seppä
Browse files

Refactoring the App to use reusable components of NewMessage and Welcome

parent ab811617
No related branches found
No related tags found
No related merge requests found
Pipeline #61659 passed
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>
)
......
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>
)
}
......
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
......@@ -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!");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment