レビュー② 全体 - Githubissues

やること

[x] ReactHooksを使う
[x] TypeScriptで書く→ anyを使用しても良いので型エラーを解消する

▼TODOリスト内の各TODOにほしい要素

[x] ID(連番もしくはuuidを設定)
[x] タイトル
[x] ステータス(未着手、進行中、完了など)
[x] 詳細

▼ほしい機能

[x] TODOの追加
[x] TODOの削除
[x] TODOの編集機能
[x] 絞り込み機能(ID、期限、ステータスで絞り込み)

▼余裕があれば以下のようなカスタマイズをする

[x] anyを使わずに型付けを行なう
[ ] 期限の追加などの要素追加（期限、内容、作成日、更新日など）
[ ] ソート(ID、期限)
[ ] ステータス変更でスタイル変更
[x]コンポーネント化してみる
[x] MaterialUIやChakraUI、もしくはTailwind CSSを使ってみる
[x] Recoilを使って状態管理
[x] Firebaseまたは、Supabaseを導入してデータの永続化

レビュー

TODOの削除・TODOの編集機能

現実装では以下のような状況です。

todoを新規に追加した後に「削除」ボタンをクリックすると、画面からは削除されるがデータは削除されない
todoを新規に追加した後に「編集」ボタンをクリックして入力値を変更し「保存」ボタンをクリックすると、編集のリクエストが失敗する（400エラー）

原因は、todoを新規に追加した場合にidプロパティがドキュメントのidとなっていないからですね。

そのため、src/components/AddTodo.tsxのtodoを追加する処理がありますが、

  const addTodo = async () => {
    console.log("addTodo called"); // 関数呼び出し確認
    const newTodo: Todo = {
      id: uuidv4(),
      title,
      status: "未着手",
      details,
    };
    // 作ったものを配列に加える
    try {
      console.log("デバッグ用、Firestoreに追加");
      const docRef = await addDoc(collection(db, "todos"), newTodo);
      console.log("デバッグ用、idと一緒に記載: ", docRef.id);

      setTodoList([...todoList, newTodo]);
      // 追加後フォームのクリア
      setTitle("");
      setDetails("");
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  };

以下の箇所のnewTodoのidをdocRef.idに変更する必要がありますね！

setTodoList([...todoList, newTodo]);

コードレビュー

改善ポイント

Reactのインポートは不要です！
1. 理由
  1. React v17から記述が不要となったため
  2. https://qiita.com/Yz_4230/items/ce70927d36f7a6cf619d
2. 対象コード例
```
    import React, { useState, useEffect } from "react";
```
定義された変数や関数が呼び出し元でどのようなものか分かるようにjsDocを使ってコメントを書くと良いです！
1. https://zenn.dev/overflow_offers/articles/20230220-how-to-use-js-doc
src/App.tsxについて
1. 以下の記述はuseRecoilStateで1つにまとめることができますね！
```
  const setTodoList = useSetRecoilState(todoListState);
  const todoList = useRecoilValue(todoListState); // 現在のTODOリストを取得
```
2. statusFilterは型定義があると良いですね！'すべて' | '未着手' | '進行中' | '完了'を個別の型として定義するイメージです
```
  const [statusFilter, setStatusFilter] = useState("すべて"); // ステータスフィルターの状態管理
```

継続ポイント

コメントが多く、改行が適切に行われているので大変見やすいです！
try-catchが使われていて、エラーハンドリングを意識したコードがGoodです！
ボタンの感触が分かるデザインと、todo1つ1つが際立って見えるデザインがナイスです！
フィルター機能や検索機能はつまづく方が多いですが、バッチリですね！

Shuheitkhs / todo-app