Add profile page

2 files changed, 43 insertions, 88 deletions

diff --git a/src/Pages/Feed.elm b/src/Pages/Feed.elm
index a7c2767..5afbbda 100644
--- a/src/Pages/Feed.elm
+++ b/src/Pages/Feed.elm
@@ -1,53 +1,17 @@
 module Pages.Feed exposing (..)
 
+import Components.PostList exposing (postList)
 import Css exposing (..)
-import DateFormat.Relative exposing (relativeTime)
 import Html.Styled exposing (..)
-import Html.Styled.Attributes exposing (css, href, placeholder, src, type_, value)
-import Html.Styled.Events exposing (onClick, onInput, onSubmit)
-import Html.Styled.Keyed as Keyed
-import Html.Styled.Lazy exposing (lazy)
+import Html.Styled.Attributes exposing (css, placeholder, type_, value)
+import Html.Styled.Events exposing (onInput, onSubmit)
 import RemoteData exposing (RemoteData(..))
-import Time exposing (now)
-import Types exposing (Model, Msg(..), Post)
-import Utils exposing (templ)
+import Types exposing (Model, Msg(..))
 
 
 styles =
     { page =
         css [ margin2 (px 10) auto ]
-    , postList =
-        css
-            [ marginBottom (px 10)
-            ]
-    , post =
-        css
-            [ padding2 (px 15) (px 20)
-            , backgroundColor (hex "#eee")
-            , marginBottom (px 10)
-            ]
-    , postImage =
-        css
-            [ marginBottom (px 20)
-            ]
-    , postProfilePicture =
-        css
-            [ width (px 40)
-            , height (px 40)
-            ]
-    , postHeader =
-        css
-            [ display inlineBlock
-            , marginLeft (px 10)
-            ]
-    , postTitle =
-        css
-            [ margin (px 0) ]
-    , postLikeButton =
-        css
-            [ marginRight (px 5)
-            , cursor pointer
-            ]
     , composeForm =
         css
             [ displayFlex
@@ -60,45 +24,8 @@ styles =
     }
 
 
-postDiv : Time.Posix -> Post -> Html Msg
-postDiv now post =
-    let
-        imageElem =
-            case post.imageUrl of
-                Just url ->
-                    img [ styles.postImage, src url ] []
-
-                Nothing ->
-                    text ""
-    in
-    div
-        [ styles.post ]
-        [ a [ href <| templ [ post.author.id ] "/profile/{0}" ]
-            [ span []
-                [ img [ styles.postProfilePicture, src post.userPictureUrl ] [] ]
-            , span [ styles.postHeader ]
-                [ h3 [ styles.postTitle ] [ text post.author.name ]
-                , i []
-                    [ text <| relativeTime now post.createdAt
-                    ]
-                ]
-            ]
-        , p [] [ text post.content ]
-        , imageElem
-        , span []
-            [ button [ styles.postLikeButton, onClick (LikePost post) ] [ text "👏 Clap" ]
-            , text <| String.fromInt post.likes
-            ]
-        ]
-
-
-keyedPostDiv : Time.Posix -> Post -> ( String, Html Msg )
-keyedPostDiv now post =
-    ( post.id, lazy (postDiv now) post )
-
-
-postsDiv : Model -> Html Msg
-postsDiv model =
+postsContainer : Model -> Html Msg
+postsContainer model =
     case model.posts of
         Initial ->
             div [] []
@@ -110,11 +37,11 @@ postsDiv model =
             div [] []
 
         Success posts ->
-            Keyed.node "div" [ styles.postList ] <| List.map (keyedPostDiv model.now) posts
+            postList model.now posts
 
 
-composeDiv : Model -> Html Msg
-composeDiv model =
+composeForm : Model -> Html Msg
+composeForm model =
     form [ styles.composeForm, onSubmit ComposePost ]
         [ input
             [ styles.composeInput
@@ -137,15 +64,17 @@ composeDiv model =
 mainSection : Model -> Html Msg
 mainSection model =
     main_ [] <|
-        [ composeDiv model
-        , postsDiv model
+        [ composeForm model
+        , postsContainer model
         ]
 
 
 body : Model -> Html Msg
 body model =
     div [ styles.page ]
-        [ mainSection model ]
+        [ h2 [] [ "All posts" |> text ]
+        , mainSection model
+        ]
 
 
 feedView : Model -> List (Html Msg)
diff --git a/src/Pages/Profile.elm b/src/Pages/Profile.elm
index a564b3e..479c908 100644
--- a/src/Pages/Profile.elm
+++ b/src/Pages/Profile.elm
@@ -1,9 +1,12 @@
 module Pages.Profile exposing (..)
 
+import Components.PostList exposing (postList)
 import Css exposing (marginBottom, px)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
-import Types exposing (Model, Msg, UrlSegmentUserId)
+import RemoteData exposing (RemoteData(..))
+import Types exposing (Model, Msg, Post, UrlSegmentUserId)
+import Utils exposing (templ)
 
 
 styles =
@@ -14,10 +17,33 @@ styles =
     }
 
 
+postsContainer : Model -> UrlSegmentUserId -> Html Msg
+postsContainer model id =
+    let
+        onlyProfilePosts : List Post -> List Post
+        onlyProfilePosts posts =
+            List.filter (\p -> p.author.id == id) posts
+    in
+    case model.posts of
+        Initial ->
+            div [] []
+
+        Loading ->
+            div [] [ text "Loading posts..." ]
+
+        Failure _ ->
+            div [] []
+
+        Success posts ->
+            postList model.now (onlyProfilePosts posts)
+
+
 body : Model -> UrlSegmentUserId -> Html Msg
-body _ id =
+body model id =
     div [ styles.container ]
-        [ text id ]
+        [ h2 [] [ "Posts by {0}" |> templ [ id ] |> text ]
+        , postsContainer model id
+        ]
 
 
 profileView : UrlSegmentUserId -> Model -> List (Html Msg)