elmでwebアプリ作成16 〜新規追加施設をDBに保存

前回は、新規追加ページを作りましたが、まだビューができただけで実際にはregisterボタンを押しても追加できません。

今回は、新規追加する施設をDBに保存する処理を実装します。

今回は変更内容が多いので、ソースコードを貼り付けるのはやめます。コミット毎に記事を投稿して詳細に説明を、と思っていたのですが、だんだん厳しくなってきました。そもそもこのスタイルにしてから2,3記事しか出してないのにもう挫折。

変更内容だけ簡単にまとめて置きます。

elm-package install danyx23/elm-uuid -- 施設追加時にuuidを使うため
elm-package install mgold/elm-random-pcg -- uuidパッケージに必要

registerNewFacilityCmdは、新規追加用コマンドで、Update.elmから呼ばれます。
registerNerFacilityRequestは実際の施設追加リクエストです。json serverの仕様として、新規フィールド追加時は、パスの最後にidを含めずに、POSTリクエストを送ります。そうすると追加されます。新規フィールドのidは、フィールド内で空になっている場合は自動で付与されますが、今回はFacilityデータにidを付与した状態で送っているので、そのidで登録されます。もしidが既にある場合はリクエストが失敗します。
参考：json serverについて

newFacilityをviewの引数に追加しました。施設情報を変更した時と同様に、各フィールドの入力時にこのnewFacilityにデータを保存して置き、registerボタンが押された時に一度だけリクエストを送るようにします。
各フィールドの入力時にnewFacilityにデータを保存するため、onInputでメッセージを送ります。
registerボタンは、onClickでHttpリクエスト用のメッセージを送ります。

port というのを使ってjavascriptとデータをやり取りします。今回は、uuid生成のための初期seedをjsから受け取るために使います。js側で乱数生成をして、それをelmで受け取って初期seedとして使います。
参考：ElmのPortでJSを使う。（qiita）
参考：公式チュートリアルのページ

モデルにデータを追加しました。newFacilityは上に書いたとおりです。newFacilityRegisteringStatusは施設編集の時と同様に、リクエストが成功したか失敗したかを画面に表示するための状態値です。uuidSeedはuuid生成のためのseedです。純粋関数型言語では、乱数の扱いが通常の言語に比べて少し面倒なようです。uuidSeedはjsから受け取った乱数で初期化した後は、uuid生成時に出てくる新しいseedで更新していきます。そうすることで生成されるuuidのランダム性が保証されるようです。というか当たり前ですが毎回同じseedを使っていたら毎回同じuuidが生成されます。
initialModelも合わせて修正しました。newFacilityの初期値はemptyFacilityです。
uuidモジュールでは、randomパッケージではなくelm-random-pcgパッケージが必要です。この二つの乱数パッケージはほぼ同じインターフェイスを提供しているようです。
type alias UuidSeedは、削除し忘れていますが、使っていません。

jsで生成した乱数を受け取るためにGetRandomSeed Intを追加しました。portでjsから値を受け取るためには、subscriptionsを使う必要があり、そこからこのメッセージが送信されます。
後は、新規施設の各フィールド入力時のメッセージと登録リクエスト送信用メッセージです。

新規施設ページでの各フィールド入力時のアップデートと、登録リクエストのためのアップデートです。ポイントとしては、Msgs.RegisterNewFacilityのところで、uuidを生成してnewFacilityに追加してからリクエストコマンドに渡しています。その時に新しいseedも生成されるので、Model.uuidSeedも更新して置きます。

新規施設追加ページと編集ページの両方で、リクエスト結果表示機能を使うので、viewWithRequestStatusでビューをラップすることで共通化しました。

以上で、施設新規追加ができるようになりました。

今の所、どうでもいい情報しか載っていないので、何か意味のある情報を得られるサイトにしたいです。やっぱりまずはトイレかなあ。

v0.0.1