Add images to posts

6 files changed, 94 insertions, 31 deletions

diff --git a/db.json b/db.json
index de541f8..fb6383c 100644
--- a/db.json
+++ b/db.json
@@ -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
diff --git a/index.html b/index.html
index 592b78d..aa7842e 100644
--- a/index.html
+++ b/index.html
@@ -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
     }