# 課題3 シン・学習記録

TypeScriptやChakuraUIを学んだあなたは学習記録アプリをリニューアルすることにしました

また、過去に作った記録を編集できるように改良も行います
これで学習記録アプリは完成です

# MVP1

アプリ開発の準備をする
ユーザーはアプリをスマホからみることができる

## TODO
- [ ] React+TypeScriptの開発環境をViteで用意する
- [ ] Fireabseにデプロイする(新規プロジェクトを作成)
- [ ] Makefileを作成(make deployでデプロイできる)
- [ ] VSCodeに以下の拡張機能を入れる
- [ ] ESLint
- [ ] Prettier
https://qiita.com/fehde/items/a48bcb9df209b71c2de3
- [ ] LiveShare
- [ ] Code Spell Checker
- [ ] indent-rainbow
- [ ] ES7+ React/Redux/React-Native

# MVP2

開発者はCI/CDを利用して快適に開発を行うことができる

## TODO
- [ ] Jestとreact-testing-libraryを導入する
参考: https://hackmd.io/QwhWv9CNT_6Zzj6IO0MUuQ
- [ ] サンプルのテスト(関数とコンポーネント)が動く
テストが実行できることを確認できるテストを適当に書いて実行する(タイトルがあること等)
- [ ] Makefileでテストを実行できる(make test)
- [ ] Github ActionsでPushでパイプラインが動くように設定する
- [ ] ビルドステップが実行される
- [ ] 自動テストが実行される
- [ ] 自動デプロイが実行される

# MVP3

ユーザーは学習アプリをいままで通り利用できる
デザインはChakuraUIを使い自分なりにデザインを作ること

## TODO
- [ ] ChakuraUIを導入する
- [ ] ChakuraUIのボタンを表示して導入されたかを確認する
- [ ] ユーザーはタイトルをみることができる
- [ ] supabaseの初期設定をする(supabaseのプロジェクトは前回のプロジェクトを使う)
- [ ] ユーザーは学習記録一覧をみることができる
学習記録はクラスを使って表示すること(typeでなく)
typeとinterfaceとふclassの違いは適宜調べること
https://typescriptbook.jp/reference/object-oriented/class

src/domain/record.tsを作り以下のクラスを使うとよい

    export class Record {
      constructor(public id: string, public title: string, public time: string) {}
    }

またレコードを返すsupabaseの関数は戻り値をRecord型にするように(dataをそのまま返すとanyになるので注意)
インスタンスの作り方も読んでおくこと
https://qiita.com/Tsuyoshi84/items/e74109e2ccc0f4e625aa

- [ ] ユーザーはデータ取得のときにローディング画面をみることができる(データを取得したらテーブルが表示される)
- [ ] ユーザーは記録の一覧を見ることができる
- [ ] ユーザーは学習記録を登録することができる
- [ ] 登録ボタンを押すとモーダルが表示される
- [ ] モーダルには登録とキャンセルボタンがある
- [ ] 学習記録と学習時間を入力するフォームがある
- [ ] すべての項目を入力して登録ボタンを押すと登録されてフォームが閉じる
- [ ] 入力がない場合はエラーになる(react-hook-formを使うこと)
- [ ] react-hook-formを導入する
- [ ] 学習記録を入力していないと「内容の入力は必須です」とでる
- [ ] 学習時間が入力していないと「時間の入力は必須です」とでる
- [ ] 時間を0以上でない値を入力したら「時間は0以上である必要があります」
- [ ] 登録をして再度登録モーダルを開いても前の入力内容が残っていないことを確認する(ステートの初期化)
- [ ] ユーザーは学習記録を削除することができる
- [ ] テストを実装する
- [ ] ローディング画面をみることができる
- [ ] テーブルをみることができる(リスト)
- [ ] ~~テーブルのカラムの1つ目が「学習内容~~
- [ ] ~~テーブルカラムの2つ目が「学習時間」~~
- [ ] 新規登録ボタンがある
- [ ] タイトルがあること
- [ ] 登録できること
- [ ] モーダルが新規登録というタイトルになっている
- [ ] 学習内容がないときに登録するとエラーがでる
- [ ] 学習時間がないときに登録するとエラーがでる
- [ ] 未入力のエラー
- [ ] 0以上でないときのエラー
- [ ] 削除ができること
ここでsupabaseと通信があるところは、モックをいれて実装すること
モックとは何か？も理解すること
https://jestjs.io/ja/docs/mock-functions
https://qiita.com/only/items/466a09c8602466fe2333

デザインに必要ならreact-iconを使うのもおすすめです
https://react-icons.github.io/react-icons/

# MVP4

ユーザーは学習記録を編集することができる

## TODO
- [ ] 編集ボタンがそれぞれの記録ごとに表示されている
- [ ] 編集ボタンを押すとモーダルが表示される
- [ ] モーダルにはフォームがあり、ボタンを押した記録の学習内容と学習時間が表示されている
- [ ] 内容と時間を編集して保存することができる
- [ ] タイトルが記録編集である(新規登録ではない)
- [ ] 保存を押すとモーダルが閉じて、一覧の該当する記録が更新される
- [ ] キャンセルを押すとモーダルが閉じる
- [ ] 保存を押すとフォームがクリアされる
- [ ] 編集のテストを書く
- [ ] モーダルのタイトルが記録編集である
- [ ] 編集して登録すると更新される

注意 : モーダルは使い回すようにすること(コンポーネント化はしないでよい、ifで新規か編集かを判断)
編集ボタンを押したら紐づくレコードの内容が表示されるようにする(別の押したらそれに変わる、新規登録なら空になる)

# MVP5
- [ ] 記事を書く

サンプルアプリ
https://shin-simple-study.web.app/