Add feed

1 files changed, 95 insertions, 0 deletions

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 ]