picshare_working_comment.elm

module Picshare exposing (main)
import Browser
import Html exposing (..)
-- 2. add onInput and onSubmit
import Html.Events exposing (onClick, onInput, onSubmit)
-- 1. add disabled and value
import Html.Attributes exposing (class, src, placeholder, type_, disabled, value)
type alias Model = 
  { url : String
  , caption : String
  , liked : Bool
  , comments : List String
  , newComment : String
  }
main : Program () Model Msg
main =
    Browser.sandbox
    { init = initialModel
    , view = view
    , update = update
    }
view : Model -> Html Msg
view model =
    div []
    [
        div [ class "header" ]
            [ h1 [] [text "Picshare"] ],
        div [ class "content-flow"]
            [ viewDetailedPhoto model]
    ]
-- 3. add two message types related to comments
type Msg
    = ToggleLike
    | UpdateComment String
    | SaveComment

viewLoveButton : Model -> Html Msg
viewLoveButton model =
  let
    buttonClass =
      if model.liked then
        "fa-heart"
      else
        "fa-heart-o"
  in
  div [ class "like-button" ]
  [ i
    [ class "fa fa-2x"
    , class buttonClass
    , onClick ToggleLike 
    ]
    []
  ]
viewComment : String -> Html Msg
viewComment comment =
  li []
    [ strong [] [ text "Comment:" ]
    , text (" " ++ comment)
    ]
viewCommentList : List String -> Html Msg
viewCommentList comments =
  case comments of
    [] ->
      text ""
    _ ->
        div [ class "comments" ]
          [ ul []
            (List.map viewComment comments)
          ]
viewComments : Model -> Html Msg
viewComments model =
  div []
    [ viewCommentList model.comments
    -- 4. add Event
    , form [ class "new-comment", onSubmit SaveComment]
      [ input
        [ type_ "text"
        , placeholder "Add a comment..."
        -- 5. add value to comment input and event onInput
        , value model.newComment
        , onInput UpdateComment
        ]
        []
      , button
      -- 6. add disable attribute to button only if comment input is empty
        [ disabled (String.isEmpty model.newComment) ]
        [ text "Save" ]
      ]
    ]
viewDetailedPhoto : Model -> Html Msg
viewDetailedPhoto  model =
    div [ class "detailed-photo" ]
        [
        img [ src model.url ] []
        , div [ class "photo-info"]
            [ viewLoveButton model
            , h2 [ class "caption" ] [ text model.caption]
            , viewComments model
          ]
        ]
update :
  Msg
    -> Model
    -> Model
update msg model =
  case msg of
    ToggleLike ->
      { model | liked = not model.liked }
    -- 7. add case for messages UpdateComment and SaveComment
    UpdateComment comment ->
      {model | newComment = comment }
    SaveComment ->
      saveNewComment model
--8. implement saveNewComment update Model function
saveNewComment : Model -> Model
saveNewComment model =
  let
    comment =
    -- 8.1 we remove spaces before and after newComment 
      String.trim model.newComment
  in
    case comment of
    -- 8.2 model is not changed for empty comment
      "" -> model
      _ ->
      -- 8.3 update comments and set to empty newComment model attribute
        { model
        | comments = model.comments ++ [ comment ]
        , newComment = ""
        }

baseUrl : String
baseUrl = "https://www.hps.hr/files/data/"
initialModel : Model
initialModel = 
    { url = baseUrl ++ "27/kuce.folder/planinarska-kuca-picelj.jpg"
      , caption = "Picelj Park Near Zabok"
      , liked = False
      , comments = [ "Really nice place!" ]
      , newComment = ""
    }