Gizra / elm-editable-webdata / Editable.WebData

An EditableWebDataWrapper represents an Editable value, along with WebData.

EditableWebDataWrapper is a wrapper type around Editable and WebData

It is used in order to keep track of the state of the Editable upon saving. That is, as we change the Editable value, and send it to the backend, we can keep track of their state (e.g. RemoteData.Success or RemoteData.Failure).


type alias EditableWebData a =
EditableWebDataWrapper a ()

Most typical use case, is to wrap an Editable value, and have a unit (()) act the the value of the WebData.


type EditableWebDataWrapper a b

A wrapper for Editable, that allows provides the means to track saving back to the backend via WebData.

If there is not value for WebData to track (i.e. it doesn't need to hold the success value), you can pass a unit value (()).

import Editable

view : EditableWebDataWrapper String -> Html msg
view editableWebData =
    let
        value =
            Editable.WebData.toEditable |> Editable.value

        toWebData =
            Editable.WebData.toWebData
    in
    text <| "Editable value is: " ++ toString value ++ " with a WebDataValue of " ++ toString toWebData

create : a -> EditableWebDataWrapper a b

Creates a new EditableWebDataWrapper.

This will create the EditableWebDataWrapper with the default values ReadOnly for the Editable and NotAsked for the WebData, as those are the values you are likely to begin with. You can of course later updated it, for example:

import Editable
import RemoteData

-- Change the `Editable` value
Editable.WebData.create "old"
    |> Editable.WebData.map (Editable.edit)
    |> Editable.WebData.map (Editable.map (always "new"))
    |> Editable.WebData.toEditable
    |> Editable.value --> "new"

-- Change the `WebData` state
Editable.WebData.create "original"
    |> Editable.WebData.state RemoteData.Loading
    |> Editable.WebData.toWebData --> RemoteData.Loading

map : (Editable a -> Editable a) -> EditableWebDataWrapper a b -> EditableWebDataWrapper a b

Maps function to the Editable.

import Editable

Editable.WebData.create "old"
    -- Convert to `Editable` and update the value in one go.
    |> Editable.WebData.map (Editable.edit >> Editable.map (always "new"))
    |> Editable.WebData.toEditable
    |> Editable.value --> "new"

Editable.WebData.create "old"
    -- Convert to `Editable` and update the value in one go.
    |> Editable.WebData.map (Editable.edit >> Editable.map (\val -> val ++ " is now new"))
    |> Editable.WebData.toEditable
    |> Editable.value --> "old is now new"

toEditable : EditableWebDataWrapper a b -> Editable a

Extracts the Editable value.

import Editable

Editable.WebData.create "new"
    |> Editable.WebData.toEditable --> Editable.ReadOnly "new"

Editable.WebData.create "old"
    |> Editable.WebData.map(Editable.edit)
    |> Editable.WebData.map(Editable.map (always "new"))
    |> Editable.WebData.toEditable --> Editable.Editable "old" "new"

state : RemoteData.WebData b -> EditableWebDataWrapper a b -> EditableWebDataWrapper a b

Updates the WebData value.

For updating the value of the Editable itself, see the example of map.

import RemoteData

Editable.WebData.create "new"
    |> Editable.WebData.state RemoteData.Loading
    |> Editable.WebData.toWebData --> RemoteData.Loading

Editable.WebData.create "new"
    |> Editable.WebData.state (RemoteData.Success ())
    |> Editable.WebData.toWebData --> RemoteData.Success ()

toWebData : EditableWebDataWrapper a b -> RemoteData.WebData b

Extracts the WebData value.

import RemoteData

Editable.WebData.create "new"
    |> Editable.WebData.toWebData --> RemoteData.NotAsked

Editable.WebData.create "new"
    |> Editable.WebData.state RemoteData.Loading
    |> Editable.WebData.toWebData --> RemoteData.Loading