# Monckchat

## API

### indexjs

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

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

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'],
                order:[['id_chat', 'DESC']]
             });
        resp.send(mensagens);
    } catch (e) {
        resp.send(e.toString())
    }
})

app.post('/chat', async (req, resp) => {
    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);
});

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

### dbjs

import initdb from './models/init-models.js'

import Sequelize from 'sequelize';
const sequelize = new Sequelize(
    '5MnijCqZkf',
    '5MnijCqZkf',
    'cXNvMIr556', {
     host: 'remotemysql.com',
     dialect: 'mysql',
     logging: false
});

const db = initdb(sequelize);
export default db;

### initmodelsjs

import _sequelize from "sequelize";
const DataTypes = _sequelize.DataTypes;
import _tb_chat from  "./tb_chat.js";
import _tb_sala from  "./tb_sala.js";
import _tb_usuario from  "./tb_usuario.js";

export default function initModels(sequelize) {
  var tb_chat = _tb_chat.init(sequelize, DataTypes);
  var tb_sala = _tb_sala.init(sequelize, DataTypes);
  var tb_usuario = _tb_usuario.init(sequelize, DataTypes);

  tb_chat.belongsTo(tb_sala, { foreignKey: "id_sala"});
  tb_sala.hasMany(tb_chat, { as: "tb_chats", foreignKey: "id_sala"});
  tb_chat.belongsTo(tb_usuario, { foreignKey: "id_usuario"});
  tb_usuario.hasMany(tb_chat, { as: "tb_chats", foreignKey: "id_usuario"});

  return {
    tb_chat,
    tb_sala,
    tb_usuario,
  };
}

### tb_chat

import _sequelize from 'sequelize';
const { Model, Sequelize } = _sequelize;

export default class tb_chat extends Model {
  static init(sequelize, DataTypes) {
  super.init({
    id_chat: {
      autoIncrement: true,
      type: DataTypes.INTEGER,
      allowNull: false,
      primaryKey: true
    },
    id_sala: {
      type: DataTypes.INTEGER,
      allowNull: true,
      references: {
        model: 'tb_sala',
        key: 'id_sala'
      }
    },
    id_usuario: {
      type: DataTypes.INTEGER,
      allowNull: true,
      references: {
        model: 'tb_usuario',
        key: 'id_usuario'
      }
    },
    ds_mensagem: {
      type: DataTypes.STRING(100),
      allowNull: true
    },
    dt_mensagem: {
      type: DataTypes.DATE,
      allowNull: true
    }
  }, {
    sequelize,
    tableName: 'tb_chat',
    timestamps: false,
    indexes: [
      {
        name: "PRIMARY",
        unique: true,
        using: "BTREE",
        fields: [
          { name: "id_chat" },
        ]
      },
      {
        name: "id_sala",
        using: "BTREE",
        fields: [
          { name: "id_sala" },
        ]
      },
      {
        name: "id_usuario",
        using: "BTREE",
        fields: [
          { name: "id_usuario" },
        ]
      },
    ]
  });
  return tb_chat;
  }
}

### tb_sala

import _sequelize from 'sequelize';
const { Model, Sequelize } = _sequelize;

export default class tb_sala extends Model {
  static init(sequelize, DataTypes) {
  super.init({
    id_sala: {
      autoIncrement: true,
      type: DataTypes.INTEGER,
      allowNull: false,
      primaryKey: true
    },
    nm_sala: {
      type: DataTypes.STRING(100),
      allowNull: true
    },
    bt_ativa: {
      type: DataTypes.BOOLEAN,
      allowNull: true
    }
  }, {
    sequelize,
    tableName: 'tb_sala',
    timestamps: false,
    indexes: [
      {
        name: "PRIMARY",
        unique: true,
        using: "BTREE",
        fields: [
          { name: "id_sala" },
        ]
      },
    ]
  });
  return tb_sala;
  }
}

### tb_usuario

import _sequelize from 'sequelize';
const { Model, Sequelize } = _sequelize;

export default class tb_usuario extends Model {
  static init(sequelize, DataTypes) {
  super.init({
    id_usuario: {
      autoIncrement: true,
      type: DataTypes.INTEGER,
      allowNull: false,
      primaryKey: true
    },
    nm_usuario: {
      type: DataTypes.STRING(100),
      allowNull: true
    }
  }, {
    sequelize,
    tableName: 'tb_usuario',
    timestamps: false,
    indexes: [
      {
        name: "PRIMARY",
        unique: true,
        using: "BTREE",
        fields: [
          { name: "id_usuario" },
        ]
      },
    ]
  });
  return tb_usuario;
  }
}

## REACT pages/monkchat

### conteudo.js

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

import { useState } from 'react';
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 atualizar = async () => {
        const mensagens = await api.listarMensagens(1);
        setChat(mensagens)
    }

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

## 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 inserirMensagem(nomeSala, nomeUsuario, mensagem) {
        let chatJSON = {
            sala: { nome: nomeSala },
            usuario: { nome: nomeUsuario },
            mensagem: mensagem
        }

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