diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx index 0dc1d88ccea4b22030fb5fb98f07e5df5a00e879..3866f511aaa0979634f82ce1b4e91e5459b43794 100644 --- a/messages-app-frontend/src/App.tsx +++ b/messages-app-frontend/src/App.tsx @@ -4,6 +4,7 @@ import {Button, IconButton, Container, Typography, Box, Input, Paper} from '@mui import SendIcon from '@mui/icons-material/Send'; import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; +import NewMessage from "./NewMessage" //import IconButton from '@mui/material'; //import SendIcon from '@mui/icons-material'; @@ -75,6 +76,11 @@ export default class App extends React.Component{ this.getMessages(); } + inputValueChanged(newValue: any){ + this.setState({newMessage: newValue}) + //(p) => this.setState({newMessage: p.target.value}) + } + updatingMessage = (p: messageType) => { if(p._id === this.state.editingMessage._id){ return ( @@ -159,10 +165,19 @@ export default class App extends React.Component{ <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> - + </Container> ) } } -} \ No newline at end of file +} +//<NewMessage inputValue={this.state.newMessage} createMessage={this.createMessage} onChangeValue={this.inputValueChanged}/> + +/* + + inputValue: string, + createMessage: Function, + onChangeValue: Function + +*/ \ No newline at end of file diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx index 92e8ca7b72fd3c40dbc205503438b53a6f142f46..d7358ce287ca334204d3cb6bb491d75a2a6d0bc0 100644 --- a/messages-app-frontend/src/Message.tsx +++ b/messages-app-frontend/src/Message.tsx @@ -3,7 +3,7 @@ import { Component } from "react"; interface IState { message: String; _id: String; - } +} class Message extends Component<IState>{ diff --git a/messages-app-frontend/src/NewMessage.tsx b/messages-app-frontend/src/NewMessage.tsx new file mode 100644 index 0000000000000000000000000000000000000000..20cdb8d34c0a44168f4b2ec5ccb5129430ccd6ba --- /dev/null +++ b/messages-app-frontend/src/NewMessage.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import {Button, IconButton, Container, Typography, Box, Input, Paper} 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 = { + inputValue: string, + createMessage: Function, + onChangeValue: Function +} + +type NewMessageState = { + +} + +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> + </Box> + ) + } +} \ No newline at end of file diff --git a/messagesAppBackend/src/server.ts b/messagesAppBackend/src/server.ts index 83d3acf59ba99a6f65bed7731eea6f6f7cfad281..5dc201c76bdff6225b070e0e31c08f8314b7cd6a 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!");