Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

`VideoSection` can be refactored

Aberta
  • Algo errado?
#1,341 5 comentários 1 reação 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
35/100
Tipo de issue
Refatoração
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
frontend

Direção de pesquisa

Comece comparando src/components/challenges/VideoSection.js e src/components/tracks/VideoSection.js, junto com seus arquivos CSS, para identificar a estrutura compartilhada e as diferenças intencionais. Rastreie o comportamento de clique de Track Stop e Part e, em seguida, verifique se o componente compartilhado refatorado e os estilos mesclados preservam ambas as variantes e resolvem o comportamento duplicado da timeline.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

I've listed some bugs below, but this is mostly a critique of the code structure which is the overarching problem.

I was trying to fix a small issue in #1339 that requires setting the background of the VideoSection component's .timeline. But there are 2 independent, yet similar implementations of VideoSection for Tracks and Challenges - this required changing 2 files for a feature that is common to both.

In fact, challenges/VideoSection.js and tracks/VideoSection.js are mostly the same except for a few variables and what happens when a "Track Stop" or a "Part" is clicked. Their respective CSS files are have even more similarity, differing in hardly a few lines (and these may be unintentional).

Is this important? Well yeah, because code redundancy has already caused some differences:

Challenges Tracks
image image
image image
image image

Potential Solution

If we refactor VideoSection to be a Class Component instead of a Functional Component, we can inherit from a more general VideoSection that'll make the code more readable and DRY. The CSS files have practically no differences because we pass in the variant programmatically for UI changes. They can be merged, and we can use this merged file for the base VideoSection class.

Linguagem predominante
JavaScript
Estrelas
287
Forks
125
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de CodingTrain/thecodingtrain.com

Todas as issues de CodingTrain/thecodingtrain.com

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.