# Session:MonkChat
**Nome:** Patricia Oliveira Paulino
**Número:** 37
**Informatica:** INFO D

### INDEX DA API

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

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



app.post('/chat', async (req, resp) => {
    try {
        let chat = req.body;

        if (!chat.mensagem || chat.mensagem == ''){
            return resp.send({erro: 'O campo mensagem é obrigatório'})
        }
        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 mensagem = {
            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(mensagem);
        resp.send(r);
        
    } catch (e) {
        resp.send({erro: 'Deu erro na mensagem'});
        console.log(e.toString());
    }
});


app.get('/chat/:salaId', async (req, resp) => {
    try {

        let consult = await db.tb_sala.findOne({
            where: {nm_sala:req.params.salaId}
        })
        let mensagens = await
            db.tb_chat.findAll({
                where: {
                    id_sala: consult.id_sala,
                },
                order: [['id_chat', 'desc']],
                include: ['tb_usuario', 'tb_sala'],
            });
    
        resp.send(mensagens);
    } catch (e) {
        resp.send({erros: "Deu erro na sala"});
        resp.send(e.toString())
    }
})

app.get ('/usuario', async (req,resp) => {
    let usuarios = await db.tb_usuario.findAll();
    resp.send(usuarios);
})

app.post('/usuario', async (req , resp) =>{
    let usuario = req.body;

    let usuarioInserir = {
        nm_usuario: usuario.nome
    }
    let e = await db.tb_usuario.create(usuarioInserir);
    resp.send(e);
})

app.get ('/sala', async (req,resp) => {
    let salas = await db.tb_sala.findAll();
    resp.send(salas);
})

app.post('/sala', async (req,resp) =>{

 try{
     let sala = req.body;
     let criarSala = {
    nm_sala: sala.nome,
    bt_ativo: true
    };

 let resposta = await db.tb_sala.create(criarSala);
 resp.send(resposta);
 }
 catch (e){
     console.log(e.toString());
 }

})

app.delete('/usuario' , async (req,resp) => {

    let id = req.query.id;

    let exclu = await db.tb_usuario.destroy({where: {id_usuario:id}})

    resp.sendStatus(200);
})

app.put('/usuario', async (req,resp)=>{

    let id =req.query.id;
    let nome = req.query.nome;

    let r = await db.tb_usuario.update ({nm_usuario:nome}, {where: {id_usuario: id} } )

    resp.sendStatus(200);

})


app.delete('/sala' , async (req,resp) => {

    let id = req.query.id;

    let exclusa = await db.tb_sala.destroy({where: {id_sala:id}})

    resp.sendStatus(200);
})


app.put('/sala', async (req,resp)=>{

    let id =   req.query.id;
    let nome = req.body.nome;
    let bt = req.body.bt;

    let r = await db.tb_sala.update ({nm_sala:nome}, {where: {id_sala:id} } )

    resp.sendStatus(200);

})



app.listen(process.env.PORT,
           x => console.log(`>> Server up at port ${process.env.PORT}`))

### SERVICES/API

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 inserirMensagem(nomeSala, nomeUsuario, mensagem) {
        let chat = {
            sala: {
                nome: nomeSala
            },
            usuario: {
                nome: nomeUsuario
            },
            mensagem: mensagem
        }
        let r = await api.post(`/chat`, chat);
        return r.data;
    }
    async criarSala(nomeSala) {
        let criar = {
            nm_sala: nomeSala,
            bt_disponivel: true
        }
        let r1 = await api.post(`/sala`, criar);
        return r1.data;
    }

    async criarUsuario(nomeUsuario) {
        let criarUSU = {
            nm_usuario: nomeUsuario
        }
        let r2 = await api.post(`/usuario`, criarUSU);
        return r2.data;
    }
}
;

### PAGES/CONTEUDO

import { ContainerConteudo } from './conteudo.styled'
import { ChatButton, ChatInput, ChatTextArea } from '../../components/outros/inputs'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useState} from 'react';

import React, {useRef} from 'react'
import LoadingBar from 'react-top-loading-bar'

import Api from '../../service/api';
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 loading = useRef (null);


    const atualizar = async () => {
        loading.current.continuousStart();
        const mensagens = await api.listarMensagens(sala);
        console.log(mensagens);
        setChat(mensagens)
        loading.current.complete();
    }

    const enviarMensagem = async () => {
        const r = await api.inserirMensagem(sala, usu, msg);
        console.log(r);

        if(!r.erro)
        toast.dark('🚀Mensagem enviada com sucesso!');


        else
        toast.error(`❌ ${r.erro}`)

        await atualizar();
    }
    
    const criarSala = async () =>{
        const aa = await api.criarSala(sala);
        alert ('Sala criada com sucesso');
        console.log(aa);
    }

    const criarUsuario = async () =>{
        const usua = await api.criarUsuario(usu)
        alert('Usuario criado com sucesso')
        console.log(usua);
    }
 

    return (
        <ContainerConteudo>
            <ToastContainer/>
            <LoadingBar color="Black" ref={loading} height={6} loaderSpeed={100}/>
            <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 onClick={criarSala}> Criar </ChatButton>
                        <ChatButton onClick={criarUsuario}> 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>
                            <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>
            </div>
        </ContainerConteudo>
    )
}