-
Notifications
You must be signed in to change notification settings - Fork 1
/
ImageSearch.elm
124 lines (95 loc) · 2.9 KB
/
ImageSearch.elm
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 ImageSearch exposing (State, init, Msg, update, view)
import Html.App
import Html
import Html.Attributes
import Html.Events
import Json.Decode
import Http
import Task
type State
= State
{ results : List PixabayImage
}
init : State
init =
State { results = [] }
type Msg
= DoSearch
| SearchFailure Http.Error
| SearchSuccess PixabaySearchResponse
| ImageSelected Image
type alias Image =
{ url : String }
type alias PixabaySearchResponse =
{ totalHits : Int
, hits : List PixabayImage
}
pixabaySearchResponseDecoder : Json.Decode.Decoder PixabaySearchResponse
pixabaySearchResponseDecoder =
Json.Decode.object2 PixabaySearchResponse
(Json.Decode.at [ "totalHits" ] Json.Decode.int)
(Json.Decode.at [ "hits" ] (Json.Decode.list pixabayImageDecoder))
type alias PixabayImage =
{ preview : String
, webFormat : String
}
pixabayImageDecoder : Json.Decode.Decoder PixabayImage
pixabayImageDecoder =
Json.Decode.object2 PixabayImage
(Json.Decode.at [ "previewURL" ] Json.Decode.string)
(Json.Decode.at [ "webformatURL" ] Json.Decode.string)
update : Msg -> State -> ( State, Cmd Msg, Maybe Image )
update msg (State state) =
case msg of
DoSearch ->
( State state
, Http.get pixabaySearchResponseDecoder "https://pixabay.com/api/?key=3055468-47029136a9b3612c0dbc36058&q=yellow+flowers&image_type=photo&pretty=true"
|> Task.perform SearchFailure SearchSuccess
, Nothing
)
SearchSuccess data ->
( State { state | results = data.hits }
, Cmd.none
, Nothing
)
SearchFailure _ ->
( State state, Cmd.none, Nothing )
ImageSelected image ->
( State state, Cmd.none, Just image )
view : State -> Html.Html Msg
view (State state) =
Html.div []
[ Html.button
[ Html.Events.onClick DoSearch
]
[ Html.text "Search" ]
, Html.ul [] (List.map viewImage state.results)
]
viewImage : PixabayImage -> Html.Html Msg
viewImage image =
Html.li []
[ Html.img
[ Html.Attributes.style
[ ( "max-width", "100px" )
, ( "max-height", "100px" )
]
, Html.Attributes.src image.preview
, Html.Events.onClick (ImageSelected { url = image.webFormat })
]
[]
]
main =
Html.App.program
{ init = ( init, Cmd.none )
, subscriptions = \_ -> Sub.none
, update =
\msg oldModel ->
let
( newModel, cmd, selectedImage ) =
update msg oldModel
_ =
Debug.log "selectedImage" selectedImage
in
( newModel, cmd )
, view = view
}