Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
Você deverá desenvolver uma aplicação que consiste em uma biblioteca de cartões de filmes dinâmica utilizando React. A biblioteca é composta por:
-
Um cabeçalho;
-
Uma barra de busca, utilizada pra filtrar quais cartões serão exibidos na lista de cartões;
-
Uma lista de cartões, onde cada cartão representa um filme e possui uma imagem, título, subtítulo, sinopse e avaliação;
-
Um formulário para adicionar um novo cartão na biblioteca.
Uma possível implementação dessa biblioteca consta abaixo.
Você precisará implementar componentes que em conjunto resultarão na biblioteca de cartões de filmes dinâmica.
Este repositório já contém um template com um App React criado e configurado. Após clonar o projeto e instalar as dependências (mais sobre isso abaixo), você não precisará realizar nenhuma configuração adicional. Você deverá completar este template implementando os requisitos listados na próxima seção.
Esse projeto contém os seguintes React Components
:
- Header
- MovieLibrary
- SearchBar
- MovieList
- MovieCard
- Rating
- AddMovie
Header
, MovieList
, MovieCard
e Rating
já estão implementados. MovieLibrary
, SearchBar
e AddMovie
já estão criados, mas precisam ser implementados de forma a passarem nos requisitos listados abaixo.
Todos os componentes devem ser criados dentro da pasta src/components
. É obrigatório que seus componentes tenham exatamente os nomes listados acima.
Os componentes que precisam ter estado a ser gerenciado são:
- MovieLibrary
- AddMovie
Todos os requisitos do projeto serão testados automaticamente. Cada componente possui vários requisitos. Os testes para cada requisito de um componente estão no arquivo de teste correspondente.
Por exemplo: Os requisitos relacionados ao componente SearchBar
estão no arquivo SearchBar.test.js
.
Separe um tempo para ler estes arquivos e entender como os testes estão organizados.
Para executar os testes localmente, digite no terminal o comando npm test
. Inicialmente, seus testes estarão assim:
A primeira parte da saída mostra um sumário de cada teste e seu status. Um ❌ representa um teste falhando, enquanto um ✅ representa um teste correto. Naturalmente, no início todos os testes estarão falhando.
Abaixo do sumário, para cada teste falhando, há uma mensagem explicativa sobre o motivo que causou a falha do teste, assim como a linha em que a falha ocorreu. Na imagem, vemos que o teste falha porque o componente Header
, utilizado na linha 38, não está definido.
Se fizermos uma implementação simples do componente Header
, que não renderiza nada:
import React from 'react';
class Header extends React.Component {
render() {
}
}
export default Header;
E descomentarmos a linha que importa o componente Header
em App.test.js
:
// import App from './App';
import Header from './components/Header';
// import MovieCard from './components/MovieCard';
// import MovieList from './components/MovieList';
// import Rating from './components/Rating';
Veremos que o primeiro teste agora passa:
Quando seu projeto estiver terminado, todos os testes deverão estar passando:
Especialmente no início, quando a maioria dos testes está falhando, a saída após executar os testes é bastante poluída. Você pode desabilitar temporariamente um teste utilizando a função skip
junto à função it
. Como o nome indica, esta função "pula" um teste:
it.skip('it includes the text `Movie Cards Library` inside a h1 tag', () => {
wrapper = shallow(<Header />);
expect(wrapper.find('header h1').text()).toBe('Movie Cards Library');
});
Na saída da execução dos testes, você verá um indicando que o teste está sendo pulado:
Uma estratégia é pular todos os testes no início e ir implementando um teste de cada vez, removendo dele a função skip
.
Ao executar os testes localmente, Jest, a ferramenta que executa os testes, entra em watch mode. Nesse modo, a cada vez que um arquivo é salvo, os testes são executados novamente. Isso pode aumentar sua produtividade removendo a necessidade de executar os testes manualmente o tempo todo. Você pode abrir uma aba no seu terminal ou no terminal do VSCode e deixar o Jest rodando nesse modo.
Esse componente renderizará uma barra com filtros acima da listagem de cartões. Quais cartões serão mostrados no componente MovieList
dependerá dos filtros escolhidos. SearchBar
deve receber como props:
searchText
, uma stringonSearchTextChange
, uma callbackbookmarkedOnly
, um booleanonBookmarkedChange
, uma callbackselectedGenre
, uma stringonSelectedGenreChange
, uma callback
Dentro desse formulário haverá campos usados na filtragem de cartões.
-
O input deve ter uma label associada com o texto: "Inclui o texto:";
-
A propriedade
value
do input deve receber o valor da propsearchText
; -
A propriedade
onChange
do input deve receber o valor da proponSearchTextChange
.
-
O input deve ter uma label associada com o texto: "Mostrar somente favoritos";
-
A propriedade
checked
do input deve receber o valor da propbookmarkedOnly
; -
A propriedade
onChange
do input deve receber o valor da proponBookmarkedChange
.
-
O select deve ter uma label associada com o texto: "Filtrar por gênero";
-
A propriedade
value
do select deve receber o valor da propselectedGenre
; -
A propriedade
onChange
do input deve receber o valor da proponSelectedGenreChange
; -
O
select
deve renderizar quatro tagsoption
, com as opções de filtragem por gênero, na seguinte ordem:Todos
, com o valor""
;Ação
, com o valoraction
;Comédia
, com o valorcomedy
;Suspense
, com o valorthriller
.
Esse componente renderizará um formulário que permite adicionar na biblioteca um novo cartão de filme, dadas as seguintes informações do novo filme:
- subtítulo
- título
- caminho da imagem
- sinopse
- avaliação
- gênero
AddMovie
deve receber como props:
onClick
, uma callback
O componente AddMovie
possui como estado as seguintes propriedades:
subtitle
: guarda o subtítulo preenchido no formulário por quem usa a aplicação;title
: guarda o título preenchido no formulário por quem usa a aplicação;imagePath
: guarda o caminho da imagem preenchido no formulário por quem usa a aplicação;storyline
: guarda a sinopse do filme escrita no formulário por quem usa a aplicação;rating
: guarda a nota de avaliação dada no formulário por quem usa a aplicação;genre
: guarda o gênero do filme selecionado no formulário por quem usa a aplicação.
Ou seja, o estado de AddMovie
contém as informações do novo filme que foram inseridas por quem usa a aplicação.
O estado inicial do componente AddMovie
deve ser:
subtitle
: '';title
: '';imagePath
: '';storyline
: '';rating
: 0;genre
: 'action'.
Dentro desse formulário haverá campos usados para preencher informações do novo cartão a ser adicionado na biblioteca.
-
O input deve ter uma label associada com o texto: "Título";
-
O input deve ter seu valor inicial provido pelo estado inicial do componente, via
title
; -
A propriedade
onChange
deve atualizar o estado deAddMovie
, atribuindo atitle
o atual título contido no input.
Renderize um input do tipo texto dentro do formulário em AddMovie
para obter o subtítulo do novo filme
-
O input deve ter uma label associada com o texto: "Subtítulo";
-
O input deve ter seu valor inicial provido pelo estado inicial do componente, via
subtitle
; -
A propriedade
onChange
deve atualizar o estado deAddMovie
, atribuindo asubtitle
o atual subtítulo contido no input.
Renderize um input do tipo texto dentro do formulário em AddMovie
para obter o caminho da imagem do novo filme
-
O input deve ter uma label associada com o texto: "Imagem";
-
O input deve ter seu valor inicial provido pelo estado inicial do componente, via
imagePath
; -
A propriedade
onChange
deve atualizar o estado deAddMovie
, atribuindo aimagePath
o atual caminho da imagem contido no input.
-
A
textarea
deve ter uma label associada com o texto: "Sinopse"; -
A
textarea
deve ter seu valor inicial provido pelo estado inicial do componente, viastoryline
; -
A propriedade
onChange
deve atualizar o estado deAddMovie
, atribuindo astoryline
a sinopse atual continda natextarea
.
Renderize um input
do tipo number
dentro do formulário em AddMovie
para obter a avaliação do novo filme
-
O
input
deve ter uma label associada com o texto: "Avaliação"; -
O
input
deve ter seu valor inicial provido pelo estado inicial do componente, viarating
; -
A propriedade
onChange
deve atualizar o estado deAddMovie
, atribuindo arating
a avaliação atual continda no input.
-
O
select
deve ter uma label associada com o texto: "Gênero"; -
O
select
deve ter seu valor inicial provido pelo estado inicial do componente, viagenre
; -
A propriedade
onChange
deve atualizar o estado deAddMovie
, atribuindo agenre
o gênero atual selecionado; -
O
select
deve renderizar três tagsoption
, com as opções de filtragem por gênero, na seguinte ordem:Ação
, com o valoraction
;Comédia
, com o valorcomedy
;Suspense
, com o valorthriller
.
Renderize um botão do formulário em AddMovie
para fazer uso dos dados do novo filme, contidos no estado de AddMovie
-
O botão precisa ter escrito o seguinte texto: "Adicionar filme";
-
A propriedade
onClick
do botão invoca uma função definida por você, emAddMovie
, que:- Executa a callback passada para o componente
AddMovie
via props, chamadaonClick
, que recebe como parâmetro o estado atual deAddMovie
; - Reseta o estado de
AddMovie
, voltando para o inicial, conforme mencionado anteriormente.
- Executa a callback passada para o componente
Esse componente renderizará a biblioteca de filmes, com a possiblidade de filtrar por filmes e adicionar um filme à biblioteca.
MovieLibrary
deve receber como props:
movies
, um array
O componente MovieLibrary
possui como estado as seguintes propriedades:
searchText
: guarda o texto de busca por filmes;bookmarkedOnly
: um boolean que guarda se é para filtrar por filmes favoritados ou não;selectedGenre
: guarda o gênero do filme selecionado para poder fazer a filtragem;movies
: guarda a lista de filmes.
Ou seja, o estado de MovieLibrary
contém a lista de filmes e os filtros a serem aplicados sobre a listagem.
O estado inicial do componente MovieLibrary
deve ser:
searchText
: '';bookmarkedOnly
: false;selectedGenre
: '';movies
: a lista de filmes passadas pela propsmovies
.
-
searchText
oriundo do estado deMovieLibrary
deve ser passado para a propsearchText
deSearchBar
; -
A callback para atualizar o estado de
MovieLibrary
emsearchText
precisa ser passada paraSearchBar
; -
bookmarkedOnly
oriundo do estado deMovieLibrary
deve ser passado para a propbookmarkedOnly
deSearchBar
; -
A callback para atualizar o estado de
MovieLibrary
embookmarkedOnly
precisa ser passada paraSearchBar
; -
selectedGenre
oriundo do estado deMovieLibrary
deve ser passado para a propselectedGenre
deSearchBar
; -
A callback para atualizar o estado de
MovieLibrary
emselectedGenre
precisa ser passada paraSearchBar
.
-
Deve passar para a prop
movies
deMovieList
todos os filmes filtrados; -
Quando o estado para
bookmarkedOnly
é falso, não é alterada a listagem de filmes a ser renderizada; -
Quando o estado para
bookmarkedOnly
é verdadeiro, deve ser renderizado porMovieList
somente filmes favoritados; -
Quando o estado para
selectedGenre
é vazio, não é alterada a listagem de filmes a ser renderizada; -
Quando o estado para
selectedGenre
não é vazio, deve ser renderizado somente filmes com o mesmo gênero; -
Quando o estado para
searchText
é vazio, não é alterada a listagem de filmes a ser renderizada; -
Quando o estado para
searchText
não é vazio, deve ser renderizado porMovieList
filmes que satisfaçam a uma das condições abaixo:- Filmes cujo título contém o que está presente em
searchText
, ou; - Filmes cujo subtítulo contém o que está presente em
searchText
, ou; - Filmes cuja sinopse contém o que está presente em
searchText
.
- Filmes cujo título contém o que está presente em
- A callback que permite adicionar um novo filme ao final da lista precisa ser passada para
AddMovie
.
- Clone o repositório
git clone [email protected]:tryber/sd-03-block13-project-movie-card-library-stateful.git
.- Entre na pasta do repositório que você acabou de clonar:
cd sd-03-block13-project-movie-card-library-stateful
- Instale as dependências, inicialize o projeto e rode os testes
- Instale as dependências:
npm install
- Inicialize o projeto:
npm start
(uma nova página deve abrir no seu navegador com um texto simples)
- Verifique que os testes estão executando:
npm test
(os testes devem rodar e falhar)
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master
- Exemplo:
git checkout master
- Exemplo:
- Agora, crie uma branch onde você vai guardar os
commits
do seu projeto- Você deve criar uma branch no seguinte formato:
nome-de-usuario-nome-do-projeto
- Exemplo:
git checkout -b joaozinho-movie-card-library-stateful
- Você deve criar uma branch no seguinte formato:
- Faça alterações em algum dos componentes que precisam de implementação, por exemplo o
MovieLibrary
emsrc/components
:
import React, { Component } from 'react';
import MovieList from './MovieList';
import SearchBar from './SearchBar';
import AddMovie from './AddMovie';
class MovieLibrary extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2> My awesome movie library </h2>
<SearchBar />
<MovieList movies={this.props.movies} />
<AddMovie />
</div>
);
}
}
export default MovieLibrary;
- Adicione as mudanças ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status
(deve aparecer listado o arquivo src/components/MovieLibrary.jsx em vermelho)
- Exemplo:
- Adicione o arquivo alterado ao stage do Git
- Exemplo:
git add .
(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status
(deve aparecer listado o arquivo src/components/MovieLibrary.jsx em verde)
- Exemplo:
- Faça o
commit
inicial- Exemplo:
git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:'
(fazendo o primeiro commit)git status
(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin joaozinho-movie-cards-library-stateful
- Crie um novo
Pull Request
(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
-
⚠ PULL REQUESTS COM ISSUES NO CODE CLIMATE NÃO SERÃO AVALIADAS, ATENTE-SE PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO! ⚠
-
Faça
commits
das alterações que você fizer no código regularmente -
Lembre-se de sempre após um (ou alguns)
commits
atualizar o repositório remoto -
Os comandos que você utilizará com mais frequência são:
git status
(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)git add
(para adicionar arquivos ao stage do Git)git commit
(para criar um commit com os arquivos que estão no stage do Git)git push -u nome-da-branch
(para enviar o commit para o repositório remoto na primeira vez que fizer opush
de uma nova branch)git push
(para enviar o commit para o repositório remoto após o passo anterior)
Para "entregar" seu projeto, siga os passos a seguir:
- Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas
- No menu à direita, clique no link "Labels" e escolha a label code-review
- No menu à direita, clique no link "Assignees" e escolha o seu usuário
- No menu à direita, clique no link "Reviewers" e digite
students
, selecione o timetryber/students-sd-03
Se ainda houver alguma dúvida sobre como entregar seu projeto, aqui tem um video explicativo.
⚠ Lembre-se que garantir que todas as issues comentadas pelo CodeClimate estão resolvidas! ⚠
⚠⚠⚠
À medida que você e as outras pessoas que estudam na Trybe forem entregando os projetos, vocês receberão um alerta via Slack para também fazer a revisão dos Pull Requests dos seus colegas. Fiquem atentos às mensagens do "Pull Reminders" no Slack!
Use o material que você já viu sobre Code Review para te ajudar a revisar os projetos que chegaram para você.