第3の貢献

今回は、game-knightリポジトリを選びました.これは簡単に我々の友人や家族と遊ぶすべてのゲームの結果を記録する興味深いプロジェクトです.
以前の問題では、私は他の人によって調達バグを修正し、バグを修正しました.この1つについて、私は何か新しいことを試みることを決めた

新機能
アプリケーションは現在、ユーザーが一日以内に再生ゲームを記録することができました.プロジェクトの所有者は、任意の日(issue #30)でゲームを記録するために柔軟にするために日付ピッカーを追加したい.

実装
私が最初にしたことは、日付ピッカーライブラリを探すことでした.そこから選択することがたくさんあったが、私は私の選択はreact-day-pickerに行ったので、私はアプリケーションのテーマに最も似て見えるものを必要とした.UIはシンプルに見えるし、ゲームの夜に最適です.
私はこのコンポーネントがどのように動作しているかを理解するために、ドキュメントを読み、それを実装しようとした例を通して読みました.日付ピッカーの機能に問題はなかったが、スタイリングに苦労しなければならなかった.react-day-picker documentationで提供されたスタイルシートのダウンロードリンクが壊れていたので、デフォルトのスタイルを上書きするためにクラス名を調べるためにブラウザの検査官を使用しなければなりませんでした.同様の問題に関するいくつかのより多くの研究を行った後、私はアプリのテーマに一致する日付ピッカーを作成することができた.

私のプル要求を見た後、所有者は、日付ピッカーがあまりにも多くのスペースを取らないようにan input fieldの代わりにa calendarを使用することを提案した.ユーザーが日付を変更する必要がある場合は、フルカレンダーを拡張する必要があります.私は、ユーザーが過去に日付を選ぶことができるだけであるという私の意見を共有しました.私たち両方のお互いのアイデアに同意したので、機能を更新し続けた.

{/* Date Picker */}
<div className="flex flex-col gap-3">
   <label className=" text-lg text-left" htmlFor="winners">
      Please select a day
   </label
   <DayPickerInput 
      format='YYYY/MM/DD'
      value={date}
      placeholder={date}
      onDayChange={day => {setDate(day)}}
      dayPickerProps={{
         disabledDays:{after: new Date()}
      }}
   />
</div>

機能を完成する前に、私は所有者が色のために変数を使用していたので、一貫性を維持するためにそれらの変数でdayPicker.cssファイルの色をupdateに決めました.
それは私が問題を解決する予想よりも長くかかったが、私は非常に満足しており、最終的な結果に満足している.

発行3リンク:https://github.com/tyler-morales/game-night/issues/30
PR - 3関連:https://github.com/tyler-morales/game-night/pull/50