Todo の state 管理の変更

[watagit]

※https://github.com/bislab-temporary/mini-hackathon-a/pull/14 がマージされ次第取り組むイシューです。

✨ Summary

現状、以下のように Todo 周りの state を管理していると思います。

type TodoType = {
  title: string;
};

const Component = () => {
  // Todo のタイトル
  const [todos, setTodos] = useState<TodoType[]>(initialTodos);
  // Todo の状態（消化済みか否か）
  const [status, setStatus] = useState<boolean[]>([false, false, false]);
}

これらは1つの state として管理したほうが拡張性が上がると思われます。 以下のように型定義を変更して、リファクタリングしてみてください。

type TodoType = {
  // タイトル
  title: string;
  // 状態（消化済みか否か）
  isCompleted: boolean;
};

const initialTodos: TodoType[] = [
  { title: '資料を作る', isCompleted: false },
  { title: '歯医者に行く', isCompleted: false },
  { title: '課題をやる', isCompleted: false },
];

const Component = () => {
  // ✨ タイトルと状態をひとつの state で管理する
  const [todos, setTodos] = useState<TodoType[]>(initialState);
}

これらの型定義を変更するにあたって、ロジックも変更する必要があるので、やってみてください 🙄 余談ですが、これらの型定義が適切に反映されればチェックボックス周りのバグも直りそうな気がしてます！

🔥 Requirements

• 別々に管理されている state がひとつにまとめられる
• ロジックが適切に変更される

✅ Tasks

• [x] type TodoTypeにisCompletedパラメーターを追加する（Todo の型を定義している全てのファイル）
• [x] initialTodosにisCompletedのデータを追加する
• [ ] ロジック周りを変更する（少し難易度が高いかもので詰まったら discord でみんなに聞いてください〜）

[watagit]

@kacha-122 余裕があればこのイシューにチャレンジしてみてください〜

[kacha-122]

今からやってみます！ 多分今日プルリクは無理だと思いますが、明日何もないので頑張ります；；

[watagit]

@kacha-122 ゆっくりで良いのでデータの流れとか考えながら取り組めるとより良きです！ ✅ Taskの部分の上から順に取り組んでいくのが良いと思われます（最後のやつだけかなり抽象的な指示になっちゃってるのでちょっと時間かかるかもです）

[watagit]

あとおすすめのやり方としては、1日の終わりにどれだけ中途半端な状態でも良いのでドラフトでプルリクを作ることです 📄 そうすると、進捗具合が見えて、他のメンバーがサポートやアドバイスしやすいです！