# ENTREGA MONKCHAT

## API (INDEX.JS)

import db from './db.js';
import express from 'express'
import cors from 'cors'
const app = express();
app.use(cors());
app.use(express.json());

//inicio das apis, API DE CHAT

app.get('/chat/:salaId', async (req, resp) => {
    try {
        let consulta = await db.tb_sala.findOne({where:{nm_sala: req.params.salaId}})

        let mensagens = await
            db.tb_chat.findAll({
                where: {
                    id_sala: consulta.id_sala
                },
                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 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 DE SALA

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

        let salaRecord = {
            nm_sala: sala.sala.nome,
            bt_ativo: sala.ativo.ativo 
        }

        let r = await db.tb_sala.create(salaRecord);
        resp.send(r);

    } catch (e) {
        resp.send('Deu erro sala');
        console.log(e.toString());
    }
})

app.get('/sala', async (req, resp) => {
    try {
        let z = await
            db.tb_sala.findAll();
        resp.send(z);
    } catch (e) {
        resp.send(e.toString())
    }
})

//API DE USUARIO

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

        let usuRecord = {
            nm_usuario: usu.nm_usuario
        }

        let r = await db.tb_usuario.create(usuRecord);
        resp.send(r);

    } catch (e) {
        resp.send('Deu erro usu');
        console.log(e.toString());
    }
})

app.get('/usuario', async (req, resp) => {
    try {
        let z = await
            db.tb_usuario.findAll();
        resp.send(z);
    } catch (e) {
        resp.send(e.toString())
    }
})


//PUT AI
app.put ("/usuario", async (req, resp) => {
    try {
        let id = req.query.id;
        let nome = req.body.nome;

        let q = await db.tb_usuario.update ({ nm_usuario: nome}, {where: {id_usuario: id }})
        resp.sendStatus (200);} catch (e){
        resp.send("deu erro no put")
            console.log(e.toString())
        }
})

app.put('/sala', async (req, resp) => {
    let id = req.query.id;
    let nome = req.body.nome;
    let r = await
    db.tb_sala.update({
      nm_sala: nome 
  }, {
    where: { id_sala: id}
  })
  resp.sendStatus(200);
  })

// DELETE AI

app.delete("/usuario", async ( req, resp) => {
    try {
        let id = req.query.id 
        let x = await db.tb_usuario.destroy({ where: {id_usuario: id}})
        resp.sendStatus(200);} catch (e) {
            resp.send("deu erro no delete")
            console.log(e.toString());
        }
})


//BGL Q FALA Q O SERVER SUBIU

app.listen(process.env.PORT,
    x => console.log(`Server subiu sabe aonde? Lá na ${process.env.PORT}`))

## SERVICES (api.js & conteudo.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 inserirMensagem(nomeSala, nomeUsuario, mensagem){
    let chatJSON = {
        sala: {nome: nomeSala},
        usuario: {nome: nomeUsuario},
        mensagem: mensagem
    }
    let r = await api.post('./chat', chatJSON)
    return r.data;
}

async inserirSala(nomeSala, salaAtiva){

    let salaJSON = {
        sala: {nome: nomeSala},
        ativo: {ativo: salaAtiva}
    }

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


async inserirUsu (nomeUsu) {

    let usuJSON = {
       nm_usuario: nomeUsu,
    };

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







//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(sala);
        setChat(mensagens)
    }
const enviarMensagem = async () => {
    const r = await api.inserirMensagem(sala, usu, msg);
    console.log(r);
    alert('Mensagem enviada com sucesso!');

    await atualizar();
}

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

const criarUsu = async () => {
    const r = await api.inserirUsu(usu);
    console.log(r);
    alert('Usuário criado 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 onClick = {criarSala}> Criar </ChatButton>
                        <ChatButton onClick = {criarUsu}> 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>
    )
}

## PRINT MONKCHAT FUNCIONANDO