# Api Inserir Mensagens | Linguagem de Programação
**Autor**: Vitório Trindade Santana
**Turma**: Informática C
**Número**: 50

[toc]

## Prints

### MonkChat

### VsCode

## Códigos

### Index.Js (Post)

app.post('/chat', async (req, resp) => {
    try {
        let chat = req.body;
    
        let sala = await db.tb_sala.findOne({ where: { nm_sala: chat.sala.nome }})
        let usu = await db.tb_usuario.findOne({ where: { nm_usuario: chat.usuario.nome }})

        let chatRecord = {
            id_sala: sala.id_sala,
            id_usuario: usu.id_usuario,
            ds_mensagem: chat.mensagem,
            dt_mensagem: new Date()
        }

        let r = await db.tb_chat.create(chatRecord);
        resp.send(r);
    } catch (e) {
        resp.send('Deu erro');
        console.log(e.toString());
    }
})

### Api.Js (Inserir Mensagens)

async inserirMensagens(nomeSala, nomeUsuario, mensagem) {
        let chat = {
            sala: { nome: nomeSala },
            usuario: { nome: nomeUsuario },
            mensagem: mensagem
        }

        let r = await api.post('/chat', chat);
        return r.data;
    }

### Conteudo.Js

export default function Conteudo() {
    const [chat, setChat] = useState([]);
    const [sala, setSala] = useState('');
    const [usu, setUsu] = useState('');
    const [msg, setMsg] = useState('')

    const atualizar = async () => {
        const mensagens = await api.listarMensagens(1);
        setChat(mensagens)
    }

    const enviarMensagem = async () => {
        const r = await api.inserirMensagens(sala, usu, msg);
        console.log(r);
        alert('Mensagem enviada com sucesso');

        await atualizar();
    }

    return (
        <ContainerConteudo>
            <div className="container-form">
                <div className="box-sala">
                    <div>
                        <div className="label">Sala</div>
                        <ChatInput value={sala} onChange={e => setSala(e.target.value)} />
                    </div>
                    <div>
                        <div className="label">Nick</div>
                        <ChatInput value={usu} onChange={e => setUsu(e.target.value)} />
                    </div>
                    <div>
                        <ChatButton> Criar </ChatButton>
                        <ChatButton> Entrar </ChatButton>
                    </div>
                </div>
                <div className="box-mensagem">
                    <div className="label">Mensagem</div>
                    <ChatTextArea value={msg} onChange={e => setMsg(e.target.value)} />
                    <ChatButton onClick={enviarMensagem} className="btn-enviar"> Enviar </ChatButton>
                </div>
            </div>
            
            <div className="container-chat">
                <img onClick={atualizar} className="chat-atualizar" src="/assets/images/atualizar.png" alt="" />
                <div className="chat">
                    
                    {chat.map(x => 
                       <div className="chat-message">
                            <div>({new Date(x.dt_mensagem.replace('Z', '')).toLocaleTimeString()})</div>
                            <div><b>{x.tb_usuario.nm_nome}</b> fala para <b>Todos</b>:</div>
                            <div> {x.ds_mensagem} </div>
                       </div>
                    )}   

                </div>
            </div>
        </ContainerConteudo>
    )
}