# SESSION MONKCHAT | LINGUAGEM DE PROGRAMAÇÃO
AUTHOR: IGOR LIMA CHARLES
GRADE: INFORMÁTICA A
N°: 18

## ESTRUTURAÇÃO

## API > SRC > INDEX.JS

import db from './db.js';
import express from 'express'
import cors from 'cors'

const app = express();
app.use(cors());

app.get('/chat/:salaId', async (req, resp) => {
    try {
        let mensagens = await
             db.tb_chat.findAll({
                    where: {
                    id_sala: req.params.salaId
                    },
        include: ['tb_usuario', 'tb_sala'],
    });

        resp.send(mensagens);
    } catch (e) {
        resp.send(e.toString())
    }
    })

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 chat = {
        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(chat)

    resp.send('')
} catch (e) {
    resp.send('Deu erro');
}
});

app.listen(process.env.PORT, x => console.log(`Subiu, meu filho ${process.env.PORT}`))

## REACTJS > SRC > SERVICES > API.JS

import axios from 'axios'

const api = axios.create({
    baseURL: 'http://localhost:3030'
})

export default class Api {
    async listarMensagens(idSala) {
        let r = await api.get(`/chat/${idSala}`);
        return r.data
    }

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

    }

    let r = await api.post('/chat', chatJSON)

    return r.data
}}

## REACTJS > SRC > MONKCHAT > CONTEUDO.JS

import { ContainerConteudo } from './conteudo.styled'
import { ChatButton, ChatInput, ChatTextArea } from '../../components/outros/inputs'

import Api from '../../services/api'
import { useState } from 'react'
const api = new Api ()

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!');
    }

    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_usuario}</b> fala para <b>Todos</b>:</div>
                            <div> {x.ds_mensagem} </div>
                        </div>
                    )}
                    
            
                </div>
            </div>
        </ContainerConteudo>
    )
}