`VideoSection` can be refactored

Offen

#1,341 erstellt am 23.12.2023 5 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 5/5
Geschätzter Aufwand: Über eine Woche
Anfängerfreundlichkeit: 35/100

Issue-Typ: Refactoring
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: javascript, react
Bereich: frontend

Rechercherichtung

Beginne mit dem Vergleich von src/components/challenges/VideoSection.js und src/components/tracks/VideoSection.js sowie deren CSS-Dateien, um die gemeinsame Struktur und die beabsichtigten Unterschiede zu identifizieren. Verfolge das Klickverhalten von Track Stop und Part und überprüfe anschließend, dass die refaktorierte gemeinsame Komponente und die zusammengeführten Styles beide Varianten beibehalten und das duplizierte Timeline-Verhalten beheben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

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.

Vorherrschende Sprache: JavaScript
Sterne: 283
Forks: 125
PR-Merge-Kennzahlen: Keine gemergten PRs in 30 T.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus CodingTrain/thecodingtrain.com

"SHOP" link in footer 404s Offen

CodingTrain/thecodingtrain.com#1991 · 1 Kommentar · 1 zugewiesene Person · Erstellt am 11.8.2026
Show published date on video page? Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 25/100

CodingTrain/thecodingtrain.com#1805 · 1 Kommentar · Erstellt am 27.1.2025
Improvements to YT description auto-updater Offen

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 25/100

CodingTrain/thecodingtrain.com#1785 · 1 Reaktion · Erstellt am 02.12.2024
Add a reference to Nature of Code book? Offen

help wanted

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 25/100

CodingTrain/thecodingtrain.com#1750 · Erstellt am 17.10.2024
Redo ml5.js track and archive old videos? Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

CodingTrain/thecodingtrain.com#1730 · Erstellt am 04.10.2024

Alle Issues in CodingTrain/thecodingtrain.com