Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

`VideoSection` can be refactored

Ouverte
#1,341 5 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Refactorisation
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript, react
Domaine
frontend

Piste de recherche

Commencez par comparer src/components/challenges/VideoSection.js et src/components/tracks/VideoSection.js, ainsi que leurs fichiers CSS, afin d’identifier la structure commune et les différences intentionnelles. Suivez le comportement au clic de Track Stop et Part, puis vérifiez que le composant partagé refactorisé et les styles fusionnés préservent les deux variantes et corrigent le comportement dupliqué de la timeline.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
JavaScript
Étoiles
283
Forks
125
Aucune PR mergée en 30 j

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de CodingTrain/thecodingtrain.com

Toutes les issues de CodingTrain/thecodingtrain.com

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.