Mockando dados para criação de interface
Tags: react, javascript
Published: 2021-01-04 12:48:07

Quando vou desenvolver uma nova tela para aplicação, nem sempre os dados vindo da API estão disponíveis. Por algumas vezes é necessário aguardar que a API esteja pronta para receber essas informações.
Então, para criar a interface enquanto aguardo a API ficar pronta, posso utilizar dados mockados no lugar dos dados reais. Assim, quando o backend me der um "ok", a interface já estará apta para receber e manipular tais informações.

É importante entender que o termo "mock" se refere a objetos que simulam dados vindos da API, ou seja, são objetos customizados que serão criados com a intenção de simular dados reais. Eles também são muito utilizados para testes automatizados.

#Vamos codar

Para um exemplo usando dados mockados, vou criar uma listagem de usuários exibindo o nome.

Primeiramente criei esses dados mockados que irão simular o que receberei da API.

```javascript
const USUARIOS = [
  {
    id: 1,
    nome: 'teste1'
  },
  {
    id: 2,
    nome: 'teste2'
  },
  {
    id: 3,
    nome: 'teste3'
  },
  {
    id: 4,
    nome: 'teste4'
  },
  {
    id: 5,
    nome: 'teste5'
  }
]
```
Agora criarei um [estado](https://pt-br.reactjs.org/docs/hooks-state.html) na minha aplicação onde ficará armazenado esses usuários, e também criei um estado que irá controlar se os dados estão sendo carregados.

```javascript
const [usuarios, setUsuarios] = useState([])
const [loading, setLoading] = useState(false)
```
Como toda requisição à API custa um determinado tempo, assim que é chamada a função eu altero o estado de loading para verdadeiro, informando que os dados estão sendo carregados. Após receber da API, mudo o estado de loading para falso, garantindo que o carregamento parou e já possuo os dados. Para simular esse tempo de espera da API coloquei a função dentro de um [setTimeout](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals).

```react
function getUsuarios() {
    setLoading(true)

    setTimeout(() => {
      setUsuarios(USUARIOS)
      setLoading(false)
    }, 1000)
  }
```

Então para exibir esses dados, estou colocando eles dentro de uma [tabela](https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Tables), e verifico se o estado de loading está verdadeiro, se estiver exibo a informação que está carregando, se não, é porque ja fiz a requisição e ja possuo os dados, podendo assim exibir.

```javascript
return (
    <div>
      <table border='1' >
        <thead>
          <tr>
            <th>Id</th>
            <th>Nome</th>
          </tr>
        </thead>
        <tbody>
          {loading ?
            <span>carregando...</span>
            :
            usuarios.map(usuario => (
              <tr key={usuario.id}>
                <td>{usuario.id}</td>
                <td>{usuario.nome}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    </div>
  )
```

#JSON SERVER
Outra maneira que podemos mockar dados, chegando mais perto do que seria os dados reais de que iremos utilizar na aplicação, é usando a biblioteca json-server, que serve exatamente para criar uma API Rest totalmente falsa.
([https://github.com/typicode/json-server](https://github.com/typicode/json-server))

Para iniciar vou primeiramente instalar o json-server
`npm install -g json-server`

Agora irei criar um arquivo `db.json` que seria os dados em que irei receber
```javascript
{
    "usuarios":[
        {"id": 1, "nome": "teste1"},
        {"id": 2, "nome": "teste2"},
        {"id": 3, "nome": "teste3"},
        {"id": 4, "nome": "teste4"},
        {"id": 5, "nome": "teste5"}
    ]
}
```

E iniciarei o servidor, na porta 3333, tendo assim a api em execução na url http://localhost:3333/usuarios.
`json-server --watch db.json --port 3333`

Agora voltando para a aplicação, vou instalar a biblioteca [axios](https://github.com/axios/axios) para fazer as requisições.

Utilizando npm
`npm install axios`

Utilizando yarn
`yarn add axios`

E a função que irá buscar os usuários da API, irá fazer a requisição a minha api do json-server, fazendo com que quando a API real estiver pronta, basta apenas trocar pela url certa, obtendo os dados verdadeiros.

```javascript
async function getUsuarios() {
    setLoading(true)

    const response = (await Axios.get('http://localhost:3333/usuarios')).data

    setUsuarios(response)
    setLoading(false)
  }
```

Link para o código completo: https://github.com/alanflpns/mocking-data-in-interface