diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Main.elm | 34 | ||||
| -rw-r--r-- | src/Pages/Feed.elm | 37 | ||||
| -rw-r--r-- | src/Types.elm | 7 |
3 files changed, 59 insertions, 19 deletions
diff --git a/src/Main.elm b/src/Main.elm index 71cda11..32cd992 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -6,8 +6,9 @@ import Config exposing (makeApiUrl) import Header exposing (headerView) import Html.Styled exposing (..) import Http -import Json.Decode exposing (Decoder, field, int, list, map2, map6, string) +import Json.Decode exposing (Decoder, field, int, list, map2, map7, maybe, string) import Json.Encode +import Json.Encode.Extra import Pages.Feed exposing (feedView) import RemoteData import Task @@ -46,13 +47,15 @@ port requestLogout : () -> Cmd msg init : Flags -> Url -> Key -> ( Model, Cmd Msg ) init flags _ key = let + initModel : Model initModel = { now = Time.millisToPosix 0 , key = key , userData = flags.userData , apiURL = flags.apiURL , posts = RemoteData.Loading - , composeInputValue = "" + , composeTextInputValue = "" + , composeImageInputValue = "" } in ( initModel @@ -103,12 +106,15 @@ update msg model = , showAlert <| httpErrorToString httpErr ) - ComposeInputChanged value -> - ( { model | composeInputValue = value }, Cmd.none ) + ComposeTextInputChanged value -> + ( { model | composeTextInputValue = value }, Cmd.none ) + + ComposeImageInputChanged value -> + ( { model | composeImageInputValue = value }, Cmd.none ) ComposePost -> ( model - , if String.length model.composeInputValue > 0 then + , if String.length model.composeTextInputValue > 0 then composePost model else @@ -118,7 +124,8 @@ update msg model = ComposedPost (Result.Ok post) -> ( { model | posts = RemoteData.map (\posts -> post :: posts) model.posts - , composeInputValue = "" + , composeTextInputValue = "" + , composeImageInputValue = "" } , Cmd.none ) @@ -169,16 +176,26 @@ likePost model post = composePost : Model -> Cmd Msg composePost model = + let + imageUrl : Maybe String + imageUrl = + if model.composeImageInputValue /= "" then + Just model.composeImageInputValue + + else + Nothing + in Http.post { url = makeApiUrl model Config.ApiCompose , expect = Http.expectJson ComposedPost postDecoder , body = Http.jsonBody (Json.Encode.object - [ ( "content", Json.Encode.string model.composeInputValue ) + [ ( "content", Json.Encode.string model.composeTextInputValue ) , ( "createdAt", Json.Encode.int <| Time.posixToMillis model.now // 1000 ) , ( "likes", Json.Encode.int 0 ) , ( "userPictureUrl", Json.Encode.string model.userData.pictureUrl ) + , ( "imageUrl", Json.Encode.Extra.maybe Json.Encode.string imageUrl ) , ( "author" , Json.Encode.object [ ( "id", Json.Encode.string model.userData.email ) @@ -215,7 +232,7 @@ postsDecoder = postDecoder : Decoder Post postDecoder = - map6 Post + map7 Post (field "id" string) (field "content" string) (field "author" @@ -227,6 +244,7 @@ postDecoder = (field "createdAt" decodeTime) (field "likes" int) (field "userPictureUrl" string) + (maybe <| field "imageUrl" string) diff --git a/src/Pages/Feed.elm b/src/Pages/Feed.elm index 73875a3..53f60a2 100644 --- a/src/Pages/Feed.elm +++ b/src/Pages/Feed.elm @@ -17,9 +17,7 @@ styles = css [ margin2 (px 10) auto ] , postList = css - [ overflow scroll - , maxHeight (vh 70) - , marginBottom (px 10) + [ marginBottom (px 10) ] , post = css @@ -27,6 +25,10 @@ styles = , backgroundColor (hex "#eee") , marginBottom (px 10) ] + , postImage = + css + [ marginBottom (px 20) + ] , postProfilePicture = css [ width (px 40) @@ -59,6 +61,15 @@ 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 ] [ span [] @@ -70,8 +81,9 @@ postDiv now post = ] ] , p [] [ text post.content ] + , imageElem , span [] - [ button [ styles.postLikeButton, onClick (LikePost post) ] [ text "❤️ Like" ] + [ button [ styles.postLikeButton, onClick (LikePost post) ] [ text "👏 Clap" ] , text <| String.fromInt post.likes ] ] @@ -104,8 +116,15 @@ composeDiv model = [ input [ styles.composeInput , placeholder "Type a new post..." - , onInput ComposeInputChanged - , value model.composeInputValue + , onInput ComposeTextInputChanged + , value model.composeTextInputValue + ] + [] + , input + [ styles.composeInput + , placeholder "Image URL (optional)" + , onInput ComposeImageInputChanged + , value model.composeImageInputValue ] [] , button [ type_ "submit" ] [ text "➡️" ] @@ -115,15 +134,15 @@ composeDiv model = headerSection : Model -> Html msg headerSection _ = header [] - [ h1 [] [ text "Shoob book" ] + [ h1 [] [ text "😎 SOMEBOOK" ] ] mainSection : Model -> Html Msg mainSection model = main_ [] <| - [ postsDiv model - , composeDiv model + [ composeDiv model + , postsDiv model ] diff --git a/src/Types.elm b/src/Types.elm index 2438932..f10223e 100644 --- a/src/Types.elm +++ b/src/Types.elm @@ -12,7 +12,8 @@ type alias Model = , userData : UserData , apiURL : String , posts : RemoteData (List Post) - , composeInputValue : String + , composeTextInputValue : String + , composeImageInputValue : String } @@ -40,7 +41,8 @@ type Msg | LikePost Post | LikedPost (Result Http.Error Post) -- COMPOSE POST - | ComposeInputChanged String + | ComposeTextInputChanged String + | ComposeImageInputChanged String | ComposePost | ComposedPost (Result Http.Error Post) @@ -58,4 +60,5 @@ type alias Post = , createdAt : Time.Posix , likes : Int , userPictureUrl : String + , imageUrl : Maybe String } |