Httpget with blog from blog id in rest api thanks @jessta

Main.elm

module Main exposing (Msg(..), Post, init, main, postBlog, postBlogFromid, postDecoder, subscriptions, update, view, viewPost, viewPosts)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http exposing (Error(..))
import Json.Decode exposing (Decoder, field, float, int, map2, string)



-- MAIN


main =
    Browser.element
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }



-- MODEL
--data structure for decoder and post


type alias Post =
    { id : Int
    , title : String
    }


type alias Model =
    { id : String
    , title : String
    , status : HttpStatus
    }



--Status for https


type HttpStatus
    = Failure Http.Error
    | Loading
    | Success (List Post)
    | SuccessOne Post


--Inıt


init : () -> ( Model, Cmd Msg )
init _ =
    ( { id = "1", title = "", status = Loading }, postBlog )


type Msg
    = GetPost
    | Getid String
    | PostList (Result Http.Error (List Post))
    | OnePost (Result Http.Error Post)



-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        GetPost ->
            ( { id = "", title = "", status = Loading }, 
            if  String.isEmpty model.id ==True then
             postBlog 
             else 
              postBlogFromid model.id
              
              )

        Getid postid ->
            ( { model | id = postid }, Cmd.none )

        PostList result ->
            case result of
                Ok url ->
                    ( { model | status = Success url }, Cmd.none )

                Err error ->
                    ( { model | status = Failure error }, Cmd.none )

        OnePost result ->
            case result of
                Ok url ->
                    ( { model | status = SuccessOne url }, Cmd.none )

                Err error ->
                    ( { model | status = Failure error }, Cmd.none )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ h2 [] [ text "find blog" ]
        , viewPosts model
        ]


viewPosts : Model -> Html Msg
viewPosts model =
    case model.status of
        Failure error ->
            div []
                [ viewError error
                , input
                    [ placeholder "enter a posts id"
                    , value model.id
                    , autofocus True
                    , onInput Getid
                    ]
                    []
                , button [ onClick GetPost ] [ text "Try Again!" ]
                ]

        Loading ->
            text "Loading..."

        Success posts ->
            div []
                [ input
                    [ placeholder "enter a posts id"
                    , value model.id
                    , autofocus True
                    , onInput Getid
                    ]
                    []
                , button [ onClick GetPost ] [ text "GetPost" ]
                , pre [] (List.map viewPost posts)
                ]
   
        SuccessOne post  ->
            div []
                [ input
                    [ placeholder "enter a posts id"
                    , value model.id
                    , autofocus True
                    , onInput Getid
                    ]
                    []
                , button [ onClick GetPost ] [ text "GetPost" ]
                ,  viewPost post
                ]




viewPost : Post -> Html a
viewPost post =
    table []
        [ tr []
            [ th [] [ text "id" ]
            , th [] [ text "userid" ]
            , th [] [ text "title" ]
            ]
        , tr []
            [ td [] [ text <| "" ++ String.fromInt post.id ++ "" ]
            , td [] [ text <| "" ++ post.title ++ "" ]
            , td [] [ a [ href "" ] [ text "Edit" ] ]
            ]
        ]


viewError : Http.Error -> Html a
viewError error =
    let
        ( header, message ) =
            case error of
                BadUrl string ->
                    ( "Bad URL", string )

                Timeout ->
                    ( "The server did not respond", "" )

                NetworkError ->
                    ( "Network error", "" )

                BadStatus code ->
                    ( "HTTP Error " ++ String.fromInt code, "" )

                BadBody string ->
                    ( "JSON decoding error", string )
    in
    div []
        [ h3 [] [ text header ]
        , pre [] [ text message ]
        ]



-- HTTP
--its get posts for jsonplaceholder


postBlog : Cmd Msg
postBlog =
    Http.get
        { url = "https://my-json-server.typicode.com/typicode/demo/posts/"
        , expect = Http.expectJson PostList (Json.Decode.list postDecoder)
        }


postBlogFromid : String -> Cmd Msg
postBlogFromid blogid =
    Http.get
        { url = "https://my-json-server.typicode.com/typicode/demo/posts/" ++ blogid
        , expect = Http.expectJson OnePost postDecoder
        }



--decoder for json items


postDecoder : Decoder Post
postDecoder =
    map2 Post
        (field "id" int)
        (field "title" string)