Make pagination links work with history

ruby_event_store-browser/elm/src/Page/ShowStream.elm

@@ -119,7 +119,7 @@ browseEvents baseUrl title { links, events } relatedStreams timeZone =
             [ h1
                 [ class "font-bold text-2xl" ]
                 [ text title ]
-            , div [] [ displayPagination links ]
+            , div [] [ displayPagination baseUrl links ]
             ]
         , div [ class "px-8" ] [ renderResults baseUrl events timeZone ]
         , div [] [ renderRelatedStreams baseUrl relatedStreams ]
@@ -170,22 +170,21 @@ streamLink baseUrl streamName =
         [ text streamName ]
 
 
-displayPagination : Api.PaginationLinks -> Html Msg
-displayPagination { first, last, next, prev } =
+displayPagination : Url.Url -> Api.PaginationLinks -> Html Msg
+displayPagination baseUrl { first, last, next, prev } =
     ul [ class "flex" ]
-        [ li [] [ firstPageButton first ]
-        , li [] [ prevPageButton prev ]
-        , li [] [ nextPageButton next ]
-        , li [] [ lastPageButton last ]
+        [ li [] [ firstPageButton baseUrl first ]
+        , li [] [ prevPageButton baseUrl prev ]
+        , li [] [ nextPageButton baseUrl next ]
+        , li [] [ lastPageButton baseUrl last ]
         ]
 
 
-maybeHref : Maybe Api.PaginationLink -> List (Attribute Msg)
-maybeHref link =
+maybeHref : Url.Url -> Maybe Api.PaginationLink -> List (Attribute Msg)
+maybeHref baseUrl link =
     case link of
         Just url ->
-            [ href url
-            , onClick (GoToPage (Pagination.specificationFromUrl url))
+            [ href (Route.paginatedStreamUrl baseUrl (Pagination.streamIdFromUrl url) (Pagination.specificationFromUrl url))
             ]
 
         Nothing ->
@@ -197,31 +196,31 @@ paginationStyle =
     "text-center text-sm border-red-700 text-red-700 border rounded px-2 py-1 mr-1 disabled:text-red-700/50 disabled:border-red-700/50 disabled:cursor-not-allowed"
 
 
-nextPageButton : Maybe Api.PaginationLink -> Html Msg
-nextPageButton link =
-    button
-        (class paginationStyle :: maybeHref link)
+nextPageButton : Url.Url -> Maybe Api.PaginationLink -> Html Msg
+nextPageButton baseUrl link =
+    a
+        (class paginationStyle :: maybeHref baseUrl link)
         [ text "next" ]
 
 
-prevPageButton : Maybe Api.PaginationLink -> Html Msg
-prevPageButton link =
-    button
-        (class paginationStyle :: maybeHref link)
+prevPageButton : Url.Url -> Maybe Api.PaginationLink -> Html Msg
+prevPageButton baseUrl link =
+    a
+        (class paginationStyle :: maybeHref baseUrl link)
         [ text "previous" ]
 
 
-lastPageButton : Maybe Api.PaginationLink -> Html Msg
-lastPageButton link =
-    button
-        (class paginationStyle :: maybeHref link)
+lastPageButton : Url.Url -> Maybe Api.PaginationLink -> Html Msg
+lastPageButton baseUrl link =
+    a
+        (class paginationStyle :: maybeHref baseUrl link)
         [ text "last" ]
 
 
-firstPageButton : Maybe Api.PaginationLink -> Html Msg
-firstPageButton link =
-    button
-        (class paginationStyle :: maybeHref link)
+firstPageButton : Url.Url -> Maybe Api.PaginationLink -> Html Msg
+firstPageButton baseUrl link =
+    a
+        (class paginationStyle :: maybeHref baseUrl link)
         [ text "first" ]
 
 

ruby_event_store-browser/elm/src/Pagination.elm

@@ -1,6 +1,7 @@
-module Pagination exposing (Specification, empty, specificationFromUrl)
+module Pagination exposing (Specification, empty, specificationFromUrl, streamIdFromUrl)
 
 import Regex
+import Url
 
 type alias Specification =
     { position : Maybe String
@@ -26,3 +27,8 @@ extractPaginationPart regexString link =
 specificationFromUrl : String -> Specification
 specificationFromUrl link =
     Specification (extractPaginationPart "page%5Bposition%5D=([a-zA-Z0-9-]+)" link) (extractPaginationPart "page%5Bdirection%5D=([a-zA-Z0-9-]+)" link) (extractPaginationPart "page%5Bcount%5D=([a-zA-Z0-9-]+)" link)
+
+streamIdFromUrl : String -> String
+streamIdFromUrl link =
+    Debug.log ("given link" ++ link ++ "\n" ++ "decoded: " ++ (Debug.toString (Url.percentDecode (Maybe.withDefault "" (extractPaginationPart "streams/([a-zA-Z0-9-%]+)/" link)))))
+    Maybe.withDefault "" (Url.percentDecode (Maybe.withDefault "" (extractPaginationPart "streams/([a-zA-Z0-9-%]+)/" link)))

ruby_event_store-browser/elm/src/Route.elm

@@ -1,5 +1,6 @@
-module Route exposing (Route(..), buildUrl, decodeLocation, eventUrl, streamUrl)
+module Route exposing (Route(..), buildUrl, decodeLocation, eventUrl, streamUrl, paginatedStreamUrl)
 
+import Maybe.Extra
 import Pagination
 import Url
 import Url.Builder
@@ -30,25 +31,61 @@ urlWithoutBase baseUrl url =
     { url | path = String.dropLeft (String.length baseUrl.path) url.path }
 
 
-buildUrl : Url.Url -> List String -> String
-buildUrl baseUrl segments =
-    Url.Builder.absolute (pathSegments baseUrl ++ segments) []
+buildUrl : Url.Url -> List String -> List Url.Builder.QueryParameter -> String
+buildUrl baseUrl segments query =
+    Url.Builder.absolute (pathSegments baseUrl ++ segments) query
 
 
 streamUrl : Url.Url -> String -> String
 streamUrl baseUrl streamName =
-    buildUrl baseUrl [ "streams", Url.percentEncode streamName ]
+    paginatedStreamUrl baseUrl streamName Pagination.empty
+
+
+paginatedStreamUrl : Url.Url -> String -> Pagination.Specification -> String
+paginatedStreamUrl baseUrl streamName pagination =
+    buildUrl baseUrl [ "streams", Url.percentEncode streamName ] (paginationQueryParameters pagination)
 
 
 eventUrl : Url.Url -> String -> String
 eventUrl baseUrl eventId =
-    buildUrl baseUrl [ "events", Url.percentEncode eventId ]
+    buildUrl baseUrl [ "events", Url.percentEncode eventId ] []
 
 
 pathSegments : Url.Url -> List String
 pathSegments baseUrl =
     List.filter (\e -> e /= "") (String.split "/" baseUrl.path)
 
+
 browseEvents : String -> Maybe String -> Maybe String -> Maybe String -> Route
 browseEvents streamName maybePosition maybeDirection maybeCount =
     BrowseEvents streamName (Pagination.Specification maybePosition maybeDirection maybeCount)
+
+
+positionQueryParameter : Pagination.Specification -> Maybe Url.Builder.QueryParameter
+positionQueryParameter specification =
+    case specification.position of
+        Just position -> Just (Url.Builder.string "page[position]" position)
+        Nothing -> Nothing
+
+
+directionQueryParameter : Pagination.Specification -> Maybe Url.Builder.QueryParameter
+directionQueryParameter specification =
+    case specification.direction of
+        Just direction -> Just (Url.Builder.string "page[direction]" direction)
+        Nothing -> Nothing
+
+
+countQueryParameter : Pagination.Specification -> Maybe Url.Builder.QueryParameter
+countQueryParameter specification =
+    case specification.count of
+        Just count -> Just (Url.Builder.string "page[count]" count)
+        Nothing -> Nothing
+
+
+paginationQueryParameters : Pagination.Specification -> List Url.Builder.QueryParameter
+paginationQueryParameters specification =
+    Maybe.Extra.values
+        [ positionQueryParameter specification
+        , directionQueryParameter specification
+        , countQueryParameter specification
+        ]