Extract infinite loading functions from Bea Theme

package.json

@@ -51,6 +51,7 @@
     "@prezly/sdk": "^6.21.0",
     "next-seo": "^5.4.0",
     "parse-data-url": "^4.0.1",
+    "react-use": "^17.3.2",
     "string-strip-html": "^9.1.9"
   },
   "devDependencies": {

src/index.ts

@@ -1,6 +1,7 @@
 export * from './adapter-nextjs';
 export * from './components-nextjs';
 export * from './data-fetching';
+export * from './infinite-loading';
 export * from './intl';
 export * from './newsroom-context';
 export * from './types';

src/infinite-loading/apiHandlers/fetchGalleries.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+export async function fetchGalleries(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        res.status(405);
+        return;
+    }
+
+    const { page, pageSize } = req.body;
+
+    try {
+        const api = getPrezlyApi(req);
+
+        const { galleries } = await api.getGalleries({ page, pageSize });
+
+        res.status(200).json({ galleries });
+    } catch (error) {
+        res.status(500).send({
+            message: (error as Error).message,
+        });
+    }
+}

src/infinite-loading/apiHandlers/fetchStories.ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+export async function fetchStories(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        res.status(405);
+        return;
+    }
+
+    const { page, pageSize, category, include, localeCode } = req.body;
+
+    try {
+        const api = getPrezlyApi(req);
+
+        const { stories } = await (category
+            ? api.getStoriesFromCategory(category, { page, pageSize, include, localeCode })
+            : api.getStories({ page, pageSize, include, localeCode }));
+
+        res.status(200).json({ stories });
+    } catch (error) {
+        res.status(500).send({
+            message: (error as Error).message,
+        });
+    }
+}

src/infinite-loading/apiHandlers/index.ts

@@ -0,0 +1,2 @@
+export { fetchGalleries } from './fetchGalleries';
+export { fetchStories } from './fetchStories';

src/infinite-loading/index.ts

@@ -0,0 +1,5 @@
+export { useInfiniteLoading } from './useInfiniteLoading';
+export { useInfiniteStoriesLoading } from './useInfiniteStoriesLoading';
+export { useInfiniteGalleriesLoading } from './useInfiniteGalleriesLoading';
+export * from './apiHandlers';
+export * from './types';

src/infinite-loading/types.ts

@@ -0,0 +1,5 @@
+export interface PaginationProps {
+    itemsTotal: number;
+    currentPage: number;
+    pageSize: number;
+}

src/infinite-loading/useInfiniteGalleriesLoading.ts

@@ -0,0 +1,53 @@
+import type { NewsroomGallery } from '@prezly/sdk';
+
+import type { PaginationProps } from './types';
+import { useInfiniteLoading } from './useInfiniteLoading';
+
+async function fetchGalleries(
+    page: number,
+    pageSize: number,
+): Promise<{ galleries: NewsroomGallery[] }> {
+    const result = await fetch('/api/fetch-galleries', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            page,
+            pageSize,
+        }),
+    });
+
+    if (!result.ok) {
+        const { message } = await result.json();
+        throw new Error(message);
+    }
+
+    return result.json();
+}
+
+/**
+ * NOTE: This hook depends on the presence of a Next API route (/api/fetch-galleries)!
+ * The handler for this route is exported from `apiHandlers/fetchGalleries.ts` file.
+ * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/media/index.tsx#L23 for usage example
+ */
+export function useInfiniteGalleriesLoading(
+    initialGalleries: NewsroomGallery[],
+    pagination: PaginationProps,
+) {
+    const { canLoadMore, data, isLoading, loadMore } = useInfiniteLoading<NewsroomGallery>({
+        fetchingFn: async (nextPage, pageSize) => {
+            const { galleries } = await fetchGalleries(nextPage, pageSize);
+            return galleries;
+        },
+        initialData: initialGalleries,
+        pagination,
+    });
+
+    return {
+        canLoadMore,
+        galleries: data,
+        isLoading,
+        loadMoreGalleries: loadMore,
+    };
+}

src/infinite-loading/useInfiniteLoading.ts

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAsyncFn } from 'react-use';
+
+import type { PaginationProps } from './types';
+
+interface Parameters<T> {
+    fetchingFn: (page: number, pageSize: number) => Promise<T[]>;
+    initialData: T[];
+    pagination: PaginationProps;
+}
+
+interface State<T> {
+    canLoadMore: boolean;
+    currentPage: number;
+    data: T[];
+    isLoading: boolean;
+    loadMore: () => void;
+    resetData: () => void;
+}
+
+export function useInfiniteLoading<T>({
+    fetchingFn,
+    initialData,
+    pagination,
+}: Parameters<T>): State<T> {
+    const [data, setData] = useState<T[]>(initialData);
+    const [currentPage, setCurrentPage] = useState(pagination.currentPage);
+
+    const { itemsTotal, pageSize } = pagination;
+    const pagesTotal = Math.ceil(itemsTotal / pageSize);
+    const canLoadMore = currentPage < pagesTotal;
+
+    const [{ error, loading: isLoading }, loadMoreFn] = useAsyncFn(async () => {
+        const nextPage = currentPage + 1;
+        const newData = await fetchingFn(nextPage, pageSize);
+        setCurrentPage(nextPage);
+        setData((currentData) => [...currentData, ...newData]);
+    }, [currentPage, fetchingFn, setCurrentPage]);
+
+    const loadMore = useCallback(() => {
+        if (canLoadMore) {
+            loadMoreFn();
+        }
+    }, [canLoadMore, loadMoreFn]);
+
+    const resetData = useCallback(() => {
+        setData(initialData);
+        setCurrentPage(pagination.currentPage);
+    }, [pagination.currentPage, initialData]);
+
+    useEffect(() => {
+        if (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    }, [error]);
+
+    return {
+        canLoadMore,
+        currentPage,
+        data,
+        isLoading,
+        loadMore,
+        resetData,
+    };
+}

src/infinite-loading/useInfiniteStoriesLoading.ts

@@ -0,0 +1,81 @@
+import type { Category, ExtraStoryFields, Story } from '@prezly/sdk';
+import { useEffect } from 'react';
+
+import type { LocaleObject } from '../intl';
+import { useCurrentLocale } from '../newsroom-context';
+
+import type { PaginationProps } from './types';
+import { useInfiniteLoading } from './useInfiniteLoading';
+
+async function fetchStories<T extends Story = Story>(
+    page: number,
+    pageSize: number,
+    category?: Category,
+    locale?: LocaleObject,
+    include?: (keyof ExtraStoryFields)[],
+): Promise<{ stories: T[] }> {
+    const result = await fetch('/api/fetch-stories', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            page,
+            pageSize,
+            category,
+            include,
+            ...(locale && {
+                localeCode: locale.toUnderscoreCode(),
+            }),
+        }),
+    });
+
+    if (!result.ok) {
+        const { message } = await result.json();
+        throw new Error(message);
+    }
+
+    return result.json();
+}
+
+/**
+ * NOTE: This hook depends on the presence of a Next API route (/api/fetch-stories)!
+ * The handler for this route is exported from `apiHandlers/fetchStories.ts` file.
+ * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/index.tsx#L24 for usage example
+ */
+export function useInfiniteStoriesLoading<T extends Story = Story>(
+    initialStories: T[],
+    pagination: PaginationProps,
+    category?: Category,
+    include?: (keyof ExtraStoryFields)[],
+) {
+    const currentLocale = useCurrentLocale();
+
+    const { canLoadMore, data, isLoading, loadMore, resetData } = useInfiniteLoading<T>({
+        fetchingFn: async (nextPage, pageSize) => {
+            const { stories } = await fetchStories<T>(
+                nextPage,
+                pageSize,
+                category,
+                currentLocale,
+                include,
+            );
+            return stories;
+        },
+        initialData: initialStories,
+        pagination,
+    });
+
+    useEffect(() => {
+        if (category?.id) {
+            resetData();
+        }
+    }, [category?.id, resetData]);
+
+    return {
+        canLoadMore,
+        isLoading,
+        loadMoreStories: loadMore,
+        stories: data,
+    };
+}