PR de Correção

[amandarangel]

Esse é um PR de correção, portanto não precisa mergear! :)

[amandarangel]

Pessoal,

O projetinho de vocês foi avaliado como: acima do esperado!!! Parabéns!!!

O projeto de vocês ficou MUITO bom!!! O código muuuuito bem organizado, muito bem escrito! Houve uma clara preocupação com o layout e com a UX em cada detalhe. As lógicas também foram muito bem implementadas!!

Deixei alguns comentários só com dicas de coisinhas que podem ser melhoradas!

Vocês fecharam com chave de ouro 🥇 esse módulo 2 e me encheram de orgulho!!! Continuem voando!! 🚀

[amandarangel]

AMEI esse README completinho ❤️ ! Fizeram o meu dia! Parabéeeeeens!

[amandarangel]

Só queria falar: INCRÍVEL! Adoreeeei a ideia do carrossel e ainda mais o fato de ter ficado muito bem feito! 👏 👏 👏

[amandarangel]

Colocar os componentes de estilização em um outro arquivo ajuda a manter os componentes React com o código mais limpo, então é bem recomendável!

[amandarangel]

Uma dica mais relacionada a UX aqui: como o cartão de crédito é a única forma de pagamento que conseguimos parcelar, seria legal que esse select só aparecesse caso a forma de pagamento selecionada fosse cartão de crédito. Uma renderização condicional faria isso! ;)

[amandarangel]

Essa lógica de ordenação poderia estar isolada em uma função fora do render(). Nesse caso, a função retornaria o array ordenado e dentro do render vocês armazenariam o retorno da função em uma variável!
ex:

//fora do render()

sortProducts = () => {
    //lógica de ordenar produtos aqui dentro
}

//dentro do render()

const sortedProducts = sortProducts()

Assim o código fica mais organizado, pois estamos isolando as nossas lógicas em funções!

[amandarangel]

Para evitar repetir várias vezes as funções de setar o estado da aplicação com o valor do input, podemos usar essa sintaxe aqui:

handleFieldChange = event => {
   this.setState({
     [event.target.name]: event.target.value
   });
}

Vocês só teriam que se lembrar de colocar o atributo name na tag do input igual ao nome dado a ele no estado e chamar apenas essa única função em todos os inputs.

Exemplo:

<h1>Área do Vendedor:</h1>
       <InputDiv tamanho="80%">
         <Input
           tamanho="100%"
           label="Nome do Produto"
           variant="filled"
           value={this.state.inputName}
           name='inputName'
           onChange={this.handleFieldChange}
         />
       </InputDiv>

       <InputDiv tamanho="80%">
         <Input
           tamanho="100%"
           label="URL da Imagem"
           variant="filled"
           placeholder="Coloque apenas uma foto do produto."
           value={this.state.inputImage}
           name='inputImage'
           onChange={this.handleFieldChange}
         />
       </InputDiv>

       <InputDiv tamanho="80%">
         <Input
           tamanho="100%"
           label="Descriçao"
           variant="filled"
           value={this.state.inputDescription}
           name='inputDescription'
           onChange={this.handleFieldChange}
         />
       </InputDiv>

[amandarangel]

A verticalização do código é uma boa prática! Gostei muito de ver isso por todo o código de vocês!

[amandarangel]

Curti muito a forma como vocês fizeram o carrinho e do botão para o consumidor poder abrir e fechar a hora que quiser! Isso é pensar em UX!