sin9270 / task-chuter Goto Github PK

タイトルの通り。

現状はエラーは発生しないが、TypeScriptに移行するために対象ファイルの拡張子に.tsを追加する際に問題になるので、予め対応しておく。

eslintのオプションに--no-error-on-unmatched-patternを追加すれば良い。

Active Tasksのロード時、より正確にはActiveTaskコンポーネントのmount時に、ログに次のようなwarningが出るので解消する。
Found elements with non-unique id #standard-basic:

タスク名のTextFieldにユニークなidを割り当てていないことが原因だと思われる。

タスクの検索中にタスクを並べ替えようとしても、順番が変わらない。そもそも検索中に並べ替えても非表示のタスクとの並び順の整合性がとれないので、検索中はタスクのドラッグ自体をできなくし、並べ替え機能を無効化する。

タイトルの通り。Active Tasks、Completed Tasksの両方に実装する。

chai、easytimer.jsが不要なので、削除する。

PWAとして動作するように、設定ファイル等を追加する。

webpackがstrict modeだと(デフォルトでstrict modeになっている)、トランスパイル時にES6で書かれたファイルに自動で'use strict'を付けてくれるようなので、自分で書く必要はない。

現在はeslintの対象外ファイルを.gitignoreと共有しているが、gitの管理対象外ファイルとは異なるケースがあるので、独自に.eslintrc.jsonを作成する。

タイトルの通り。propsがボタンに渡っていないことが原因。

client/src/containerscomponents/organisms/header.js を Header.js に、
client/src/containerscomponents/organisms/mobileHeader.js を MobileHeader.js に変更する。
import文も合わせて変更する。

タイトルの通り。 #49 が原因だと思われる。至急修正する。

milliSecToHhmmssms()がActiveTaskとCompletedTaskにそれぞれ実装されているので、共通化する。
新しくclient/src/utils/taskUtil.js を作成し、そこにmilliSecToHhmmssms()を配置する。

新規に作成したタスクが検索条件に該当しない場合、作成したタスクが表示されない。動作としては正しいのだが、作成したタスクが表示されないと混乱するので、タスク作成時に検索条件をクリアして全タスクが表示されるようにする。

タイトルの通り。タブを切り替えても検索条件を保持するようにする。

各コンポーネントのテストを作成し、push時に実行されるようにする。

タイトルの通り。

タイトルを編集するとstateが変更されるが、タイマーをstartする等をしないとindexedDBには保存されないことが原因。メモも同様。
タイマーの時刻の更新処理の際にはindexedDBに保存したくないので、時刻とその他の項目でstate更新のactionを分け、後者のactionではstateをindexedDBに保存するようにする。

画面サイズに応じてデザインを切り替えられるようにする。
一旦スマホサイズのみに対応する。

HTMLの文法では、id属性が重複することは許されていない。
standard-basic standard-search という id が重複しているので、これらが重複しないよう修正する。

対象ファイル
client/src/containers/organisms/ActiveTask.js
client/src/containers/pages/ActiveTaskList.js

タイトルの通り。

現在はGithub Actionsでのテスト実行前にアプリをビルドしているが、テスト時にはビルドは不要なようなので、ビルドタスクを削除する。

eslint-plugin-simple-import-sort を導入し、import文を自動ソートする。

次の手順で導入する。

1. TypeScript関連のmoduleをinstallし、transpileとlintができるようにする
2. JSファイルをTypeScriptで書き直す。lintでエラーが出るので、propTypesは残したままにする
3. prop-typesのmoduleと、propTypesの定義を削除する
4. babel関連のmoduleを削除し、関連する設定ファイルを修正する

検索できるのに表示されないのは変なので、noteを表示するようにする。

bundleしたJSファイルのファイル名が同じなため、ブラウザにキャッシュされてしまい、スーパーリロードしないと変更が反映されない。ファイルを変更した場合はファイル名が変わるようにwebpackを設定し、キャッシュを防ぐ。

moduleをupdateしたことでredux-starter-kitのpackage名が変わったことが原因。
https://github.com/reduxjs/redux-toolkit/releases/tag/v1.0.4

Undoする時以外に削除されたタスクにアクセスする手段がないので、初期表示時やログイン時に削除状態のタスクはIndexedDBから削除するようにする。

タイトルのまま。一度Pauseしてから再度Startすると正しい時間に更新される。ログを見る限り、タイマー処理自体が止まっているようだ。

タイトルの通り。

タイトルの通り。

presentational component & container component のよくある構成と、atomic design の構成が混在しているので、きちんとしたatomic design のディレクトリ構成にまとめる。

試しにButtonコンポーネントをTypeScript化し、動作することを確認する。

Active Tasks と同じように、Completed Tasks にもタスク名とメモで検索できる機能を実装する。

コンポーネントのstylingの方法にインラインスタイルとStyledComponentsが混在しているので、StyledComponentsに統一する。

次の記事が参考になる。

• https://qiita.com/lightnet328/items/218eb1c4a347302cc340#styledcomponents
• https://qiita.com/Ouvill/items/c6761c32d31ffb11e114

ファイルをキャッシュさせ、オフラインでも動作するようにする。

例えば、 https://reverent-lumiere-e24db3.netlify.com/active-task-list にアクセスすると、activeなタスク一覧のページが表示されるはずだが、404エラーになる。netlify上にデプロイした環境で react-router が動作しないことが原因?

次の記事を参考に、 public/_redirects を作成する。
https://medium.com/@rexben/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5

webpack-mergeは開発時しか使用しないので、devDependenciesに移動する。おそらくno-unpublished-importのエラーが発生するので、.eslintrc.jsonを修正する。

class-based component のままだとテストが書きづらいので functional component に書き直す。今ある component は全て functional に置き換えられるはず。ライフサイクルメソッドの処理は hooks API を使って書き換える。

現在使っているボタンは全てデザインが同じなので、独立したコンポーネントとして分離し再利用できるようにする。

タイトルの通り。また、PropTypesを定義していなくてもエラーにならないようにESLintのルールから除外していたが、含めるようにする。

Active Tasksのページを開くと、PropTypesのwarningが出てしまう。titleContains、noteContains、lastLogの三つのpropsが必須になっているのにコンポーネントに渡っていないことが原因。これらのpropsは必須ではないので、propTypesの定義からisRequiredを削除する。