BottomScroll.elm

module BottomScroll exposing (main)

import InfiniteScroll as IS
import Html exposing (..)
import Html.Attributes exposing (style)
import Http
import Json.Decode as JD


type Msg
    = InfiniteScrollMsg IS.Msg
    | InfiniteScrollMsg2 IS.Msg
    | OnDataRetrieved (Result Http.Error (List String))
    | OnDataRetrieved2 (Result Http.Error (List String))


type alias Model =
    { infScroll : IS.Model Msg
    , myinfScroll : IS.Model Msg
    , content : List String
    , mycontent : List String
    }


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


initModel : Model
initModel =
    { infScroll = IS.init loadMore |> IS.offset 0 |> IS.direction IS.Bottom
    , myinfScroll = IS.init loadMore2 |> IS.offset 0 |> IS.direction IS.Bottom
    , content = []
    , mycontent = []
    }


init : ( Model, Cmd Msg )
init =
    let
        model =
            initModel
    in
        ( { model
            | infScroll = IS.startLoading model.infScroll
            , myinfScroll = IS.startLoading model.myinfScroll
          }
        , Cmd.batch [ loadContent, loadContent2 ]
        )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case Debug.log "msg" msg of
        InfiniteScrollMsg msg_ ->
            let
                ( infScroll, cmd1 ) =
                    IS.update InfiniteScrollMsg msg_ model.infScroll
            in
                ( { model | infScroll = infScroll }, cmd1 )

        InfiniteScrollMsg2 msg_ ->
            let
                ( myinfScroll, cmd2 ) =
                    IS.update InfiniteScrollMsg msg_ model.myinfScroll
            in
                ( { model | myinfScroll = myinfScroll }, cmd2 )

        OnDataRetrieved (Err _) ->
            let
                infScroll =
                    IS.stopLoading model.infScroll
            in
                ( { model | infScroll = infScroll }, Cmd.none )

        OnDataRetrieved (Ok result) ->
            let
                content =
                    List.concat [ model.content, result ]

                infScroll =
                    IS.stopLoading model.infScroll
            in
                ( { model | content = content, infScroll = infScroll }, Cmd.none )

        OnDataRetrieved2 (Err _) ->
            let
                myinfScroll =
                    IS.stopLoading model.myinfScroll
            in
                ( { model | myinfScroll = myinfScroll }, Cmd.none )

        OnDataRetrieved2 (Ok result) ->
            let
                mycontent =
                    List.concat [ model.mycontent, result ]

                myinfScroll =
                    IS.stopLoading model.myinfScroll
            in
                ( { model | mycontent = mycontent, myinfScroll = myinfScroll }, Cmd.none )


stringsDecoder : JD.Decoder (List String)
stringsDecoder =
    JD.list JD.string


loadContent : Cmd Msg
loadContent =
    Http.get "https://baconipsum.com/api/?type=all-meat&paras=3" stringsDecoder
        |> Http.send OnDataRetrieved


loadMore : IS.Direction -> Cmd Msg
loadMore dir =
    loadContent


loadContent2 : Cmd Msg
loadContent2 =
    Http.get "https://baconipsum.com/api/?type=all-meat&paras=2" stringsDecoder
        |> Http.send OnDataRetrieved2


loadMore2 dir =
    loadContent2


view : Model -> Html Msg
view model =
    table []
        [ tr
            []
            [ td []
                [ div
                    [ style
                        [ ( "height", "200px" )
                        , ( "width", "400px" )
                        , ( "overflow", "auto" )
                        , ( "border", "1px solid #000" )
                        , ( "margin", "auto" )
                        ]
                    , IS.infiniteScroll InfiniteScrollMsg
                    ]
                    ((List.map viewContentItem model.content) ++ loader model)
                ]
            , td []
                [ div
                    [ style
                        [ ( "height", "200px" )
                        , ( "width", "400px" )
                        , ( "overflow", "auto" )
                        , ( "border", "1px solid #0f0" )
                        , ( "margin", "auto" )
                        ]
                    , IS.infiniteScroll InfiniteScrollMsg2
                    ]
                    ((List.map viewContentItem model.mycontent) ++ loader model)
                ]
            ]
        ]


viewContentItem : String -> Html Msg
viewContentItem item =
    p [] [ text item ]


loader : Model -> List (Html Msg)
loader { infScroll, myinfScroll } =
    if IS.isLoading infScroll then
        [ div
            [ style
                [ ( "color", "red" )
                , ( "font-weight", "bold" )
                , ( "text-align", "center" )
                ]
            ]
            [ text "Loading ..." ]
        ]
    else if IS.isLoading myinfScroll then
        [ div
            [ style
                [ ( "color", "red" )
                , ( "font-weight", "bold" )
                , ( "text-align", "center" )
                ]
            ]
            [ text "Loading ..." ]
        ]
    else
        []


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