david32145/osf-rn-training-final-app

Desafio Final

O Desafio final consiste em 2 desafios médios e 3 desafios bônus, cuja complexidade é um pouco maior.

Desafios médios

1. Implementar uma barra de pesquisa para filtrar os filmes

• Deve seguir o mesmo alinhamento de itens conforme a imagem abaixo:

  

• Quando o usuário começar a digitar, um ícone de limpar deve aparecer no canto direito, e quando pressionado, limpar os dados do campo de texto, e fazer o teclado desaparecer, conforme o vídeo baixo:

  Screen.Recording.2021-09-22.at.15.16.56.mov

• Para cada letra digitada pelo usuário, deve aplicar um filtro na lista de filme para mostrar apenas os títulos do filmes que possuam determinado conjunto de caracteres, conforme o vídeo abaixo:

  expected_filter.mov

• Caso o usuário digite um conjunto de caracteres que não esteja presente em nenhum título de nenhum filme, deverá mostrar uma messagem de erro, informando que não conseguiu encontrar nenhum filme com o conjunto de caracteres informado, conforme o vídeo abaixo:

  Screen.Recording.2021-09-22.at.15.18.25.mov

2. Implementar as sessões disponíveis para um determinado filme

OBS.: Para fazer manipulações de data, fica ao critério de cada um usar o objeto Date do próprio javascript, quanto usar algum pacote facilitador.

Na tela de MovieDetail será preciso listar as sessões disponíveis por dia, para isso, precisará ser feito alguns ajustes no código atual:

• O código do SegmentedControl está com os dias fixados, porém esses dias precisam ser interativos contanto da data atual + 3 dias subsequentes. Por exemplo:

  • Caso o dia atual seja segunda-feira, os valores do SegmentedControl deverá ser: 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira'.
  • Caso o dia atual seja domingo, os valores do SegmentedControl deverá ser: 'Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira'.

• Para buscar dados de um dia específico, será preciso fazer uma requisição GET para o seguinte endpoint:
  https://osf-rn-training-bff.herokuapp.com/movies/{movieId}/sessions/date/{date}
movieId é referente ao id do filme
  date será a data correspondente ao dia da semana, essa data só será aceita no formato: YYYY-MM-DD outro formato o serviço retonará um erro.

• Para cada mudança de tabs do SegmentedControl deverá listar as sessões disponíveis do dia, e seguir algumas especificações:
  

  • Enquanto estiver carregando as informações, um indicador de carregamento deverá ser exibido, conforme a imagem abaixo:

  

  • Quando houver uma erro de requisição, deve mostrar uma mensagem de erro conforme a imagem abaixo:
    

  

  • Quando os dados forem obtidos com sucesso, os dados nome do cinema, horario e detalhes da sessão devem ser exibidos, conforme a imagem abaixo:

  

Desafios Bônus

1. Implementar um sistema de cache de requisições usando por exemplo o pacote React Query

2. Adicionar o pacote Lint-staged para funcionar em conjunto com o Husky ja configurado no projeto

3. Adicionar suporte para mais cidades (Ainda não disponível)

Para acessarem todas as cidades disponíveis suportadas pela api, será necessário fazer uma requisição GET para o endpoint:
https://osf-rn-training-bff.herokuapp.com/cities

Será preciso adicionar na tela de home um componente que será possivel selecionar qual cidade o usuário quer vizualizar os filmes disponíveis.

Para listar os filmes disponíveis por uma cidade, deverá ser feita uma requisição GET para o endpoint:
https://osf-rn-training-bff.herokuapp.com/movies/city/{cityId}
cityId será retornado no endpoint de /cities

Para listar as sessões de um filme de uma cidade específica, basta fazer uma requisição GET para o endpoint:
https://osf-rn-training-bff.herokuapp.com/movies/{movieId}/sessions/date/{date}?cityId={cityId}

Requisitos de layout: Devera haver um ícone que abrirá a lista de cidades, onde mostrará apenas o nome da cidade e se ela foi selecionada

Avaliação

Deverá ser feito um fork desse projeto, adicionar no README.md o template abaixo e enviar um email para os facilitadores do curso seguindo esse padrão:

Título do email: Nome do aluno - Desafio final
Conteúdo do email: link do projeto no github

Desafios médios

1. Implementar uma barra de pesquisa para filtrar os filmes

• Concluído Total
• Concluído Parcial
• Não Concluído

Explicação

2. Implementar as sessões disponíveis para um determinado filme

• Concluído Total
• Concluído Parcial
• Não Concluído

Explicação

Desafios bônus

1. Implementar um sistema de cache de requisições

• Concluído Total
• Concluído Parcial
• Não Concluído

Explicação

2. Adicionar o pacote Lint-staged

• Concluído Total
• Concluído Parcial
• Não Concluído

Explicação

3. Adicionar suporte para mais cidades

• Concluído Total
• Concluído Parcial
• Não Concluído

Explicação