SearchPage.Rest.elm

module Pages.SearchPage.Rest exposing (..)

import Html exposing (..)
import Http
import Json.Decode as JD exposing (..)
import Pages.SearchPage.Types exposing (Model, ImagePic, Msg)
import Json.Decode.Pipeline as JP
import RemoteData
 
fetchImagePics : Cmd Msg
fetchImagePics =
  Http.get fetchImagePicsUrl imagePicsDecoder
    |> RemoteData.sendRequest 
    |> Cmd.map Pages.SearchPage.Types.OnFetchImagePics

fetchImagePicsUrl : String
fetchImagePicsUrl =
  "http://localhost:4000/photos"

imagePicsDecoder : Decoder (List ImagePic)
imagePicsDecoder =
  JD.list imagePicDecoder

imagePicDecoder : Decoder ImagePic
imagePicDecoder =
  JP.decode ImagePic 
    |> JP.required "imageId" JD.string
    |> JP.required "imageTitle" JD.string
    |> JP.required "imageTaxname" JD.string

SearchPage.Type.elm

module Pages.SearchPage.Types exposing (..)

import Material
import RemoteData exposing (WebData)

-- MODULE
type alias ImagePic =
  { imageId : String
    , imageTitle : String
    , imageTaxname : String
  }

type alias Comment =
  {
    user : String
    , message : String
  }

type alias Model =
  {
    imagePics : WebData (List ImagePic)
    , newComment : String
    , showCloseButton : Bool
    , mdl : Material.Model
    , onlyPicture : Bool
  }

-- MESSAGE
type Msg =
  Mdl (Material.Msg Msg)
    | OnlyPictureToggleMsg
    | OnFetchImagePics (WebData (List ImagePic))
    | SearchPageMsg 

SearchPage.Update.elm

module Pages.SearchPage.State exposing (..)

import Pages.SearchPage.Types as Msgs exposing (Model, ImagePic, Msg)
import Pages.SearchPage.Rest exposing (fetchImagePics)
import Json.Decode exposing (..)
import Material
import RemoteData

-- INIT
initialModel : Model
initialModel = 
    { imagePics = RemoteData.Loading   
    , newComment = ""
    , showCloseButton = True
    , mdl = Material.model
    , onlyPicture = False
    } 

-- SUBCRIPTION
-- UPDATE
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case Debug.log "called" msg of
    Msgs.OnFetchImagePics response ->
      ( { model | imagePics = response }, Cmd.none )
    Msgs.Mdl msg_ ->
      Material.update Msgs.Mdl msg_ model
    Msgs.OnlyPictureToggleMsg ->
      ( { model | onlyPicture = not model.onlyPicture }, Cmd.none )

Update.elm

module State exposing (..)

import Types exposing (AppModel, Msg(..))
import Pages.HomePage.State exposing (..)
import Pages.SearchPage.State exposing (..)
import Pages.SearchPage.Rest exposing (fetchImagePics)
import Navigation exposing (Location)
import Routing exposing (Route(..), parseLocation)
import View exposing (view)
import Material
import Common.I18nText as I18n
import Debug

-- INIT
initialModel : Routing.Route -> AppModel
initialModel route = 
    {
      homePageModel = Pages.HomePage.State.initialModel
      , route = route
      , mdl = Material.model
      , selectedTab = 0
      , searchPageModel = Pages.SearchPage.State.initialModel
    }

init : Location -> (AppModel, Cmd Msg)
init location =
    let
        currentRoute =
          Routing.parseLocation location
    in
        ( initialModel currentRoute, Cmd.none )

-- SUBSCRIPTION
subscriptions : AppModel -> Sub Msg
subscriptions model =
  Sub.none

newUrl : Int -> Cmd Msg
newUrl k =
  if k == 1 then
    Navigation.newUrl "/#search"
  else  
    Navigation.newUrl "/"

-- UPDATE
update : Msg -> AppModel -> ( AppModel, Cmd Msg )
update msg model = 
  case Debug.log "base update called" msg of 
    OnLocationChange location ->
      let
          newRoute =
            parseLocation location
          
          commands : Cmd Msg
          commands =
            case newRoute of
                SearchRoute ->
                    fetchImagePics
                        |> Cmd.map SearchPageMsg
                _ ->
                    Cmd.none
                    
      in
          ( { model | route = newRoute }, commands )
    Mdl msg_ ->
      Material.update Mdl msg_ model
    HomePageMsg homePageMsg ->
      ( model, Cmd.none )
    SelectTab k ->
      ( { model | selectedTab = k }
        , newUrl k
      )
    SearchPageMsg searchPageMsg ->
      let 
        (searchPageModel, messages) = Pages.SearchPage.State.update searchPageMsg model.searchPageModel 
      in
      ( { model | searchPageModel = searchPageModel }, Cmd.map SearchPageMsg messages )