diff options
| -rw-r--r-- | db.json | 36 | ||||
| -rw-r--r-- | index.html | 9 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/Main.elm | 34 | ||||
| -rw-r--r-- | src/Pages/Feed.elm | 37 | ||||
| -rw-r--r-- | src/Types.elm | 7 |
6 files changed, 94 insertions, 31 deletions
@@ -1,13 +1,27 @@ { - "posts": [{ - "content": "testi", - "createdAt": 1636028524, - "likes": 0, - "userPictureUrl": "https://lh3.googleusercontent.com/a-/AOh14Ggi0fsy3DrKGf2CswW96pft9BO3tDskxr0241FmxQ=s96-c", - "author": { - "id": "jans.tuomi@gmail.com", - "name": "Jan Tuomi" - }, - "id": "1" - }] + "posts": [ + { + "content": "testi", + "createdAt": 1636028524, + "likes": 1, + "userPictureUrl": "https://lh3.googleusercontent.com/a-/AOh14Ggi0fsy3DrKGf2CswW96pft9BO3tDskxr0241FmxQ=s96-c", + "author": { + "id": "jans.tuomi@gmail.com", + "name": "Jan Tuomi" + }, + "id": "1" + }, + { + "content": "funni cat image hehe", + "createdAt": 1636036093, + "likes": 9, + "userPictureUrl": "https://lh3.googleusercontent.com/a-/AOh14Ggi0fsy3DrKGf2CswW96pft9BO3tDskxr0241FmxQ=s96-c", + "imageUrl": "https://i.pinimg.com/originals/8c/ab/4e/8cab4e46f19b1c4ae0ed8ff6c5115e7d.jpg", + "author": { + "id": "jans.tuomi@gmail.com", + "name": "Jan Tuomi" + }, + "id": "Rq-vXQX" + } + ] }
\ No newline at end of file @@ -6,6 +6,15 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./vendor/main.css"> + <style> + body { + margin: 0 auto; + } + + img { + width: 100%; + } + </style> <script src="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></script> <!-- <script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script> --> </link> diff --git a/package.json b/package.json index c641e7a..56505ad 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "start": "parcel index.html", "build": "parcel build index.html", - "db": "json-server --watch db.json" + "db": "json-server --watch -p 5678 db.json" }, "author": "", "license": "ISC", 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 } |