Nesse desafio, foi desenvolvida mais uma aplicação, a GoRestaurant. Foi praticado o que foi aprendindo até agora no React.js junto com TypeScript, praticando o conceito de CRUD (Create, Read, Update, Delete).
Essa é uma aplicação que se conecta a uma fake API, que lida com pratos de refeições, permitindo a criação, exibição, remoção e atualização desses pratos.
Deve-se primeiramente navegar até a pasta criada e executar o comando yarn
no terminal para instalar todas as dependências.
Antes de tudo, para que existam os dados a serem exibidos em tela, existe um arquivo que será utilizado como fake API, para prover esses dados.
Para isso, está instalada no package.json uma dependência chamada json-server
, e há um arquivo chamado server.json
que contém os dados para uma rota /foods
. Para executar esse servidor basta executar o seguinte comando:
yarn json-server server.json -p 3333
Essa aplicação possui um layout que você pode seguir para conseguir visualizar o seu funcionamento.
O layout pode ser acessado através da página do Figma, no seguinte link.
Você precisará uma conta (gratuita) no Figma pra inspecionar o layout e obter detalhes de cores, tamanhos, etc.
Deve-se verificar os arquivos da pasta src
e completar onde não possui código, com o código para atingir os objetivos de cada rota.
-
Listar os pratos de comida da API
: A páginaDashboard
deve ser capaz de exibir uma listagem, com o campotitle
,value
, edescription
eavailable
de todos os pratos de comida que estão cadastrados na API. -
Adicionar novos pratos de comida na API
: Na página Dashboard deve-se abrir um modal ao clicar no botãoNovo Prato
no Header. Esse modal deve ser responsável por cadastrar uma novafood
passando os camposimage
,name
,description
,value
. -
Editar pratos de comida da API
: Na página Dashboard deve-se abrir um modal ao clicar no botãoEditar Prato
. Esse modal deve ser responsável por editar umafood
passando os camposimage
,name
,description
,value
. -
Remover pratos de comida da API
: Na página Dashboard deve-se remover um prato de comida ao clicar no botão com ícone de lixeira no componente Food. -
Alterar disponibilidade dos pratos de comida da API
: Na página Dashboard deve-se alterar a disponibilidade de um prato de comida ao clicar no switch que é controlado pelo valor deavailable
.
Em cada teste, há uma breve descrição no que a aplicação deve cumprir para que o teste passe.
Para esse desafio, existem os seguintes testes:
should be able to list all the food plates from your api
: Para que esse teste passe, a aplicação deve permitir que sejam listados, todos os pratos de comidas que são retornados da fake API;
-
should be able to add a new food plate
: Para que esse teste passe, deve-se permitir que um prato de comida seja adicionado à API, adicionando-o também à listagem; -
should be able to edit a food plate
: Para que esse teste passe, deve-se permitir que um prato de comida seja editado na API, editando-o também na listagem; -
should be able to remove a food plate
: Para que esse teste passe, deve-se permitir que um prato de comida seja removido da API, removendo-o também da listagem; -
should be able to update the availability of a food plate
: Para que esse teste passe, deve-se permitir que o status do prato de comida seja alterado entreDisponível
eIndisponível
.