@prezly/theme-kit-nextjs 1.6.3-0 → 1.6.4-1

package/src/infinite-loading/types.ts

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

package/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,
+    };
+}

package/src/infinite-loading/useInfiniteLoading.ts

@@ -0,0 +1,66 @@
+import { useAsync } from '@react-hookz/web';
+import { useCallback, useEffect, useState } from 'react';
+
+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, status }, { execute: loadMoreFn }] = useAsync(async () => {
+        const nextPage = currentPage + 1;
+        const newData = await fetchingFn(nextPage, pageSize);
+        setCurrentPage(nextPage);
+        setData((currentData) => [...currentData, ...newData]);
+    });
+
+    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: status === 'loading',
+        loadMore,
+        resetData,
+    };
+}

package/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,
+    };
+}