cerchez07/elm-0.19-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solution for advanced/part5

Browse Source
This commit is contained in:
Richard Feldman
2018-08-14 03:17:02 -04:00
parent 176b28ae6b
commit 46870e98bf
3 changed files with 33 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
advanced/part5/src/Page/Home.elm
View File

@@ -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

42
advanced/part5/src/Page/Profile.elm
View File

@@ -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

32
advanced/part5/src/PaginatedList.elm
View File

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