offset-limit-fix-3

src/components/Views/Feed.tsx

@@ -19,8 +19,8 @@ import { useTopicsStore } from '../../stores/zine/topics'
 interface FeedProps {
   articles: Shout[]
   reactions: Reaction[]
-  page?: number
-  size?: number
+  limit?: number
+  offset?: number
 }
 
 // const AUTHORSHIP_REACTIONS = [
@@ -54,9 +54,11 @@ export const FeedPage = (props: FeedProps) => {
   //   return []
   // })
 
+  // eslint-disable-next-line unicorn/consistent-function-scoping
   const loadMore = () => {
-    const page = (props.page || 1) + 1
-    loadRecentArticles({ page })
+    const limit = props.limit || 50
+    const offset = props.offset || 0
+    loadRecentArticles({ limit, offset })
   }
   return (
     <>

src/components/Views/Home.tsx

@@ -22,8 +22,8 @@ type HomeProps = {
   recentPublishedArticles: Shout[]
   topMonthArticles: Shout[]
   topOverallArticles: Shout[]
-  page?: number
-  size?: number
+  limit?: number
+  offset?: number
 }
 
 const LAYOUTS = ['article', 'prose', 'music', 'video', 'image']
@@ -92,8 +92,9 @@ export const HomePage = (props: HomeProps) => {
   // }, [byLayout()])
 
   const loadMore = () => {
-    const page = (props.page || 1) + 1
-    loadPublishedArticles({ page })
+    const limit = props.limit || 50
+    const offset = props.offset || 0
+    loadPublishedArticles({ limit, offset })
   }
   return (
     <Suspense fallback={t('Loading')}>

src/pages/author/[slug]/index.astro

@@ -3,8 +3,10 @@ import { AuthorPage } from '../../../components/Views/Author'
 import Zine from '../../../layouts/zine.astro'
 import { apiClient } from '../../../utils/apiClient'
 
+const limit = parseInt(Astro.params?.limit as string, 10) || 50
+const offset = parseInt(Astro.params?.offset as string, 10) || 0
 const slug = Astro.params.slug.toString()
-const articles = await apiClient.getArticlesForAuthors({ authorSlugs: [slug], offset: 0, limit: 50 })
+const articles = await apiClient.getArticlesForAuthors({ authorSlugs: [slug], offset, limit })
 const author = articles[0].authors.find((a) => a.slug === slug)
 
 Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate')

src/pages/feed/index.astro

@@ -3,7 +3,9 @@ import { FeedPage } from '../../components/Views/Feed'
 import Zine from '../../layouts/zine.astro'
 import { apiClient } from '../../utils/apiClient'
 
-const recentArticles = await apiClient.getRecentArticles({ limit: 50, offset: 0 })
+const limit = parseInt(Astro.params?.limit as string, 10) || 50
+const offset = parseInt(Astro.params?.offset as string, 10) || 0
+const recentArticles = await apiClient.getRecentArticles({ limit, offset })
 const shoutSlugs = recentArticles.map((s) => s.slug)
 const reactions = await apiClient.getReactionsForShouts({ shoutSlugs })
 ---

src/pages/index.astro

@@ -3,8 +3,10 @@ import { HomePage } from '../components/Views/Home'
 import Zine from '../layouts/zine.astro'
 import { apiClient } from '../utils/apiClient'
 
+const limit = parseInt(Astro.params?.limit as string, 10) || 50
+const offset = parseInt(Astro.params?.offset as string, 10) || 0
 const randomTopics = await apiClient.getRandomTopics()
-const recentPublished = await apiClient.getRecentPublishedArticles({ limit: 50, offset: 0 })
+const recentPublished = await apiClient.getRecentPublishedArticles({ limit, offset })
 const topMonth = await apiClient.getTopMonthArticles()
 const topOverall = await apiClient.getTopArticles()
 

src/stores/zine/articles.ts

@@ -132,20 +132,40 @@ const addSortedArticles = (articles: Shout[]) => {
   }
 }
 
-export const loadRecentArticles = async ({ page }: { page: number }): Promise<void> => {
-  const newArticles = await apiClient.getRecentArticles({ page })
+export const loadRecentArticles = async ({
+  limit,
+  offset
+}: {
+  limit?: number
+  offset?: number
+}): Promise<void> => {
+  const newArticles = await apiClient.getRecentArticles({ limit, offset })
   addArticles(newArticles)
   addSortedArticles(newArticles)
 }
 
-export const loadPublishedArticles = async ({ page }: { page: number }): Promise<void> => {
-  const newArticles = await apiClient.getPublishedArticles({ page })
+export const loadPublishedArticles = async ({
+  limit,
+  offset
+}: {
+  limit?: number
+  offset?: number
+}): Promise<void> => {
+  const newArticles = await apiClient.getPublishedArticles({ limit, offset })
   addArticles(newArticles)
   addSortedArticles(newArticles)
 }
 
-export const loadSearchResults = async ({ query }: { query: string }): Promise<void> => {
-  const newArticles = await apiClient.getSearchResults({ query })
+export const loadSearchResults = async ({
+  query,
+  limit,
+  offset
+}: {
+  query: string
+  limit?: number
+  offset?: number
+}): Promise<void> => {
+  const newArticles = await apiClient.getSearchResults({ query, limit, offset })
   addArticles(newArticles)
   addSortedArticles(newArticles)
 }