# 2° Etapa MonkChat

> **Aluna:** Patricia Oliveira Paulino
> **Número:** 37

[toc]

## MonkChat em ReactJS

### src/componente/index.js

import { ContainerCabecalho } from './styled'

export default function Cabecalho() {
    return(
       <ContainerCabecalho>
            <div class="logo"> <img src="/assets/img/logo.png" alt="" /></div>
            <div class="linha"><img src="/assets/img/linhadologo.png" alt="" /> </div>
            <div class="nome">MonkChat</div>
       </ContainerCabecalho>
    )
}

### src/componente/styled.js

import styled from "styled-components"


const ContainerCabecalho = styled.div`
    display: flex;
    flex-direction: row;
    align-items: center;

    .nome {
        font-size: 36px;
        font-family: fonte2;
        color: white;
    }

    .linha {
        margin: 0px 15px;
    }
`

export { ContainerCabecalho }

### src/pages/monkChat/index.js

import { Container, Conteudo, Botoes } from './styled'
import Cabecalho from "../../componente/cabecalho"

export default function MonkChat() {
    return(
        <Container>
            <Cabecalho />

            <Conteudo>
                <div className="parte1">
                    <div className="criarouentrar">
                        <div className="pt1">
                            <div className="sala">Sala:</div>
                            <input maxlength="20"/>
                        </div>

                        <div className="pt2">
                            <div className="nick">Nick:</div>
                            <input className="input" maxlength="15" />
                        </div>

                        <div className="pt3">
                            <Botoes>Criar</Botoes>
                            <Botoes>Entrar</Botoes>
                        </div>
                    </div>

                    <div className="enviarmensagem">
                        <div className="texto">Mensagem:</div>
                        <textarea></textarea>
                        <div className="bot"><Botoes>Enviar</Botoes></div>
                    </div>
                </div>
            </Conteudo>

        </Container>
    )
}

### src/pages/monkChat/styled.js

    import styled from "styled-components";

    const Container = styled.div`
        display: flex;
        flex-direction: row;
        margin: 34px 30px 28px 30px;
        padding: 0px 20px 0px 20px;
        background-color: rgba(0, 0, 0, 0.12);
      }

      .parte1 {
        display: flex;
        flex-direction: column;
        margin: 50px 40px;
        justify-content: space-between;
      }

      .criarouentrar {
        margin-bottom: 65px;
      }

      .pt1 {
        display: flex;
        flex-direction: row;
        color: white;
      }

      .sala {
        margin-top: 2px;
        margin-right: 11px;
        font-size: 18px;
        font-family: fonte2;
        color: white;
      }

      .pt2 {
        display: flex;
        flex-direction: row;
        color: white;
        margin: 10px 0px;
      }

      .nick {
        margin-right: 8px;
        font-size: 18px;
        font-family: fonte2;
        color: white;
      }

      .pt3 {
        margin-left: 48px;
      }

      .enviarmensagem {
        color: white;
      }

      .enviarmensagem input {
        border-radius: 5px;
        border: white;
      }

      .texto {
        font-size: 18px;
        font-family: fonte2;
        color: white;
        margin-bottom: 10px;
      }

      .bot {
        margin-left: 111px;
        margin-top: 10px;
      }
    `

    const Botoes = styled.button`
      font-weight: 700;

      color: #0000;
      background-color: #508B4BF;

      border: none;
      border-radius: 20px;

      cursor: pointer;

      font-size: 16px;
      font-family: fonte2;
    `


    export { Container, Conteudo, Botoes }

### src/index.js

import React from 'react';
import reactDom from 'react-dom';
import './index.css';

import Routes from './routes';


reactDom.render(
    <React.StrictMode>
        <Routes />
    </React.StrictMode>,
    document.getElementById('root')
);

### src/router.js

import { BrowserRouter, Switch, Route } from 'react-router-dom'
import MonkChat from './pages/monkchat' 

export default function Routes () {
    return(
        <BrowserRouter>
            <Switch>
                <Route path="/" exact={true} component={MonkChat} />
            </Switch>
        </BrowserRouter>
    )
}

---
---
---

## Caso de uso


>**Criar Sala**
>Descrição: Tendo colocado o nome de usuário e o nome da sala (ambos válidos), o usuário poderá criar uma sala e após isso convidar mais pessoas para entrar na sua sala e interagir com eles no app através das mensagens.
>Regras: 1- Não poderá ser criada duas ou mais salas com o mesmo nome; 2- É obrigatório o preenchimento dos campos "sala" e "nick"; 3- O nome da sala tem que ter pelo menos 5 caracteres e no máximo 20; 4- O máximo de caracteres para o nome do usuário é de 20.
>Evento: Depois de preenchido os campos de sala e nick, o usuário irá clicar no botão de criar a sala.

>**Entrar em uma Sala**
>Descrição: Tendo o nome de uma sala já criada o usuário poderá entrar na mesma preenchendo corretamente os campos de nick e sala, preenchendo o da sala com o nome da que o mesmo deseja entrar e interagir.
>Regras: 1- Não é possível entrar em uma sala que não foi criada; 2- Não é possível entrar com o mesmo nick de alguém que já está na sala desejada; 3- O nome da sala tem que ter pelo menos 5 caracteres e no máximo 20; 4- É obrigatório o preenchimento dos campos "sala" e "nick"; 5- O máximo de caracteres para o nome do usuário é de 20.
>Evento: Tendo preenchido corretamente os campos de sala e nick, o usuário precisa apenas clicar no botão de entrar.

>**Enviar uma mensagem**
>Descrição: Após digitar a sua mensagem na área para a digitação o usuário poderá enviar a sua mensagem para os outros integrantes que estão na sala e assim interagir com eles.
>Regras: 1- Não poderá ser enviado uma mensagem com menos de 1 caractere; 2 - A mensagem não poderá ter mais de 150 caracteres; 3 - Um usuário não pode enviar muitas mensagens em um curto período de tempo;
>Evento: Tendo digitado na área de digitação, basta apenas clicar no botão de enviar.

>**Buscar mensagens**
>Descrição: A partir dessa funcionalidade o usuário poderá carregar as mensagens que foram enviadas na sala por outros usuários, podendo assim interagir com eles e ver as novas mensagens.
>Regras: 1- Não poderá carregar as mensagens no mesmo instante após essa funcionalidade tiver sido usada, terá um tempo de intervalo para o uso da mesma.
>Evento: Clique no botão de recarregar as mensagens.

### Modelagem