`VideoSection` can be refactored
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 35/100
- issue の種類
- リファクタリング
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- javascript, react
- 領域
- frontend
調査の方向性
まず src/components/challenges/VideoSection.js と src/components/tracks/VideoSection.js、およびそれぞれの CSS ファイルを比較して、共通する構造と意図的な相違点を特定します。Track Stop と Part のクリック動作を追跡し、その後、リファクタリングされた共有コンポーネントと統合されたスタイルによって両方のバリアントが維持され、重複した timeline の動作が解消されていることを確認します。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- JavaScript
- スター
- 283
- フォーク
- 125
- PR マージ指標
- 30日以内にマージされた PR はありません
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
CodingTrain/thecodingtrain.com のほかの issue
-
CodingTrain/thecodingtrain.com#1991 · コメント 1 件 · 担当者 1 名 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
CodingTrain/thecodingtrain.com#1805 · コメント 1 件 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
CodingTrain/thecodingtrain.com#1785 · リアクション 1 件 ·
-
help wanted
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
CodingTrain/thecodingtrain.com#1750 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
CodingTrain/thecodingtrain.com#1730 ·
CodingTrain/thecodingtrain.com の issue をすべて見る
似ている issue
-
awaiting triage bug Causes friction Hop Gui P1 P2 Transforms
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
georgestephanis/p2026#40 ·
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
Margaret-Petersen/food-delivery-app-clone-react-native#1981 ·