---
# System prepended metadata

title: Análise de Código e Melhorias do Portal Nath Play

---

### 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.

![Captura de Tela 2024-06-20 às 22.35.47](https://hackmd.io/_uploads/H1-1nLMIR.png)


- **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.

![Captura de Tela 2024-06-21 às 01.26.56](https://hackmd.io/_uploads/rJiXzFfUR.png)


- **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.
  - ![Medium Maintainability](https://img.shields.io/badge/Maintainability-Medium-yellow) **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.
  - ![High Maintainability](https://img.shields.io/badge/Maintainability-High-red) **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.
  - ![Low Reliability](https://img.shields.io/badge/Reliability-Low-blue) **Confiabilidade Reduzida**: Propicia a ocorrência de erros em tempo de execução.
  - ![Low Maintainability](https://img.shields.io/badge/Maintainability-Low-blue) **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.
  - ![High Reliability](https://img.shields.io/badge/Reliability-High-red) **Confiabilidade Reduzida**: Pode levar a falhas quando os métodos deprecados forem removidos ou alterados.
  - ![High Maintainability](https://img.shields.io/badge/Maintainability-High-red) **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.
  - ![Medium Maintainability](https://img.shields.io/badge/Maintainability-Medium-yellow) **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.
