# Programação FullStack Criar e Entrar

**Autor**: Elias de Freitas Cavalcante
**Número**: 12
**Turma**: INFO C

**REACT**

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);
        console.log(mensagens);
        setChat(mensagens)
    }

    const enviarMensagem = async () => {
        const r = await api.inserirMensagem(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>
                            <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>
    )
}

**REACT TELA**

import styled from 'styled-components'


const ContainerConteudo = styled.div`
    display: flex;
    flex-direction: row;
    background: rgba(0, 0, 0, 0.12);

    padding: 3em 5em;

    .container-form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        padding: 2em;
    }

    .box-sala {
        display: flex;
        flex-direction: column;
    }

    .box-sala > div {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        margin: .2em;
    }

    .label {
        font-weight: 700;
        font-size: 1.2em;
        width: 4em;
    }


    .box-mensagem {
        display: flex;
        flex-direction: column;
    }

    .btn-enviar {
        align-self: flex-end;
    }



    .container-chat {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        padding: 0em 2em 2em 2em;
        height: 28em;
    }

    .chat-atualizar {
        width: 1em;
        align-self: flex-end;
        margin: .4em;
        cursor: pointer;
    }

    .chat-atualizar:hover {
        transform: rotate(360deg);
        transition: 0.5s;
    }

    .chat {
        display: flex;
        flex-direction: column;
        background: rgba(192, 65, 224, 0.19);
        border-radius: 3px;

        padding: 1.5em;
        height: 100%;

        overflow-y: auto;
    }

    .chat::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #3E006F;
    }

    .chat::-webkit-scrollbar
    {
        width: 7px;
        background-color: #3E006F;
        border-radius: 10px;
    }

    .chat::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #CBCBCB;
    }




    .chat-message {
        display: flex;
        flex-direction: row;

        font-size: .9em;
        margin: .4em .2em;
    }

    .chat-message > div {
        margin: 0em .2em;
    }


    @media (max-width: 400px) {
        flex-direction: column;
        padding: .2em;
        
        .container-form       { padding: 1em; justify-content: flex-start; }
        .container-form > div { margin-bottom: 2em; }
        .box-sala > div                 { justify-content: flex-start; }
        .box-sala > div:nth-of-type(3)  { flex-direction: column; }
        
        .chat            { overflow-y: unset; height: auto; }
        .container-chat  { height: auto; padding: 1em; }
        .chat-message    { flex-direction: column; margin: 1em 0em }
        
        input  { width: 100%; }
        button { width: 100%; border-radius: .3em; height: 2.5em; margin: .3em 0em; }
        
        .label { width: 4em; }
    }

`

export { ContainerConteudo }

**API**

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;
  }
}


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;
  }
}

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;
  }
}