diff --git a/whatslab17/src/App.css b/whatslab17/src/App.css
index 5cebe0c..449d843 100644
--- a/whatslab17/src/App.css
+++ b/whatslab17/src/App.css
@@ -3,7 +3,6 @@
}
.App-header {
background-image: url('https://img.ibxk.com.br///2016/09/13/13162448904561.jpg?w=1200&h=675&mode=crop&scale=both');
- /* min-height: 100vh; */
display: flex;
flex-direction: column;
align-items: center;
@@ -16,8 +15,6 @@
background-image: url('https://i.pinimg.com/originals/62/40/b6/6240b66d5c50c8661eee78b439a7d33c.jpg');
display: flex;
flex-direction:column;
- align-items: center;
- justify-content: center;
flex-grow: 1;
}
@@ -38,8 +35,4 @@
flex-grow: 1;
border-left: 50px;
-}
-
-.Chat-body {
- flex-grow: 2;
}
\ No newline at end of file
diff --git a/whatslab17/src/App.js b/whatslab17/src/App.js
index fe1669c..e6ef25d 100644
--- a/whatslab17/src/App.js
+++ b/whatslab17/src/App.js
@@ -10,7 +10,6 @@ function App() {
-
);
diff --git a/whatslab17/src/Components/Mensagens.js b/whatslab17/src/Components/Mensagens.js
index 782b885..3685237 100644
--- a/whatslab17/src/Components/Mensagens.js
+++ b/whatslab17/src/Components/Mensagens.js
@@ -5,11 +5,21 @@ const Caixa = styled.div`
display: flex;
flex-direction: row;
align-items: center;
- justify-content: center;
+ justify-content: left;
border: 5px solid gray;
margin-bottom: 10px;
- width: 100vw;
-
+ width: auto;
+ background-color: white
+`
+const CaixaEu = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: right;
+ justify-content: right;
+ border: 5px solid gray;
+ margin-bottom: 10px;
+ width: auto;
+ background-color: #DDF7C8
`
const Foto = styled.img`
@@ -18,48 +28,107 @@ const Foto = styled.img`
border-radius: 50%;
`
+
class Mensagens extends React.Component {
state = {
+ NomeRemetente : "",
+ Conteudo : "",
mensagens: [
{
remetente: "Amigo",
conteudo: 'Oi, como você está?',
- foto: 'https://picsum.photos/200/150'
+ foto: 'https://picsum.photos/200/150',
+ id: 0,
},
{
remetente: "Mãe",
conteudo: 'Não escquece de almoçar',
- foto: 'https://picsum.photos/200/100'
+ foto: 'https://picsum.photos/200/100',
+ id: 1,
},
{
remetente: "Namorada",
conteudo: 'Amor, tô grávida',
- foto: 'https://picsum.photos/200/200'
+ foto: 'https://picsum.photos/200/200',
+ id: 2,
},
{
remetente: "Amigo da Onça",
conteudo: 'Ei, quer comprar um carro semi-novo?',
- foto: 'https://picsum.photos/100/150'
+ foto: 'https://picsum.photos/100/150',
+ id: 3,
},
{
remetente: "Médico",
conteudo: 'Tenho más notícias',
- foto: 'https://picsum.photos/100/180'
+ foto: 'https://picsum.photos/100/180',
+ id: 4,
},
+ {
+ remetente: "eu",
+ conteudo: 'Conta',
+ foto: 'https://img.ibxk.com.br/2017/06/22/22100428046161.jpg?w=1200&h=675&mode=crop&scale=both',
+ id: 5,
+ },
+
]
};
+ enviar = () => {
+ const mensagem = {
+ remetente: this.state.NomeRemetente,
+ conteudo: this.state.Conteudo,
+ id: this.state.mensagens.length,
+ foto: 'https://picsum.photos/100/'+this.state.mensagens.length}
+ this.setState({Conteudo : ""})
+ this.setState({NomeRemetente : ""});
+ const novaMensagem = [...this.state.mensagens, mensagem];
+ this.setState({mensagens : novaMensagem})
+
+ };
+
+ onChangeNomeRemetente = (event) => {
+ this.setState({ NomeRemetente : event.target.value });
+ };
+
+ onChangeConteudo = (event) => {
+ this.setState({ Conteudo : event.target.value });
+ };
+
+ onKeyUp = (event) => {
+ if (event.charCode === 13) {
+ this.enviar();
+ }
+ }
+
+ onClickRemover = (id) => {
+ const novoArray = this.state.mensagens.filter((mensagem) => {
+ return mensagem.id !== id;
+ });
+ this.setState({ mensagens: novoArray });
+ };
+
+
render() {
let listaMensagens = this.state.mensagens.map((mensagens) => {
+ if(mensagens.remetente === "eu"){
+ return (
+ this.onClickRemover(mensagens.id)}>
+ {mensagens.conteudo}
+
+
+ )
+ }
+
return (
-
+ this.onClickRemover(mensagens.id)}>
{mensagens.remetente}:
{mensagens.conteudo}
@@ -70,6 +139,19 @@ class Mensagens extends React.Component {
return (