@prezly/theme-kit-nextjs 3.2.0-3 → 3.2.0-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prezly/theme-kit-nextjs",
-  "version": "3.2.0-3",
+  "version": "3.2.0-4",
   "description": "Data layer and utility library for developing Prezly themes with NextJS",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/adapter-nextjs/api-handlers/fetchStories.ts

@@ -8,7 +8,7 @@ export async function fetchStories(req: NextApiRequest, res: NextApiResponse) {
         return;
     }
 
-    const { page, pageSize, useHighlightedStory, category, include, localeCode, pinning } =
+    const { page, pageSize, withHighlightedStory, category, include, localeCode, pinning } =
         req.body;
 
     try {
@@ -21,7 +21,7 @@ export async function fetchStories(req: NextApiRequest, res: NextApiResponse) {
                   pageSize,
                   include,
                   localeCode,
-                  useHighlightedStory,
+                  withHighlightedStory,
                   pinning,
               }));
 

package/src/adapter-nextjs/page-props/home.ts

@@ -26,7 +26,7 @@ interface Options {
      * When set to `true`, the initial `stories` array will include one extra story to place as highlighted story.
      * This will offset each subsequent page by 1 story to account for that.
      */
-    useHighlightedStory?: boolean;
+    withHighlightedStory?: boolean;
     pageSize?: number;
     pinning?: boolean;
 }
@@ -39,7 +39,7 @@ export function getHomepageServerSideProps<
         pageSize = DEFAULT_PAGE_SIZE,
         extraStoryFields,
         pinning = false,
-        useHighlightedStory = false,
+        withHighlightedStory = false,
     } = options || {};
 
     return async function getServerSideProps(
@@ -60,7 +60,7 @@ export function getHomepageServerSideProps<
             pinning,
             include: extraStoryFields,
             localeCode,
-            useHighlightedStory,
+            withHighlightedStory,
         });
         const { stories, storiesTotal } = storiesPaginated;
 
@@ -74,7 +74,7 @@ export function getHomepageServerSideProps<
                     itemsTotal: storiesTotal,
                     currentPage: page ?? 1,
                     pageSize,
-                    useHighlightedStory,
+                    withHighlightedStory,
                 },
                 ...(typeof customProps === 'function'
                     ? await (customProps as PropsFunction<CustomProps>)(context, serverSideProps)

package/src/data-fetching/api/PrezlyApi.ts

@@ -21,6 +21,7 @@ import type { PageProps, ServerSidePageProps } from '../../types';
 import { DEFAULT_PAGE_SIZE } from '../../utils';
 import { getAlgoliaSettings, isSdkError, isUuid } from '../lib';
 
+import { toPaginationParams } from './lib';
 import {
     getChronologicalSortOrder,
     getContactsQuery,
@@ -47,7 +48,7 @@ interface GetStoriesOptions {
      * When set to `true`, the result for the first page will include one extra story to place as highlighted story.
      * This will offset each subsequent page by 1 story to account for that.
      */
-    useHighlightedStory?: boolean;
+    withHighlightedStory?: boolean;
 }
 
 interface GetGalleriesOptions {
@@ -143,14 +144,12 @@ export class PrezlyApi {
         pinning = false,
         include,
         localeCode,
-        useHighlightedStory,
+        withHighlightedStory,
     }: GetStoriesOptions = {}) {
         const sortOrder = getChronologicalSortOrder(order, pinning);
         const query = JSON.stringify(getStoriesQuery(this.newsroomUuid, undefined, localeCode));
 
-        const limit = useHighlightedStory && (!page || page === 1) ? pageSize + 1 : pageSize;
-        const baseOffset = typeof page !== 'undefined' ? (page - 1) * pageSize : undefined;
-        const offset = useHighlightedStory && baseOffset ? baseOffset + 1 : baseOffset;
+        const { offset, limit } = toPaginationParams({ page, pageSize, withHighlightedStory });
 
         const { stories, pagination } = await this.searchStories({
             limit,
@@ -173,14 +172,16 @@ export class PrezlyApi {
             order = DEFAULT_SORT_ORDER,
             include,
             localeCode,
-        }: Omit<GetStoriesOptions, 'pinning' | 'useHighlightedStory'> = {},
+        }: Omit<GetStoriesOptions, 'pinning' | 'withHighlightedStory'> = {},
     ) {
         const sortOrder = getChronologicalSortOrder(order);
         const query = JSON.stringify(getStoriesQuery(this.newsroomUuid, category.id, localeCode));
 
+        const { offset, limit } = toPaginationParams({ page, pageSize });
+
         const { stories, pagination } = await this.searchStories({
-            limit: pageSize,
-            offset: typeof page === 'undefined' ? undefined : (page - 1) * pageSize,
+            limit,
+            offset,
             sortOrder,
             query,
             include,
@@ -224,12 +225,11 @@ export class PrezlyApi {
     searchStories: Stories.Client['search'] = (options) => this.sdk.stories.search(options);
 
     async getGalleries({ page, pageSize }: GetGalleriesOptions) {
+        const { offset, limit } = toPaginationParams({ page, pageSize });
+
         return this.sdk.newsroomGalleries.search(this.newsroomUuid, {
-            limit: pageSize,
-            offset:
-                typeof page === 'undefined' || typeof pageSize === 'undefined'
-                    ? undefined
-                    : (page - 1) * pageSize,
+            limit,
+            offset,
             scope: getGalleriesQuery(),
         });
     }

package/src/data-fetching/api/lib.ts

@@ -0,0 +1,24 @@
+export function toPaginationParams(params: {
+    page?: number;
+    pageSize?: number;
+    withHighlightedStory?: boolean;
+}) {
+    const { page = 1, pageSize, withHighlightedStory = false } = params;
+
+    if (!pageSize) {
+        return { offset: undefined, limit: undefined };
+    }
+
+    const offset = pageSize * (page - 1);
+    const limit = pageSize;
+
+    if (withHighlightedStory && page === 1) {
+        return { offset: 0, limit: limit + 1 };
+    }
+
+    if (withHighlightedStory && page > 1) {
+        return { offset: offset + 1, limit };
+    }
+
+    return { offset, limit };
+}

package/src/infinite-loading/types.ts

@@ -5,5 +5,5 @@ export interface PaginationProps {
     /**
      * When set to `true`, the calculated offset will be increased by one to account for the highlighted story
      */
-    useHighlightedStory?: boolean;
+    withHighlightedStory?: boolean;
 }

package/src/infinite-loading/useInfiniteLoading.ts

@@ -26,8 +26,8 @@ export function useInfiniteLoading<T>({
     const [data, setData] = useState<T[]>(initialData);
     const [currentPage, setCurrentPage] = useState(pagination.currentPage);
 
-    const { itemsTotal, pageSize, useHighlightedStory } = pagination;
-    const adjustedItemsTotal = useHighlightedStory ? itemsTotal : itemsTotal - 1;
+    const { itemsTotal, pageSize, withHighlightedStory } = pagination;
+    const adjustedItemsTotal = withHighlightedStory ? itemsTotal : itemsTotal - 1;
     const pagesTotal = Math.ceil(adjustedItemsTotal / pageSize);
     const canLoadMore = currentPage < pagesTotal;
 

package/src/infinite-loading/useInfiniteStoriesLoading.ts

@@ -10,7 +10,7 @@ import { useInfiniteLoading } from './useInfiniteLoading';
 async function fetchStories<T extends Story = Story>(
     page: number,
     pageSize: number,
-    useHighlightedStory: boolean,
+    withHighlightedStory: boolean,
     category?: Category,
     locale?: LocaleObject,
     include?: (keyof Story.ExtraFields)[],
@@ -24,7 +24,7 @@ async function fetchStories<T extends Story = Story>(
         body: JSON.stringify({
             page,
             pageSize,
-            useHighlightedStory,
+            withHighlightedStory,
             category,
             include,
             pinning,
@@ -55,14 +55,14 @@ export function useInfiniteStoriesLoading<T extends Story = Story>(
     pinning?: boolean,
 ) {
     const currentLocale = useCurrentLocale();
-    const { useHighlightedStory = false } = pagination;
+    const { withHighlightedStory = false } = pagination;
 
     const { canLoadMore, data, isLoading, loadMore, resetData } = useInfiniteLoading<T>({
         fetchingFn: async (nextPage, pageSize) => {
             const { stories } = await fetchStories<T>(
                 nextPage,
                 pageSize,
-                useHighlightedStory,
+                withHighlightedStory,
                 category,
                 currentLocale,
                 include,