Solution for advanced/part5

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
 
 

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
 
 

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) ]
+        ]