前回は、施設編集ページで編集した内容をデータベースに保存する処理を作りました。
毎回書いていて気になっているのですが、これ、アプリじゃないですよね。っていうのを以前の記事でも書いたような気がします。
今の仕様ではDB保存ができたのかどうかわからないため、その結果を画面上に表示するようにします。
このコミットです。
アイディアはこうです。
- モデルにステータス表示用の状態値を追加
- 成功したらSuccess、失敗したらFailure、通常はNotAsked
- DB反映リクエスト結果に応じてこの状態値を更新する
- 状態値によって、ビューを変える
このためだけにモデルに値を追加するのはどうかと思いましたが、ほかに良い方法が思いつかないので、これでやってみました。どなたかご存知の方は教えてください。elm architectureとしてはどうするのが適切なのでしょうか。
保存用ステータスの型FacilitySaveStatus
を定義し、モデルに追加します。
-- DB保存ステータスを追加
type alias Model =
{ facilities: WebData (List Facility)
, route: Route
, facilitySaveStatus: FacilitySaveStatus -- 追加
}
-- 初期モデルにもDB保存ステータスを追加
initialModel : Route -> Model
initialModel route =
{ facilities = RemoteData.Loading
, route = route
, facilitySaveStatus = NotAsked -- 追加
}
-- 保存ステータスの型
type FacilitySaveStatus
= Success
| Failure
| NotAsked
DB保存リクエスト結果がOk
ならSuccess
、Err
ならFailure
、とステータスを変更します。
-- 追加インポート
import Models exposing (Model, Facility, FacilitySaveStatus(..))
-- DB保存リクエスト結果を受け取った時に、ステータスを変更するよう修正
Msgs.OnFacilitySave (Ok facility) ->
( updateFacility model facility, Cmd.none )
let
modelSuccess = { model | facilitySaveStatus = Success } -- Success
in
( updateFacility modelSuccess facility, Cmd.none )
Msgs.OnFacilitySave (Err error) ->
let _ = Debug.log "OnFacilitySave error:" error in
( model, Cmd.none )
let
_ = Debug.log "OnFacilitySave error:" error
modelFailure = { model | facilitySaveStatus = Failure } -- Failure
in
( modelFailure, Cmd.none )
src/View.elmの編集
-- 追加インポート
import Html exposing (Html, div, p, text)
import Html.Attributes exposing (class)
import Models exposing (Model, Facility, FacilityId, FacilitySaveStatus(..))
-- ステータスに応じて表示を変更する関数を使うように変更
case maybeFacility of
Just facility ->
viewWithSaveStatus model.facilitySaveStatus facility -- 変更箇所
Nothing ->
notFoundView "facility ID not found"
-- ステータスに応じて、表示を変更
viewWithSaveStatus : FacilitySaveStatus -> Facility -> Html Msg
viewWithSaveStatus status facility =
case status of
Success ->
div []
[ Facilities.SingleEdit.view facility
, p [ class "green" ] [ text "Save facility success!!"]
]
Failure ->
div []
[ Facilities.SingleEdit.view facility
, p [ class "orange" ] [ text "Save facility failed."]
]
NotAsked ->
div []
[ Facilities.SingleEdit.view facility
, p [] []
]
以上で、DB保存が成功した(リクエスト結果がOk)なら「Save facility success!!」、失敗したら「Save facility faild.」と表示することができるようになりました。
こんな感じです。
あとは、フィールドに何か入力した時に、まだ保存されていないので保存するにはsaveボタンを押してください、のようなメッセージも表示した方が親切かもしれません。
次回は、新しい施設を追加する機能を実装します。
最低限の機能で使えるところまで持っていきたいです。