Style paginator component

src/components/blog/ArticleFooter.svelte

@@ -21,7 +21,7 @@
       <ul class={tagsListClass}>
         {#each post.tags as tag}
           <li class={tagsListLiClass}>
-            <a href="/blog?tag={tag}">{tag}</a>
+            <a href="/blog/tags/{tag}">{tag}</a>
           </li>
         {/each}
       </ul>

src/components/paginator/Paginator.css.ts

@@ -0,0 +1,21 @@
+import { sprinkles } from '$lib/styles/sprinkles.css'
+
+export const listClass = sprinkles({
+  listStyle: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+})
+
+export const listItemClass = sprinkles({
+  paddingX: '1x',
+})
+
+export const activePage = sprinkles({
+  //fontStyle: 'italic',
+  fontWeight: 'bold',
+  paddingX: '2x',
+})
+
+export const pageLinkClass = sprinkles({
+  paddingX: '1x',
+})

src/components/paginator/Paginator.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import {
+    activePage,
+    listClass,
+    listItemClass,
+    pageLinkClass,
+  } from './Paginator.css'
+
+  import { getPaginatorPages, createHref } from './paginatorUtils'
+
+  // TODO styles
+  export const Divider = 'divider'
+
+  export let href: string
+  export let page: number
+  export let pageSize: number
+  export let totalCount: number
+  export let filters: Record<string, string>
+  let paginatorPages: (number | typeof Divider)[]
+
+  $: paginatorPages = getPaginatorPages({ page, pageSize, totalCount })
+</script>
+
+<ul class={listClass}>
+  {#if page !== 1}
+    <li class="{listItemClass} ">
+      <a class={pageLinkClass} href={createHref(href, filters, page - 1)}
+        >&lt;</a
+      >
+    </li>
+  {/if}
+  {#each paginatorPages as pageNumber}
+    {#if pageNumber === Divider}
+      <li class={listItemClass}>...</li>
+    {:else if page === pageNumber}
+      <li class="{listItemClass} {activePage}">{pageNumber}</li>
+    {:else}
+      <li class="{listItemClass} ">
+        <a class={pageLinkClass} href={createHref(href, filters, pageNumber)}
+          >{pageNumber}</a
+        >
+      </li>
+    {/if}
+  {/each}
+  {#if page !== paginatorPages.length}
+    <li class="{listItemClass} ">
+      <a class={pageLinkClass} href={createHref(href, filters, page + 1)}
+        >&gt;</a
+      >
+    </li>
+  {/if}
+</ul>

src/components/paginator/paginatorUtils.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from 'vitest'
+import { Divider, getPaginatorPages } from './paginatorUtils'
+
+describe('Paginator component', () => {
+  describe('Paginator generates feasable pages to display', () => {
+    test('Page: 1/5', () => {
+      expect(
+        getPaginatorPages({ page: 1, totalCount: 5, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5])
+    })
+    test('Page: 4/7', () => {
+      expect(
+        getPaginatorPages({ page: 4, totalCount: 7, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, 7])
+    })
+    test('Page: 4/8', () => {
+      expect(
+        getPaginatorPages({ page: 4, totalCount: 8, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, Divider, 8])
+    })
+    test('Page: 1/10', () => {
+      expect(
+        getPaginatorPages({ page: 1, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, Divider, 10])
+    })
+    test('Page: 2/10', () => {
+      expect(
+        getPaginatorPages({ page: 2, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, 2, 3, 4, 5, 6, Divider, 10])
+    })
+    test('Page: 5/10', () => {
+      expect(
+        getPaginatorPages({ page: 5, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 3, 4, 5, 6, 7, Divider, 10])
+    })
+    test('Page: 7/10', () => {
+      expect(
+        getPaginatorPages({ page: 7, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
+    })
+    test('Page: 8/10', () => {
+      expect(
+        getPaginatorPages({ page: 8, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
+    })
+    test('Page: 10/10', () => {
+      expect(
+        getPaginatorPages({ page: 10, totalCount: 10, pageSize: 1 })
+      ).toEqual([1, Divider, 5, 6, 7, 8, 9, 10])
+    })
+  })
+})

src/components/paginator/paginatorUtils.ts

@@ -0,0 +1,50 @@
+import { toParams } from '$lib/pagination/searchParams'
+import { last, range } from 'ramda'
+
+export const Divider = 'divider'
+
+export function getPaginatorPages({
+  page,
+  pageSize,
+  totalCount,
+}: {
+  page: number
+  pageSize: number
+  totalCount: number
+}) {
+  const maxLinksLength = 7
+  const linksAroundActive = 2
+  const totalPages = Math.ceil(totalCount / pageSize)
+  const daco = range(1, totalPages + 1).reduce((acc, link) => {
+    const isFirst = link === 1
+    const isLast = link === totalPages
+    const isPageOnStart = page <= 3 && link < maxLinksLength
+    const isPageOnEnd =
+      page >= totalPages - 3 && link > totalPages - maxLinksLength + 1
+
+    if ([isFirst, isLast, isPageOnStart, isPageOnEnd].some((value) => value)) {
+      return [...acc, link]
+    }
+
+    if (link < page - linksAroundActive || link > page + linksAroundActive) {
+      if (last(acc) === Divider) {
+        return acc
+      }
+      return [...acc, Divider]
+    }
+
+    return [...acc, link]
+  }, [])
+
+  return daco
+}
+
+export function createHref(
+  href: string,
+  filters: Record<string, string>,
+  pageNumber: number
+) {
+  const filtersPath = toParams(filters)
+  console.log(filtersPath, filters)
+  return `/${href}/${filtersPath ? filtersPath + '/' : ''}page/${pageNumber}`
+}

src/lib/pagination/pagination.ts

@@ -1,6 +1,4 @@
-import { identity } from 'ramda'
-import { flow, A } from '@mobily/ts-belt'
-const { drop, take } = A
+import { identity, drop, take, pipe } from 'ramda'
 
 export interface PaginationQuery {
   offset?: number
@@ -14,7 +12,9 @@ export interface PaginationResult<ItemType> {
 }
 
 export function dropAndTake<Item>({ offset = 0, limit = Infinity }) {
-  return flow(drop<Item>(offset), take<Item>(limit))
+  return pipe(drop<Item>(offset), take<Item>(limit)) as (
+    items: Item[]
+  ) => Item[]
 }
 
 export function filterByPropContains<Item>(filters: Record<string, string>) {

src/lib/pagination/searchParams.test.ts

@@ -42,22 +42,37 @@ describe('get search params', () => {
   })
 
   test('should parse values into searchParams for first page', () => {
-    const params = 'tags/News/page/1'
-    expect(getPaginationSearchParams(7, params).toString()).toEqual(
+    const params = {
+      pageSize: 7,
+      page: 1,
+      filters: {
+        tags: 'News',
+      },
+    }
+    expect(getPaginationSearchParams(params).toString()).toEqual(
       'limit=7&offset=0&tags=News'
     )
   })
 
   test('should parse values into searchParams for third page', () => {
-    const params = 'tags/News/page/3'
-    expect(getPaginationSearchParams(7, params).toString()).toEqual(
+    const params = {
+      pageSize: 7,
+      page: 3,
+      filters: {
+        tags: 'News',
+      },
+    }
+    expect(getPaginationSearchParams(params).toString()).toEqual(
       'limit=7&offset=14&tags=News'
     )
   })
 
   test('should return first page without any params specified', () => {
-    const params = ''
-    expect(getPaginationSearchParams(7, params).toString()).toEqual(
+    const params = {
+      pageSize: 7,
+      page: 1,
+    }
+    expect(getPaginationSearchParams(params).toString()).toEqual(
       'limit=7&offset=0'
     )
   })

src/lib/pagination/searchParams.ts

@@ -34,12 +34,26 @@ export function parseParams(params: string) {
   return Object.fromEntries(splits)
 }
 
+export function toParams(records: Record<string, string>) {
+  return Object.entries(records)
+    .map(([key, value]) => `${key}/${value}`)
+    .join('/')
+}
+
+export interface PaginationSearchParams {
+  pageSize: number
+  page: number
+  filters?: Record<string, string>
+}
+
 /**
  * Convert svelte `load` params into a `URLSearchParams` so they can be used to fetch endpoints with pagination queries
  */
-export function getPaginationSearchParams(pageSize: number, params: string) {
-  const { page = 1, ...filters } = parseParams(params)
-
+export function getPaginationSearchParams({
+  pageSize,
+  page,
+  filters,
+}: PaginationSearchParams) {
   const offset = pageSize * (page - 1)
   const limit = pageSize
   return new URLSearchParams({ limit, offset, ...filters })

src/routes/blog/[...params].svelte

@@ -1,28 +1,47 @@
 <script lang="ts" context="module">
-  import { getPaginationSearchParams } from '$lib/pagination/searchParams'
+  import {
+    getPaginationSearchParams,
+    parseParams,
+  } from '$lib/pagination/searchParams'
+
+  const pageSize = 7
+
   /**
    * @type {import('@sveltejs/kit').Load}
    */
   export async function load({ fetch, params }) {
     console.log('params', params)
-    const searchParams = getPaginationSearchParams(7, params.params)
+    const { page = 1, ...filters } = parseParams(params.params)
+    const searchParams = getPaginationSearchParams({ pageSize, page, filters })
     console.log('searchpprsm', searchParams)
     const articleResponse = await fetch(
       `/blog/articles?${searchParams.toString()}`
     ).then((r) => r.json())
 
-    return { props: { posts: articleResponse.posts } }
+    return {
+      props: {
+        posts: articleResponse.posts,
+        page: Number(page),
+        pageSize,
+        filters,
+      },
+    }
   }
 </script>
 
 <script lang="ts">
   import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import Paginator from '../../components/paginator/Paginator.svelte'
   import { postListClass, seeAllClass } from './index.css'
   import type { PostContent } from './_content'
   import type { PaginationResult } from '$lib/pagination/pagination'
 
   export let posts: PaginationResult<PostContent>
-  export let tagQuery: string
+  export let filters: Record<string, string>
+  export let page: number
+  export let pageSize: number
+  let totalPages = Math.ceil(posts.totalCount / pageSize)
+  // TODO display filter name
 </script>
 
 <svelte:head>
@@ -33,18 +52,28 @@
   <p class="no-posts">You've found void in the space.</p>
 {:else}
   <h1>
-    Recent
-    {#if tagQuery}
-      <em>{tagQuery}</em>
+    {#if filters.tags}
+      <em>{filters.tags}</em>
+    {:else}
+      Blog
     {/if}
     posts
   </h1>
-  {#if tagQuery}
+  {#if filters.tags}
     <div class={seeAllClass}>
       <a href="/blog">See all posts</a>
     </div>
   {/if}
 {/if}
+<header>
+  <Paginator
+    href="blog"
+    {page}
+    {pageSize}
+    {filters}
+    totalCount={posts.totalCount}
+  />
+</header>
 <ul class="post-list {postListClass}">
   {#each posts.items as post}
     <li>
@@ -60,3 +89,12 @@
     </li>
   {/each}
 </ul>
+<footer>
+  <Paginator
+    href="blog"
+    {page}
+    {pageSize}
+    {filters}
+    totalCount={posts.totalCount}
+  />
+</footer>

src/routes/feed/_feed.ts

@@ -24,8 +24,8 @@ export async function getFeed() {
     },
   })
 
-  const blogListing = await getBlogListing()
-  blogListing.forEach((post) => {
+  const blogListing = await getBlogListing({})
+  blogListing.items.forEach((post) => {
     feed.addItem({
       title: post.title,
       id: `https://michalvanko.dev/blog/${post.slug}`,