149 lines
3.1 KiB
Elm
149 lines
3.1 KiB
Elm
module Main exposing (main)
|
|
|
|
import Article
|
|
import Browser
|
|
import Html exposing (..)
|
|
import Html.Attributes exposing (..)
|
|
import Html.Events exposing (onClick)
|
|
|
|
|
|
-- MODEL
|
|
|
|
|
|
type alias Model =
|
|
{ tags : List String
|
|
, selectedTag : String
|
|
|
|
{- 👉 TODO: change this `allArticles` annotation to the following:
|
|
|
|
allArticles : List Article
|
|
|
|
|
|
💡 HINT: You'll need to move the existing annotation to a `type alias`.
|
|
-}
|
|
, allArticles :
|
|
List
|
|
{ title : String
|
|
, description : String
|
|
, body : String
|
|
, tags : List String
|
|
, slug : String
|
|
}
|
|
}
|
|
|
|
|
|
{-| 👉 TODO: Replace this comment with a type annotation for `initialModel`
|
|
-}
|
|
initialModel =
|
|
{ tags = Article.tags
|
|
, selectedTag = "elm"
|
|
, allArticles = Article.feed
|
|
}
|
|
|
|
|
|
|
|
-- UPDATE
|
|
|
|
|
|
type alias Msg =
|
|
{ description : String
|
|
, data : String
|
|
}
|
|
|
|
|
|
{-| 👉 TODO: Replace this comment with a type annotation for `update`
|
|
-}
|
|
update msg model =
|
|
if msg.description == "ClickedTag" then
|
|
{ model | selectedTag = msg.data }
|
|
else
|
|
model
|
|
|
|
|
|
|
|
-- VIEW
|
|
|
|
|
|
{-| 👉 TODO: Replace this comment with a type annotation for `view`
|
|
-}
|
|
view model =
|
|
let
|
|
articles =
|
|
List.filter (\article -> List.member model.selectedTag article.tags)
|
|
model.allArticles
|
|
|
|
feed =
|
|
List.map viewArticle articles
|
|
in
|
|
div [ class "home-page" ]
|
|
[ viewBanner
|
|
, div [ class "container page" ]
|
|
[ div [ class "row" ]
|
|
[ div [ class "col-md-9" ] feed
|
|
, div [ class "col-md-3" ]
|
|
[ div [ class "sidebar" ]
|
|
[ p [] [ text "Popular Tags" ]
|
|
, viewTags model
|
|
]
|
|
]
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
{-| 👉 TODO: Replace this comment with a type annotation for `view`
|
|
-}
|
|
viewArticle article =
|
|
div [ class "article-preview" ]
|
|
[ h1 [] [ text article.title ]
|
|
, p [] [ text article.description ]
|
|
, span [] [ text "Read more..." ]
|
|
]
|
|
|
|
|
|
{-| 👉 TODO: Replace this comment with a type annotation for `view`
|
|
-}
|
|
viewBanner : Html Msg
|
|
viewBanner =
|
|
div [ class "banner" ]
|
|
[ div [ class "container" ]
|
|
[ h1 [ class "logo-font" ] [ text "conduit" ]
|
|
, p [] [ text "A place to share your knowledge." ]
|
|
]
|
|
]
|
|
|
|
|
|
{-| 👉 TODO: Replace this comment with a type annotation for `view`
|
|
-}
|
|
viewTag selectedTagName tagName =
|
|
let
|
|
otherClass =
|
|
if tagName == selectedTagName then
|
|
"tag-selected"
|
|
else
|
|
"tag-default"
|
|
in
|
|
button
|
|
[ class ("tag-pill " ++ otherClass)
|
|
, onClick { description = "ClickedTag", data = tagName }
|
|
]
|
|
[ text tagName ]
|
|
|
|
|
|
viewTags : Model -> Html Msg
|
|
viewTags model =
|
|
div [ class "tag-list" ] (List.map (viewTag model.selectedTag) model.tags)
|
|
|
|
|
|
|
|
-- MAIN
|
|
|
|
|
|
main : Program () Model Msg
|
|
main =
|
|
Browser.sandbox
|
|
{ init = initialModel
|
|
, view = view
|
|
, update = update
|
|
}
|