temp result without fruits list, but string from http

elm.json

@@ -8,9 +8,12 @@
         "direct": {
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
-            "elm/html": "1.0.0"
+            "elm/html": "1.0.0",
+            "elm/http": "2.0.0"
         },
         "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
             "elm/json": "1.1.3",
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",

src/Main.elm

@@ -2,6 +2,7 @@ module Main exposing (main)
 
 import Browser
 import Html exposing (Html, div, h1, li, text, ul)
+import Http
 
 
 type alias Fruit =
@@ -10,30 +11,48 @@ type alias Fruit =
     }
 
 
-type alias Flags =
-    List Fruit
+type FruitsRequest
+    = Loading
+    | Failure
+    | Success
 
 
 type alias Model =
-    { fruits : List Fruit }
+    { fruits : FruitsRequest }
 
 
-init : Flags -> ( Model, Cmd msg )
-init flags =
-    ( { fruits = flags }, Cmd.none )
+init : () -> ( Model, Cmd Msg )
+init _ =
+    ( { fruits = Loading }
+    , Http.get
+        { url = "http://my-json-server.typicode.com/maxfarseer/elm-webinar-2/fruits"
+        , expect = Http.expectString GotFruits
+        }
+    )
+
+
+type Msg
+    = GotFruits (Result Http.Error String)
 
 
-update : msg -> Model -> ( Model, Cmd msg )
+update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
-    ( model, Cmd.none )
+    case msg of
+        GotFruits response ->
+            case response of
+                Ok fruits ->
+                    ( { model | fruits = Success }, Cmd.none )
+
+                Err _ ->
+                    ( { model | fruits = Failure }, Cmd.none )
 
 
 renderItem : Fruit -> Html msg
 renderItem fruit =
     li [] [ text (fruit.emoji ++ " " ++ fruit.name) ]
 
 
-renderFruits : List Fruit -> Html msg
+renderFruits : List Fruit -> Html Msg
 renderFruits data =
     let
         list =
@@ -47,11 +66,12 @@ view model =
     div []
         [ h1 []
             [ text "Сезон фруктов!" ]
-        , renderFruits model.fruits
+
+        --, renderFruits model.fruits
         ]
 
 
-main : Program Flags Model msg
+main : Program () Model Msg
 main =
     Browser.element
         { init = init

src/index.js

@@ -1,14 +1,5 @@
 import { Elm } from './Main.elm'
 
-const fruits = [
-  { "name": "Яблоко", "emoji": "🍏" },
-  { "name": "Груша", "emoji": "🍐" },
-  { "name": "Банан", "emoji": "🍌" },
-  { "name": "Апельсин", "emoji": "🍊" },
-  { "name": "Лимон", "emoji": "🍋" }
-]
-
 Elm.Main.init({
-  flags: fruits,
   node: document.querySelector('main')
 })