From a972058d20b773f4488df51babb40156c5a335e1 Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Fri, 29 Oct 2021 15:22:52 +0300 Subject: Add feed --- src/Pages/Feed.elm | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 src/Pages/Feed.elm (limited to 'src/Pages/Feed.elm') diff --git a/src/Pages/Feed.elm b/src/Pages/Feed.elm new file mode 100644 index 0000000..a848200 --- /dev/null +++ b/src/Pages/Feed.elm @@ -0,0 +1,95 @@ +module Pages.Feed exposing (..) + +import Css exposing (..) +import DateFormat.Relative exposing (relativeTime) +import Html.Styled exposing (..) +import Html.Styled.Attributes exposing (css) +import Html.Styled.Events exposing (onClick) +import Time exposing (now) +import Types exposing (DisplayableError(..), Model, Msg(..), Post) + + +styles = + { page = + css + [ maxWidth (px 600) + , margin2 (px 10) auto + ] + , post = + css + [ padding2 (px 15) (px 20) + , backgroundColor (hex "#eee") + ] + , postTitle = + css + [ margin (px 0) ] + , postLikeButton = + css + [ marginRight (px 5) + , cursor pointer + ] + } + + +derrorToHtml : DisplayableError -> Html Msg +derrorToHtml derror = + case derror of + DNoError -> + text "" + + DHttpError httpErr -> + text <| Debug.toString httpErr + + +derrorDiv : Model -> Html Msg +derrorDiv model = + div [] + [ derrorToHtml model.displayError ] + + +postDiv : Time.Posix -> Post -> Html Msg +postDiv now post = + div [ styles.post ] + [ h3 [ styles.postTitle ] [ text post.author.name ] + , i [] + [ text <| relativeTime now post.createdAt + ] + , p [] [ text post.content ] + , span [] + [ button [ styles.postLikeButton, onClick (LikePost post) ] [ text "❤️ Like" ] + , text <| String.fromInt post.likes + ] + ] + + +postsDiv : Model -> Html Msg +postsDiv model = + div [] <| List.map (postDiv model.now) model.posts + + +headerSection : Model -> Html msg +headerSection _ = + header [] + [ h1 [] [ text "Shoob book" ] + ] + + +mainSection : Model -> Html Msg +mainSection model = + main_ [] <| + [ derrorDiv model + , postsDiv model + ] + + +body : Model -> Html Msg +body model = + div [ styles.page ] + [ headerSection model + , mainSection model + ] + + +feedView : Model -> List (Html Msg) +feedView model = + [ body model ] -- cgit v1.3