1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
module Pages.Feed exposing (..)
import Css exposing (..)
import DateFormat.Relative exposing (relativeTime)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, placeholder, type_, value)
import Html.Styled.Events exposing (onClick, onInput, onSubmit)
import Time exposing (now)
import Types exposing (Model, Msg(..), Post)
styles =
{ page =
css
[ maxWidth (px 600)
, margin2 (px 10) auto
]
, postList =
css
[ overflow scroll
, maxHeight (vh 70)
, marginBottom (px 10)
]
, post =
css
[ padding2 (px 15) (px 20)
, backgroundColor (hex "#eee")
, marginBottom (px 10)
]
, postTitle =
css
[ margin (px 0) ]
, postLikeButton =
css
[ marginRight (px 5)
, cursor pointer
]
, composeForm =
css
[ displayFlex
, flexFlow2 row wrap
]
, composeInput =
css
[ flex (int 1)
]
}
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 =
case model.posts of
Just posts ->
div [ styles.postList ] <| List.map (postDiv model.now) posts
Nothing ->
div [] [ text "Loading posts..." ]
composeDiv : Model -> Html Msg
composeDiv model =
form [ styles.composeForm, onSubmit ComposePost ]
[ input
[ styles.composeInput
, placeholder "Type a new post..."
, onInput ComposeInputChanged
, value model.composeInputValue
]
[]
, button [ type_ "submit" ] [ text "➡️" ]
]
headerSection : Model -> Html msg
headerSection _ =
header []
[ h1 [] [ text "Shoob book" ]
]
mainSection : Model -> Html Msg
mainSection model =
main_ [] <|
[ postsDiv model
, composeDiv model
]
body : Model -> Html Msg
body model =
div [ styles.page ]
[ headerSection model
, mainSection model
]
feedView : Model -> List (Html Msg)
feedView model =
[ body model ]
|
