前回は、施設編集ページで編集した内容をデータベースに保存する処理を作りました。

毎回書いていて気になっているのですが、これ、アプリじゃないですよね。っていうのを以前の記事でも書いたような気がします。

今の仕様ではDB保存ができたのかどうかわからないため、その結果を画面上に表示するようにします。

このコミットです。

アイディアはこうです。

• モデルにステータス表示用の状態値を追加
• 成功したらSuccess、失敗したらFailure、通常はNotAsked
• DB反映リクエスト結果に応じてこの状態値を更新する
• 状態値によって、ビューを変える

このためだけにモデルに値を追加するのはどうかと思いましたが、ほかに良い方法が思いつかないので、これでやってみました。どなたかご存知の方は教えてください。elm architectureとしてはどうするのが適切なのでしょうか。

src/Models.elmの編集

保存用ステータスの型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

src/Update.elmの編集

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ボタンを押してください、のようなメッセージも表示した方が親切かもしれません。

次回は、新しい施設を追加する機能を実装します。
最低限の機能で使えるところまで持っていきたいです。