トーストの実装

やること

「アップロードが完了しました」などの通知を表示するためのメッセージボックスを、トースト式に変更する（Snackbar という別名もある）。事例はググればいっぱい出るので省略。既存のライブラリも無数にあるが、自前で実装した方が早くて楽でカスタマイズもしやすいのでそのようにする。

トーストはダイアログと同様に、普通のページのレイアウトと独立して一番手前に表示される。

とりあえず配置はページの右下で、2 つ以上のトーストが同時に表示される場合は下から順番に積み上がる。フェードイン・フェードアウトのアニメーションを表示する。色は success, info, warning, danger の 4 種類（Bootstrap 3 の基本 4 色に対応）。

現在のメッセージボックスの実装は、主に circus-web-ui/src 内の以下の 2 つのファイルにある。

store/messages.ts (状態管理のコード)
pages/MessageBox.tsx （メッセージボックス自体の定義、Redux との接続）
pages/Application.tsx （メッセージボックスの画面への描画）

覚えるべきこと

Redux
- Redux: 状態管理ライブラリ。ある程度の規模の React アプリではとても重要。props を奥深くまでバケツリレーするのを防ぐために使う。「ストア」「リデューサ」といった概念を把握する。
- Redux Toolkit: Redux をエレガントに使えるようにするための公式推奨ライブラリ。
- React-Redux: React から Redux を使うためのバインディング。
CSS-in-JS (styled-components): 基本 LESS と同じような雰囲気のコードを JavaScript ファイル内で書けるようにできるライブラリ。
CSS
- CSS によるページ右下への配置
- アニメーションのための CSS Transition, transitionend イベント
React
- コンテクストの使い方（Redux の仕組みを学んだら必然的に覚えることになる）
- メインのレイアウトフロー外にコンテンツをレンダーするためのポータルの使い方（もしかしたら使わずに実装できるかも）

実装方針

レイアウトとアニメーションは CSS のみでほぼ実装できるはず。CSS Transition、Flexbox、position: relative、クラスを有効に使う。
アニメーションに対応するため、messages の reducer の改修を行う。現在はメッセージの表示が終了したら、dismissMessage や dismissMessageOnChange の内部でメッセージを即座に消しているが、今後は退場アニメーションが終わるまでの 0.5 秒ほどの間はストア内にメッセージを残す必要がある。これらのアクション内ではメッセージに "disappearing" のような新しい状態を付与し、それにより退場アニメーションがトリガされるようにする。退場アニメーションが本当に終わったところで完全にメッセージをストアから削除するようにする。