elm-architecture-tutorial/examples/7/RandomGifList.elm at master · pdamoc/elm-architecture-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
module RandomGifList exposing (..)

import Html.App as H
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as Json

import RandomGif


-- MODEL

type alias Model =
    { topic : String
    , gifList : List (Int, RandomGif.Model)
    , uid : Int
    }


init : (Model, Cmd Msg)
init =
    ( Model "" [] 0
    , Cmd.none
    )


-- UPDATE

type Msg
    = Topic String
    | Create
    | SubMsg Int RandomGif.Msg


update : Msg -> Model -> (Model, Cmd Msg)
update message model =
    case message of
        Topic topic ->
            ( { model | topic = topic }
            , Cmd.none
            )

        Create ->
            let
                (newRandomGif, fx) =
                    RandomGif.init model.topic

                newModel =
                    Model "" (model.gifList ++ [(model.uid, newRandomGif)]) (model.uid + 1)
            in
                ( newModel
                , Cmd.map (SubMsg model.uid) fx
                )

        SubMsg msgId msg ->
            let
                subUpdate ((id, randomGif) as entry) =
                    if id == msgId then
                        let
                            (newRandomGif, fx) = RandomGif.update msg randomGif
                        in
                            ( (id, newRandomGif)
                            , Cmd.map (SubMsg id) fx
                            )
                    else
                        (entry, Cmd.none)

                (newGifList, fxList) =
                    model.gifList
                        |> List.map subUpdate
                        |> List.unzip
            in
                ( { model | gifList = newGifList }
                , Cmd.batch fxList
                )


-- VIEW

(=>) = (,)


view : Model -> Html Msg
view model =
    div []
        [ input
            [ placeholder "What kind of gifs do you want?"
            , value model.topic
            , onEnter model.topic
            , on "input" (Json.map Topic targetValue)
            , inputStyle
            ]
            []
        , div [ style [ "display" => "flex", "flex-wrap" => "wrap" ] ]
            (List.map elementView model.gifList)
        ]


elementView : (Int, RandomGif.Model) -> Html Msg
elementView (id, model) =
    H.map (SubMsg id) <| RandomGif.view model


inputStyle : Attribute Msg
inputStyle =
    style
        [ ("width", "100%")
        , ("height", "40px")
        , ("padding", "10px 0")
        , ("font-size", "2em")
        , ("text-align", "center")
        ]


onEnter : String -> Attribute Msg
onEnter topic =
  let
    createOnEnter code =
      if code == 13 then
        Create
      else (Topic topic)
  in
      on "keydown" (Json.map createOnEnter keyCode)