### Documento de Análise de Código e Melhorias do Portal Nath Play
---
#### 1. Melhorias UX/UI
**Problema 1: Exibição incorreta da barra de progresso em thumbnails de vídeos na página de temporadas**
- **Descrição**:
Na página de temporadas, as thumbnails dos vídeos exibem a barra de progresso indicando que o vídeo já foi assistido, mesmo que o usuário nunca tenha visto o vídeo.
- **Impacto**:
- **Experiência do Usuário**: Usuários podem ficar confusos ao ver que vídeos foram marcados como assistidos quando não foram.
- **Confiabilidade**: Reduz a confiança dos usuários na precisão do sistema de acompanhamento de progresso.
- **Sugestão de Correção**:
Verificar o estado de visualização dos vídeos e garantir que a lógica de exibição da barra de progresso nas thumbnails seja baseada em dados precisos do histórico de visualizações do usuário.
**Problema 2: Falta de Efeito `.hover` ao Navegar pelos Tópicos das Categorias**
- **Descrição**:
Ao navegar pelos tópicos das categorias, os itens não apresentam nenhum efeito visual ao passar o mouse sobre eles, o que pode prejudicar a experiência do usuário. Um efeito `.hover` proporciona feedback visual e torna a interface mais interativa e intuitiva.
- **Impacto**:
- **Experiência do Usuário**: Melhora a interatividade e a navegabilidade da interface, tornando-a mais amigável e responsiva.
- **Acessibilidade**: Usuários têm uma melhor percepção de quais elementos são interativos.
- **Confiabilidade**: Aumenta a confiança dos usuários na navegação da interface.
---
#### 2. Qualidade do Código
**Problema 1: Propriedades Repetidas no Objeto `bannerCarouselSettings`**
- **Descrição**:
O objeto `bannerCarouselSettings` contém propriedades repetidas, especificamente `speed` e `pauseOnHover`, que são definidas mais de uma vez. Isso pode causar confusão e comportamentos inesperados, já que a última ocorrência da propriedade será a que prevalece.
Código não conforme:
```javascript
const bannerCarouselSettings = {
speed: 500,
useTransform: false,
arrows: false,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
padding: 0,
pauseOnHover: true,
autoplay: true,
speed: 1000, // Repetido
autoplaySpeed: 7000,
pauseOnHover: true, // Repetido
};
```
- **Impacto**:
- **Confusão para os Desenvolvedores**: Desenvolvedores podem ficar confusos sobre qual valor é o correto.
- **Manutenção Difícil**: Código com propriedades repetidas pode ser mais difícil de manter e depurar.
- **Comportamento Inesperado**: Pode levar a comportamentos inesperados se as propriedades tiverem valores diferentes.
-  **Impacto em Capacidade de Manutenção**: Médio
- **Sugestão de Correção**:
Remover as duplicações para garantir que cada propriedade seja definida uma única vez. Ajustar o objeto para garantir clareza e evitar comportamentos indesejados.
Código corrigido:
```javascript
const bannerCarouselSettings = {
speed: 1000,
useTransform: false,
arrows: false,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
padding: 0,
pauseOnHover: true,
autoplay: true,
autoplaySpeed: 7000,
};
```
**Problema 2: Funções Aninhadas Muito Profundamente**
- **Descrição**:
Funções aninhadas referem-se à prática de definir uma função dentro de outra função. Embora seja uma prática comum, funções aninhadas profundamente podem tornar o código mais difícil de ler e entender, especialmente se forem longas ou houver muitos níveis de aninhamento. Isso pode dificultar a manutenção e a compreensão do código.
Código não conforme:
```javascript
function processData(data) {
return data.map(item => {
return calculate(item.value, (result) => {
if (result > threshold) {
return transform(result, (transformed) => {
return finalize(transformed);
});
} else {
return handleError(result);
}
});
});
}
```
- **Impacto**:
- **Manutenção Difícil**: Código aninhado profundamente é mais difícil de manter e compreender.
- **Legibilidade Reduzida**: Torna o código menos legível e aumenta a complexidade cognitiva para os desenvolvedores.
-  **Impacto em Capacidade de Manutenção**: Alto
- **Sugestão de Correção**:
Refatorar o código para reduzir a profundidade do aninhamento. Utilizar funções separadas para as operações aninhadas.
**Problema 3: Componentes React Sem Validação dos Tipos das Props**
- **Descrição**:
Em JavaScript, props são geralmente passadas como objetos simples, o que pode resultar em erros e confusão ao trabalhar com componentes que têm requisitos específicos de propriedades. Validar os tipos das props garante segurança de tipo e clareza ao passar props para componentes. Isso ajuda a detectar erros potenciais durante a compilação, melhora a manutenção do código e facilita a compreensão de como os componentes devem ser usados e quais props eles aceitam.
Código não conforme:
```javascript
function RootLayout(children) {
return (
<div>
{children}
</div>
);
}
```
- **Impacto**:
- **Segurança de Tipo**: Baixa segurança de tipo pode levar a erros difíceis de detectar.
- **Manutenção Difícil**: Código sem validação de tipos é mais difícil de manter e compreender.
-  **Confiabilidade Reduzida**: Propicia a ocorrência de erros em tempo de execução.
-  **Impacto em Capacidade de Manutenção**: Baixo
- **Sugestão de Correção**:
Utilizar TypeScript para validação de tipos das props, proporcionando verificações em tempo de compilação e inteligência a IDE, melhorando o processo de desenvolvimento do código. Alternativamente, usar PropTypes do React que realiza verificação em tempo de execução.
Código corrigido usando TypeScript:
```typescript
//layout.tsx
export default function RootLayout({
children}: Readonly<{children: React.ReactNode}>){...}
```
Código corrigido usando PropTypes:
```javascript
import PropTypes from 'prop-types';
export default function RootLayout(children) {
return (
...
<div>
{children}
</div>
...
);
}
RootLayout.propTypes = {
children: PropTypes.node.isRequired,
};
```
- **Poréns ao usar TypeScript**:
- **Curva de Aprendizado**: Introduzir TypeScript em um projeto pode exigir uma curva de aprendizado para a equipe.
- **Integração**: Migrar um projeto existente para TypeScript pode ser um processo complexo e demorado. Necessita de alta atenção a qualquer mínino detalhe de configuração.
- **Sobrecarga**: Adiciona sobrecarga na configuração do projeto e pode aumentar o tempo de compilação.
- **Poréns ao usar PropTypes**:
- **Descontinuado no React 19**: PropTypes foi descontinuado no React 19, o que significa que não será mais suportado em futuras versões.
- **Verificação em Tempo de Execução**: PropTypes oferece verificação em tempo de execução, não fornecendo a mesma segurança de tipos em tempo de compilação que TypeScript oferece.
- **Depreciação Futuras**: Se, futuramente, migrarmos a aplicação para o React 19 ou versões superiores, isso exigirá revisões e migrações adicionais.
**Problema 4: Declarações Marcadas como `@deprecate` na API da Aplicação**
- **Descrição**:
O uso de métodos ou APIs marcados como `@deprecated` indica que eles estão obsoletos e podem ser removidos em versões futuras. A continuação do uso de métodos deprecados pode levar a problemas de compatibilidade e erros quando esses métodos forem eventualmente removidos.
- **Impacto**:
- **Manutenção Difícil**: Uso de métodos deprecados torna o código mais difícil de manter, pois pode ser necessário realizar mudanças significativas quando esses métodos forem removidos.
-  **Confiabilidade Reduzida**: Pode levar a falhas quando os métodos deprecados forem removidos ou alterados.
-  **Impacto em Capacidade de Manutenção**: Alto
- **Sugestão de Correção**:
Substituir o uso de métodos deprecados por suas alternativas recomendadas. Isso pode exigir a atualização da documentação ou a consulta ao changelog da biblioteca/API para encontrar os métodos substitutos.
Código corrigido:
```javascript
import React from 'react';
import { newApiMethod } from 'api';
function ExampleComponent() {
React.useEffect(() => {
newApiMethod(); // Método atualizado
}, []);
return <div>Example</div>;
}
export default ExampleComponent;
```
- **Desafios ao Resolver**:
- **Atualização de Dependências**: Pode ser necessário atualizar bibliotecas e dependências para versões mais recentes que não utilizem métodos deprecados.
- **Refatoração de Código**: A substituição de métodos deprecados pode exigir uma refatoração significativa do código existente, incluindo testes e validação para garantir que a funcionalidade não seja afetada.
**Problema 5: Falta de Testes**
- **Descrição**:
A aplicação carece de uma cobertura de testes adequada para garantir a qualidade do código. Sem testes, é difícil assegurar que novas funcionalidades não introduzam bugs e que o comportamento da aplicação continue conforme o esperado após mudanças no código.
- **Impacto**:
- **Confiabilidade**: A falta de testes reduz a confiança na estabilidade e funcionalidade do aplicativo.
- **Manutenção**: Sem testes automatizados, é mais difícil identificar a causa de problemas introduzidos por novas alterações.
- **Desenvolvimento**: Testes fornecem uma rede de segurança que facilita a refatoração e a adição de novas funcionalidades.
- **Sugestão de Correção**:
Introduzir testes utilizando Jest, como já foi sugerido, que é uma biblioteca popular de testes em JavaScript. Começar com testes unitários para funções e componentes principais, e expandir para testes de integração e end-to-end conforme necessário.
- **Desafios ao Resolver**:
- **Tempo Inicial**: Configurar a infraestrutura de testes e escrever os primeiros testes pode demandar tempo.
- **Cobertura de Testes**: Atingir uma boa cobertura de testes requer esforço contínuo e disciplina na escrita de novos testes ao adicionar funcionalidades.
**Problema 6: Falta de uma Documentação com Padrões de Desenvolvimento**
- **Descrição**:
Não há documentação que defina padrões claros de desenvolvimento, como padrões de commits e nomeação de branches. Isso pode levar a inconsistências e dificuldades na colaboração entre desenvolvedores.
- **Impacto**:
- **Consistência**: Sem padrões definidos, é mais provável que haja inconsistências na estrutura do código e no controle de versão.
- **Colaboração**: A falta de padrões dificulta a colaboração, já que diferentes desenvolvedores podem seguir práticas diferentes.
- **Manutenção**: Um código inconsistente e desorganizado é mais difícil de manter e evoluir.
- **Sugestão de Correção**:
Criar uma documentação que estabeleça padrões de desenvolvimento claros, incluindo o uso de **`Commits Convencionais`** e as melhores práticas para nomeação de branches.
Exemplos:
- **Commits Convencionais**:
```plaintext
feat: add login section
fix: corrigir bug na renderização da página inicial
docs: atualizar documentação do README
```
- **Nomeação de Branches**:
Branches podem ser nomeadas seguindo este padrão:
```plaintext
feature/descricao-breve
bugfix/descricao-breve
hotfix/descricao-breve
release/versao-x.y.z
```
Link para referência: [Padrões de Nomenclatura para Branches e Commits](https://medium.com/prolog-app/nossos-padr%C3%B5es-de-nomenclatura-para-branches-e-commits-fade8fd17106)
**Problema 7: Falta de Documentação de Guias e Boas Práticas**
- **Descrição**:
A aplicação não possui uma documentação abragente de Boas Práticas e Padrões, como por exemplo a configuração do ESLint - que deve ser uma prioridade no momento, pois o time está começando a mexer no código e pode haver conflitos de formatação.
- **Impacto**:
- **Qualidade do Código**: Conflitos de formatação podem surgir sem uma configuração adequada do ESLint, resultando em um código menos limpo e mais difícil de manter.
- **Sugestão de Correção**:
Configurar o ESLint para garantir uma formatação de código consistente e futuramente construir o próprio pacote de configuração ESlint, para facilitar o desenvolvimento entre os projetos.
Exemplo de configuração do ESLint:
```json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
}
```
---
#### 3. Bugs do Código
**Bug 1: Falhas na renderização dos banners e thumbnails**
- **Descrição**:
O problema ocorre na renderização de componentes de lista, banners e thumbs, em todas as páginas da aplicação, onde é utilizado o índice do array como chave. Isso pode causar falhas na renderização quando a ordem dos itens muda, pois o React não consegue identificar corretamente os itens e recria o DOM da lista, impactando negativamente o desempenho e potencialmente causando problemas com o estado do componente.
Código não conforme:
```javascript
{banners?.length > 0 && (
<Carousel carouselSettings={bannerCarouselSettings} type="fullSize">
{banners?.map((banner, index) => {
return (
<CarouselBanner
title={banner.title}
description={banner.description}
desktopImage={banner?.desktopMedia?.url}
mobileImage={banner?.mobileMedia?.url}
buttonLabel={banner?.label}
redirectUrl={banner?.link}
key={index}
/>
);
})}
</Carousel>
)}
```
- **Impacto**:
- Problemas de desempenho devido à recriação desnecessária do DOM.
- Potenciais bugs com o estado do componente, causando uma experiência de usuário inconsistente.
-  **Impacto em Capacidade de Manutenção**: Médio
- **Sugestão de Correção**:
Use identificadores únicos em vez de índices de array para as chaves dos itens. Supondo que cada objeto `banner` tenha uma propriedade `id` única:
```javascript
{banners?.length > 0 && (
<Carousel carouselSettings={bannerCarouselSettings} type="fullSize">
{banners?.map((banner) => {
return (
<CarouselBanner
key={banner.id}
title={banner.title}
description={banner.description}
desktopImage={banner?.desktopMedia?.url}
mobileImage={banner?.mobileMedia?.url}
buttonLabel={banner?.label}
redirectUrl={banner?.link}
/>
);
})}
</Carousel>
)}
```
Alternativamente, pode ser considerado adicionar e usar uma biblioteca para gerar UIDs.
---
### Resumo
Este documento tem o objetivo de fornecer uma visão geral das melhorias necessárias no portal da Nath Play, com foco em UX/UI, qualidade do código e bugs. Busco discutir estes pontos com a equipe para priorizar as ações e definir um plano de implementação.
Google Drive
Gist
Clipboard
Sign in with Wallet
