diff --git a/advanced/part5/src/Page/Home.elm b/advanced/part5/src/Page/Home.elm index 7bedc9a..7614d40 100644 --- a/advanced/part5/src/Page/Home.elm +++ b/advanced/part5/src/Page/Home.elm @@ -109,7 +109,7 @@ view model = ] , Feed.viewArticles model.timeZone feed |> List.map (Html.map GotFeedMsg) - , [ viewPagination (Feed.articles feed) ] + , [ PaginatedList.view ClickedFeedPage (Feed.articles feed) ] ] ] @@ -155,46 +155,6 @@ viewBanner = --- PAGINATION - - -{-| 👉 TODO: Relocate `viewPagination` into `PaginatedList.view` and make it reusable, -then refactor both Page.Home and Page.Profile to use it! - -💡 HINT: Make `PaginatedList.view` return `Html msg` instead of `Html Msg`. -(You'll need to introduce at least one extra argument for this to work.) - --} -viewPagination : PaginatedList (Article Preview) -> Html Msg -viewPagination list = - let - viewPageLink currentPage = - pageLink currentPage (currentPage == page list) - in - if total list > 1 then - List.range 1 (total list) - |> List.map viewPageLink - |> ul [ class "pagination" ] - - else - Html.text "" - - -pageLink : Int -> Bool -> Html Msg -pageLink targetPage isActive = - li [ classList [ ( "page-item", True ), ( "active", isActive ) ] ] - [ a - [ class "page-link" - , onClick (ClickedFeedPage targetPage) - - -- The RealWorld CSS requires an href to work properly. - , href "" - ] - [ text (String.fromInt targetPage) ] - ] - - - -- TABS diff --git a/advanced/part5/src/Page/Profile.elm b/advanced/part5/src/Page/Profile.elm index 1c16d43..5a661d7 100644 --- a/advanced/part5/src/Page/Profile.elm +++ b/advanced/part5/src/Page/Profile.elm @@ -218,7 +218,7 @@ view model = [ [ viewTabs model.feedTab ] , Feed.viewArticles model.timeZone feed |> List.map (Html.map GotFeedMsg) - , [ viewPagination (Feed.articles feed) ] + , [ PaginatedList.view ClickedFeedPage (Feed.articles feed) ] ] ] ] @@ -246,46 +246,6 @@ view model = --- PAGINATION - - -{-| 👉 TODO: Relocate `viewPagination` into `PaginatedList.view` and make it reusable, -then refactor both Page.Home and Page.Profile to use it! - -💡 HINT: Make `PaginatedList.view` return `Html msg` instead of `Html Msg`. -(You'll need to introduce at least one extra argument for this to work.) - --} -viewPagination : PaginatedList (Article Preview) -> Html Msg -viewPagination list = - let - viewPageLink currentPage = - pageLink currentPage (currentPage == page list) - in - if total list > 1 then - List.range 1 (total list) - |> List.map viewPageLink - |> ul [ class "pagination" ] - - else - Html.text "" - - -pageLink : Int -> Bool -> Html Msg -pageLink targetPage isActive = - li [ classList [ ( "page-item", True ), ( "active", isActive ) ] ] - [ a - [ class "page-link" - , onClick (ClickedFeedPage targetPage) - - -- The RealWorld CSS requires an href to work properly. - , href "" - ] - [ text (String.fromInt targetPage) ] - ] - - - -- PAGE TITLE diff --git a/advanced/part5/src/PaginatedList.elm b/advanced/part5/src/PaginatedList.elm index 7c2c1e4..bdb7fa5 100644 --- a/advanced/part5/src/PaginatedList.elm +++ b/advanced/part5/src/PaginatedList.elm @@ -1,5 +1,6 @@ -module PaginatedList exposing (PaginatedList, fromList, fromRequestBuilder, map, page, total, values) +module PaginatedList exposing (PaginatedList, fromList, fromRequestBuilder, map, page, total, values, view) +import Article exposing (Article, Preview) import Html exposing (Html, a, li, text, ul) import Html.Attributes exposing (class, classList, href) import Html.Events exposing (onClick) @@ -87,3 +88,32 @@ fromRequestBuilder resultsPerPage pageNumber builder = -- VIEW + + +view : (Int -> msg) -> PaginatedList (Article Preview) -> Html msg +view toMsg list = + let + viewPageLink currentPage = + pageLink toMsg currentPage (currentPage == page list) + in + if total list > 1 then + List.range 1 (total list) + |> List.map viewPageLink + |> ul [ class "pagination" ] + + else + Html.text "" + + +pageLink : (Int -> msg) -> Int -> Bool -> Html msg +pageLink toMsg targetPage isActive = + li [ classList [ ( "page-item", True ), ( "active", isActive ) ] ] + [ a + [ class "page-link" + , onClick (toMsg targetPage) + + -- The RealWorld CSS requires an href to work properly. + , href "" + ] + [ text (String.fromInt targetPage) ] + ]