Você deve utilizar o BrowserRouter
pra criar as rotas da sua aplicação e cada rota deverá renderizar um componente específico. Crie cada componente dentro da pasta src/pages
, conforme o indicado abaixo:
Rota /
- A rota
/
deve renderizar um componente chamadoLogin
. Este componente deve ter umadiv
com o atributodata-testid="page-login"
que envolva todo seu conteúdo;
Rota /search
- A rota
/search
deve renderizar um componente chamadoSearch
. Este componente deve ter umadiv
que envolva todo seu conteúdo e ter o atributodata-testid="page-search"
;
Rota /album/:id
- A rota
/album/:id
deve renderizar um componente chamadoAlbum
. Este componente deve ter umadiv
que envolva todo seu conteúdo e ter o atributodata-testid="page-album"
;
Rota /favorites
- A rota
/favorites
deve renderizar um componente chamadoFavorites
. Este componente deve ter umadiv
que envolva todo seu conteúdo e ter o atributodata-testid="page-favorites"
;
Rota /profile
- A rota
/profile
deve renderizar um componente chamadoProfile
. Este componente deve ter umadiv
que envolva todo seu conteúdo e ter o atributodata-testid="page-profile"
;
Rota /profile/edit
- A rota
/profile/edit
deve renderizar um componente chamadoProfileEdit
. Este componente deve ter umadiv
que envolva todo seu conteúdo e ter o atributodata-testid="page-profile-edit"
;
Para qualquer outra rota não mapeada
Para qualquer outra rota não mapeada, deve ser renderizado um componente chamado NotFound
. Este componente deve ter uma div
que envolva todo seu conteúdo e ter o atributo data-testid="page-not-found"
;
O que será verificado
-
A rota
/
é uma rota existente e que renderiza um componente com odata-testid
com valorpage-login
; -
A rota
/search
é uma rota existente e que renderiza um componente com odata-testid
com valorpage-search
; -
A rota
/album/:id
é uma rota existente e que renderiza um componente com odata-testid
com valorpage-album
; -
A rota
/favorites
é uma rota existente e que renderiza um componente com odata-testid
com valorpage-favorites
; -
A rota
/profile
é uma rota existente e que renderiza um componente com odata-testid
com valorpage-profile
; -
A rota
/profile/edit
é uma rota existente e que renderiza um componente com odata-testid
com valorpage-profile-edit
; -
Existe uma página para rotas não mapeadas e que renderiza um componente com o
data-testid
com valorpage-not-found
;
Dentro do componente Login
, que é renderizado na rota /
, crie um formulário para que a pessoa usuária se identifique com um nome:
-
Você deve criar um campo para que a pessoa usuária insira seu nome. Este campo deverá ter o atributo
data-testid="login-name-input"
. -
Crie um botão com o texto
Entrar
. Este botão deverá ter o atributodata-testid="login-submit-button"
. -
O botão para entrar só deve estar habilitado caso o nome digitado tenha 3 ou mais caracteres.
-
Ao clicar no botão
Entrar
, utilize a funçãocreateUser
dauserAPI
para salvar o nome digitado. A funçãocreateUser
espera receber como argumento um objeto com as informações da pessoa:
createUser({ name: "Nome digitado" });
💡 Obs: Você verá nos requisitos mais a frente que você poderá passar outras informações para a createUser
, mas não se preocupe com isso agora. Por enquanto você pode passar somente um objeto com a propriedade name
.
-
Enquanto a informação da pessoa usuária é salva, uma mensagem com o texto
Carregando...
deve aparecer na tela. 💡 Dica: Você precisará dessa mensagem várias vezes no futuro, então é uma boa ideia criar um componente para ela 😉 -
Após a informação ter sido salva, faça um redirect para a rota
/search
.
O que será verificado
-
Ao navegar para a rota
/
, o input e o botão especificados estão presentes; -
O botão só é habilitado se o input de nome tiver 3 ou mais caracteres;
-
Ao clicar no botão habilitado, a função
createUser
dauserAPI
é chamada; -
Ao clicar no botão, a mensagem
Carregando...
é exibida e após a resposta da API acontece o redirecionamento para a rota/search
.
Crie um componente chamado Header
, dentro da pasta src/components
:
-
Crie esse componente com a tag
header
envolvendo todo seu conteúdo e com o atributodata-testid="header-component"
; -
Renderize o componente de cabeçalho nas páginas das rotas
/search
,/album/:id
,/favorites
,/profile
e/profile/edit
; -
Utilize a função
getUser
dauserAPI
para recuperar o nome da pessoa logada e exiba essa informação na tela. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="header-user-name"
. -
Enquanto estiver aguardando a resposta da
getUser
, exiba apenas a mensagem deCarregando...
.
O que será verificado
-
O componente
Header
é renderizado na página/search
; -
O componente
Header
é renderizado na página/album/:id
; -
O componente
Header
é renderizado na página/favorites
; -
O componente
Header
é renderizado na página/profile
; -
O componente
Header
é renderizado na página/profile/edit
; -
A função
getUser
é chamada ao renderizar o componente; -
A mensagem de
Carregando...
é exibida ao renderizar o componente e é removida após o retorno da API; -
O nome da pessoa usuária está presente na tela após o retorno da API.
Crie o link que redireciona para a página de pesquisa:
- O link que redireciona para a página de pesquisa deve estar dentro do componente
Header
e precisa possuir o atributodata-testid="link-to-search"
.
Crie o link que redireciona para a página de músicas favoritas:
- O link que redireciona para a página de músicas favoritas deve estar dentro do componente
Header
e possuir o atributodata-testid="link-to-favorites"
.
Crie o link que redireciona para a página de exibição de perfil:
- O link que redireciona para a página de exibição de perfil deve estar dentro do componente
Header
e precisa possuir o atributodata-testid="link-to-profile"
.
O que será verificado
-
Os links de navegação são exibidos na página de pesquisa;
-
A navegação entre a página de pesquisa e a página de músicas favoritas ocorre corretamente;
-
A navegação entre a página de pesquisa e a página de exibição do perfil ocorre corretamente;
-
Os links de navegação são exibidos na página do álbum;
-
A navegação entre a página do álbum e a página de pesquisa ocorre corretamente;
-
A navegação entre a página do álbum e a página de músicas favoritas ocorre corretamente;
-
A navegação entre a página do álbum e a página de exibição do perfil ocorre corretamente;
-
Os links de navegação são exibidos na página de músicas favoritas;
-
A navegação entre a página de músicas favoritas e a página de pesquisa ocorre corretamente;
-
A navegação entre a página de músicas favoritas e a página de exibição perfil ocorre corretamente;
-
Os links de navegação são exibidos na página de exibição do perfil;
-
A navegação entre a página de exibição do perfil e a página de pesquisa ocorre corretamente;
-
A navegação entre a página de exibição do perfil e a página de músicas favoritas ocorre corretamente;
-
Os links de navegação são exibidos na página de edição do perfil;
-
A navegação entre a página de edição do perfil e a página de pesquisa ocorre corretamente;
-
A navegação entre a página de edição do perfil e a página de músicas favoritas ocorre corretamente;
-
A navegação entre a página de edição do perfil e a página de exibição do perfil ocorre corretamente.
Este formulário deve conter um input e um botão para que seja possível pesquisar os álbums de uma banda ou artista.
Crie o formulário dentro do componente Search
, que é renderizado na rota /search
:
-
Crie um campo para pessoa digitar o nome da banda ou artista a ser pesquisada. Esse campo deve ter o atributo
data-testid="search-artist-input"
. -
Crie um botão com o texto
Pesquisar
. Esse botão deve ter o atributodata-testid="search-artist-button"
. -
O botão só deve estar habilitado caso o nome do artista tenha 2 ou mais caracteres.
O que será verificado
-
Ao navegar para a rota
/search
, o input e o botão estão presentes na tela; -
O botão está habilitado somente se o input de nome tiver 2 ou mais caracteres.
Com a estrutura da tela de pesquisa criada, agora é hora de fazer uma requisição e receber a lista de álbums da banda ou artista pesquisada.
-
Ao clicar no botão de
Pesquisar
, limpe o valor do input e faça uma requisição utilizando a função do arquivosearchAlbumsAPIs.js
:-
💡 Lembre-se que essa função espera receber uma string com o nome da banda ou artista.
-
Enquanto aguarda a resposta da API, esconda o input e o botão de pesquisa e exiba a mensagem
Carregando...
na tela. -
Após receber a resposta da requisição exibir na tela o texto
Resultado de álbuns de: <artista>
, onde<artista>
é o nome que foi digitado no input.
-
-
Liste os álbuns retornados. A API irá retorna um array de objetos. Cada objeto terá a seguinte estrutura:
[ { artistId: 12, artistName: "Artist Name", collectionId: 123, collectionName: "Collection Name", collectionPrice: 12.25, artworkUrl100: "https://url-to-image", releaseDate: "2012-03-02T08:00:00Z", trackCount: 8, } ]
-
Ao listar os álbuns, crie um link em cada card para redirecionar para a página do álbum. Este link deve ter o atributo
data-testid={`link-to-album-${collectionId}`}
. Onde `collectionId` é o valor da propriedade de cada Álbum:- Este link deve redirecionar para a rota
/album/:id
, onde:id
é o valor da propriedadecollectionId
de cada Álbum da lista recebida pela API.
- Este link deve redirecionar para a rota
O que será verificado
-
Ao clicar em
pesquisar
, a requisição é feita usando asearchAlbumsAPI
; -
Ao clicar no botão, o texto
Resultado de álbuns de: <artista>
aparece na tela; -
Ao receber o retorno da API, os álbuns são listados na tela;
-
Caso a API não retorne nenhum álbum, a mensagem
Nenhum álbum foi encontrado
é exibida; -
Existe um link para cada álbum listado que redirecione para a rota
/album/:id
.
Agora que está tudo pronto, você poderá exibir a lista de músicas do álbum selecionado.
Crie a lista dentro do componente Album
, que é renderizado na rota /album/:id
:
-
Ao entrar na página, faça uma requisição utilizando a função
getMusics
do arquivomusicsAPI.js
. Lembre-se que essa função espera receber uma string com o id do álbum. -
Exiba o nome da banda ou artista na tela. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributo
data-testid="artist-name"
. -
Exiba o nome do álbum e nome da banda ou artista na tela. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributo
data-testid="album-name"
. -
Liste todas as músicas do álbum na tela. Para isso, crie um componente chamado
MusicCard
que deverá exibir o nome da música (propriedadetrackName
no objeto recebido pela API) e um player para tocar o preview da música (propriedadepreviewUrl
no objeto recebido pela API).
💡 Dica: Lembre-se que o retorno da função getMusics
, quando encontra as informações, é um array onde o primeiro elemento é um objeto com informações do álbum e o restante dos elementos são as músicas do álbum.
Para tocar o preview, você deve usar a tag audio
do próprio HTML. Sua implementação é assim:
<audio data-testid="audio-component" src="{previewUrl}" controls>
<track kind="captions" />
O seu navegador não suporta o elemento{" "} <code>audio</code>.
</audio>
Importante: lembre-se de colocar o atributo data-testid="audio-component"
na tag audio
de cada música listada.
O que será verificado
-
Se o serviço de
musicsAPI
está sendo chamado; -
Se o nome da banda ou artista e o nome do álbum são exibidos;
-
Se todas músicas retornadas pela API são listadas.
Você já consegue listar as músicas dos álbuns. Nessa etapa você poderá marcar quais são as músicas que você mais gosta.
-
No componente
MusicCard
, crie um input do tipocheckbox
para marcar as músicas favoritas:- Esse input deve conter uma
label
com o textoFavorita
e deve possuir o atributodata-testid={`checkbox-music-${trackId}`}
, ondetrackId
é a propriedadetrackId
do objeto recebido pela API.
- Esse input deve conter uma
-
Para adicionar uma música a lista de favoritas, utilize a função
addSong
dafavoriteSongsAPI
. Você deve passar para essa função um objeto no mesmo formato que você recebe da APIgetMusics
:- Enquanto aguarda o retorno da função
addSong
, renderize a mensagem deCarregando...
.
- Enquanto aguarda o retorno da função
O que será verificado
-
Existe um checkbox para cada música da lista;
-
A função
addSong
é chamada quando algum checkbox é clicado; -
A mensagem
Carregando...
é exibida após clicar no checkbox e removida depois do retorno da API.
Ao entrar na página com a lista de músicas de um álbum, na rota /album/:id
, as músicas que já foram favoritadas anteriormente devem estar com o checkbox marcado
-
Ao entrar na página, utilize a função
getFavoriteSongs
dafavoriteSongsAPI
para recuperar a lista de músicas favoritas. -
Enquanto aguarda a resposta da API, exiba a mensagem
Carregando...
. -
A lista recebida pela função
getFavoriteSongs
deve ser salva no estado da sua aplicação. -
Após receber o retorno da função
getFavoriteSongs
, as músicas que já foram favoritadas devem estar com o checkbox marcado comochecked
.
O que será verificado
-
A requisição para
getFavoriteSongs
é feita para recuperar as músicas favoritas; -
Ao entrar na página, o número de checkboxes marcados como
checked
é correspondente ao número de músicas que já foram favoritadas;
10. Faça a requisição para recuperar as músicas favoritas e atualizar a lista após favoritar uma música
Após adicionar uma música na lista de favoritas usando a função addSong
(Requisito 8), faça uma requisição usando a função getFavoriteSongs
para atualizar a lista de músicas favoritas:
-
Ao favoritar uma música, aguarde o retorno da função
addSong
(que já foi implementada no requisito 8) e utilize a funçãogetFavoriteSongs
dafavoriteSongsAPI
para recuperar a lista de músicas favoritas. -
Enquanto aguarda a resposta da API, exiba a mensagem
Carregando...
. -
Atualize o estado da aplicação com o valor recebido pelo retorno da função
getFavoriteSongs
. -
Após receber o retorno da função
getFavoriteSongs
, as músicas que já foram favoritadas devem estar com o checkbox marcado comochecked
.
O que será verificado
-
A requisição para
getFavoriteSongs
é feita após favoritar uma música; -
O número de checkboxes marcados como
checked
aumenta quando um checkbox é clicado.
Depois de listar e favoritar as músicas de um álbum, você também deve poder remover uma música da lista de favoritas.
Ao clicar em uma música que já está marcada como favorita, ela deve ser removida da lista de músicas favoritas. Para isso você deve usar a função removeSong
da favoriteSongsAPI
. Essa API espera receber um objeto no mesmo formato que foi passado anteriormente para a função addSong
:
- Enquanto aguarda o retorno da função
removeSong
, renderize a mensagem deCarregando...
.
O que será verificado
-
A função
removeSong
é chamada quando algum checkbox que já esteja marcado é clicado; -
A mensagem
Carregando...
é exibida após clicar no checkbox e removida depois do retorno da API; -
O número de checkboxes marcados como
checked
diminui quando um checkbox marcado é clicado;
Crie a lista dentro do componente Favorites
, que é renderizado na rota /favorites
.
-
Ao entrar na página, utilize a função
getFavoriteSongs
dafavoriteSongsAPI
para recuperar a lista de músicas favoritas. -
Enquanto aguarda a resposta da API, exiba a mensagem
Carregando...
. -
Após receber o retorno da função
getFavoriteSongs
, utilize o componenteMusicCard
para renderizar a lista de músicas favoritas. -
Nesta página deve ser possível desfavoritar as músicas. Para isso utilize a função
removeSong
dafavoriteSongsAPI
. -
Enquanto aguarda a resposta da API, exiba a mensagem
Carregando...
. -
Após remover a música, atualize a lista usando a função
getFavoriteSongs
. Lembre-se de exibir a mensagemCarregando...
enquanto aguarda o retorno da API.
O que será verificado
-
A requisição para
getFavoriteSongs
é feita para recuperar as músicas favoritas; -
É exibida a lista de músicas favoritas;
-
A lista de músicas favoritas é atualizada ao remover uma música da lista.
Crie a exibição do perfil dentro do componente Profile
, que é renderizado na rota /profile
-
Utilize a função
getUser
dauserAPI
para recuperar as informações da pessoa logada. -
Enquanto aguarda a resposta da API, exiba a mensagem
Carregando...
. -
Após receber o retorno da
getUser
, exiba o nome, o email, a descrição e a imagem da pessoa logada. -
Para exibir a imagem, use a tag HTML
img
com o atributodata-testid="profile-image"
; -
Crie um link que redirecione para a página de edição de perfil (rota
/profile/edit
). Este link deve ter o textoEditar perfil
.
O que será verificado
-
A API
getUser
é usada para recuperar as informações da pessoa logada; -
As informações da pessoa logada são exibidas na tela;
-
Foi criado um link para a rota de edição de perfil com o texto
Editar perfil
; -
Ao clicar no link
Editar perfil
, a navegação acontece corretamente.
Crie o formulário de edição de perfil dentro do componente ProfileEdit
, que é renderizado na rota /profile/edit
.
-
Utilize a função
getUser
dauserAPI
para recuperar as informações da pessoa logada:- Enquanto aguarda a resposta da API, exiba a mensagem "Carregando...".
-
Após receber as informações da pessoa logada, renderize um formulário já preenchido com os seguintes campos:
-
Um campo para alterar o nome da pessoa usuária. Este campo precisa ter o atributo
data-testid="edit-input-name"
; -
Um campo para alterar o email da pessoa usuária. Este campo precisa ter o atributo
data-testid="edit-input-email"
; -
Um campo para alterar a descrição da pessoa usuária. Este campo precisa ter o atributo
data-testid="edit-input-description"
; -
Um campo para alterar a foto da pessoa usuária. Este campo precisa ter o atributo
data-testid="edit-input-image"
; -
Um botão para salvar as informações alteradas. Este botão precisa ter o atributo
data-testid="edit-button-save"
.
-
-
Para poder habilitar o botão de enviar, todos os campos precisam estar preenchidos (não podem estar vazios):
-
O campo de email, além de não estar vazio também precisa verificar que o email tem um formato válido, ou seja, deve seguir o padrão
test@test.com
. -
O botão de salvar as informações só deve ser habilitado quando todos os campos estiverem válidos, ou seja, todos campos preenchidos e o campo de email com um valor em formato válido.
-
Quando o botão estiver habiltado, utilize a função
updateUser
dauserAPI
para atualizar as informações da pessoa usuária. Essa API espera receber um objeto no seguinte formato:{ name: '', email: '', image: '', description: '', }
-
Enquanto aguarda a resposta da API, exiba a mensagem
Carregando...
.
-
- Ao finalizar o processo de edição, redirecione a pessoa logada para a página de exibição de perfil (rota
/profile
).
O que será verificado
-
É feita a requisição para
getUser
para recuperar as informações da pessoa logada; -
O formulário é renderizado já preenchido com as informações da pessoa logada;
-
É possível alterar os valores dos campos;
-
O botão
salvar
é habilitado somente se todos os campos estiverem válidos; -
As informações são enviadas usando a API
updateUser
; -
Após salvar as informações a pessoa é redirecionada para a página de exibição de perfil.