@prezly/theme-kit-nextjs 1.6.3 → 1.6.4-2

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

package/src/infinite-loading/apiHandlers/index.ts

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

package/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';

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

package/src/intl/index.ts

@@ -1,4 +1,5 @@
 export * from './lang';
 export * from './locale';
-export { default as localeConfig } from './localeConfig';
+export { localeConfig } from './localeConfig';
+export { localeList } from './localeList';
 export * from './localeObject';

package/src/intl/{localeConfig.js → localeConfig.ts}

@@ -3,9 +3,9 @@
  * Together with permutation performed lower in the code,
  * the exported list represents all of the possible locale codes that Next.js theme application might accept.
  */
-const supportedLocales = require('./localeList');
+import { localeList } from './localeList';
 
-const lowercaseLocales = supportedLocales.map((l) => l.toLowerCase());
+const lowercaseLocales = localeList.map((l) => l.toLowerCase());
 
 // Get all permutations for the shorter locale codes supported by Prezly (e.g. short region codes and neutral language codes)
 const lowercaseLocalPermutations = Array.from(
@@ -16,4 +16,4 @@ const lowercaseLocalPermutations = Array.from(
     ]),
 ).sort();
 
-module.exports = lowercaseLocalPermutations;
+export const localeConfig = lowercaseLocalPermutations;

package/src/intl/{localeList.js → localeList.ts}

@@ -1,7 +1,7 @@
 /**
  * This list is pulled from the main Prezly application. The underscores are replaced with dashes.
  */
-module.exports = [
+export const localeList = [
     'af-ZA',
     'ar',
     'ar-AE',

package/src/intl/localeObject.ts

@@ -1,4 +1,4 @@
-import localeConfig from './localeConfig';
+import { localeConfig } from './localeConfig';
 
 /**
  * This class is created to simplify working with locales and transforming between different locale code formats.