Add createPagination and createInfinityScroll

packages/core/index.ts

@@ -9,6 +9,11 @@ export { connectQuery } from './src/query/connect_query';
 export { createHeadlessQuery } from './src/query/create_headless_query';
 export { createJsonQuery } from './src/query/create_json_query';
 
+// Pagination public API
+export { type Pagination } from './src/pagination/type';
+export { createPagination } from './src/pagination/create_pagination';
+export { createHeadlessPagination } from './src/pagination/create_headless_pagination';
+
 // Mutation public API
 export { type Mutation } from './src/mutation/type';
 export { createMutation } from './src/mutation/create_mutation';

packages/core/src/infinity_scroll/create_infinity_scroll.ts

@@ -0,0 +1,152 @@
+import { FetchingStatus } from '@farfetched/core';
+import {
+	createEffect,
+	createStore,
+	createEvent,
+	sample,
+	Store
+} from 'effector';
+import { reshape, not, and } from 'patronum';
+import { ParamsAndResult } from '../types';
+
+export interface CreateInfinityScrollOptions<
+	Params,
+	Data,
+	FetcherData,
+	MappedData extends Data
+> {
+	readonly initialData: Data | MappedData;
+	readonly fetcher: (params: Params) => FetcherData;
+	readonly mapData: (
+		options: ParamsAndResult<Params, FetcherData>
+	) => MappedData;
+	readonly getNextParams: (
+		options: ParamsAndResult<Params, FetcherData>
+	) => Params;
+	readonly isEnd: (options: ParamsAndResult<Params, FetcherData>) => boolean;
+	readonly concatData: ({
+		data,
+		mapped,
+	}: {
+		data: MappedData;
+		mapped: MappedData;
+	}) => MappedData;
+}
+
+export const createInfinityScroll = <
+	Params,
+	Data,
+	FetcherData,
+	MappedData extends Data
+>(
+		options: CreateInfinityScrollOptions<Params, Data, FetcherData, MappedData>
+	) => {
+	const { fetcher, initialData, mapData, getNextParams, isEnd, concatData, } =
+		options;
+
+	const requestFx = createEffect(fetcher);
+
+	const $data = createStore<MappedData>(initialData as MappedData);
+	const $error = createStore<any>(null);
+	const dataMapped = createEvent<MappedData>();
+	const dataConcatenated = createEvent<MappedData>();
+
+	const $nextParams = createStore<Params | null>(null);
+	const extractNextParams = createEvent<ParamsAndResult<Params, FetcherData>>();
+
+	const $status = createStore<FetchingStatus>('initial');
+	const { $failed, $initial, $pending, $succeeded, } = reshape({
+		source: $status,
+		shape: {
+			$initial: (status) => status === 'initial',
+			$pending: (status) => status === 'pending',
+			$failed: (status) => status === 'fail',
+			$succeeded: (status) => status === 'done',
+		},
+	});
+
+	const $ended = createStore(false);
+	const checkEnding = createEvent<ParamsAndResult<Params, FetcherData>>();
+
+	const start = createEvent<Params>();
+	const next = createEvent();
+
+	sample({
+		clock: start,
+		filter: not($pending),
+		target: [$data.reinit!, $nextParams.reinit, requestFx],
+	});
+
+	sample({
+		clock: requestFx.done,
+		target: [extractNextParams, checkEnding],
+	});
+
+	sample({
+		clock: checkEnding,
+		fn: isEnd,
+		target: $ended,
+	});
+
+	sample({
+		clock: extractNextParams,
+		fn: getNextParams,
+		target: $nextParams,
+	});
+
+	sample({
+		clock: requestFx.done,
+		fn: mapData,
+		target: dataMapped,
+	});
+
+	sample({
+		clock: dataMapped,
+		source: $data,
+		fn: (data, mapped) => concatData({ data, mapped, }),
+		target: dataConcatenated,
+	});
+
+	sample({
+		clock: dataConcatenated,
+		target: $data,
+	});
+
+	sample({
+		clock: next,
+		source: $nextParams as Store<Params>,
+		filter: and(not($pending), not($ended)),
+		target: requestFx,
+	});
+
+	sample({
+		clock: requestFx,
+		fn: () => 'pending' as FetchingStatus,
+		target: $status,
+	});
+
+	sample({
+		clock: requestFx.fail,
+		fn: () => 'fail' as FetchingStatus,
+		target: $status,
+	});
+
+	sample({
+		clock: requestFx.done,
+		fn: () => 'done' as FetchingStatus,
+		target: $status,
+	});
+
+	return {
+		start,
+		next,
+		$data,
+		$error,
+		$status,
+		$failed,
+		$initial,
+		$pending,
+		$succeeded,
+		$ended,
+	};
+};

packages/core/src/infinity_scroll/index.ts

@@ -0,0 +1 @@
+export * from './create_infinity_scroll'

packages/core/src/pagination/__tests__/create_headless_pagination.test-d.ts

@@ -0,0 +1,106 @@
+import { describe, test, expectTypeOf } from 'vitest';
+import { createStore } from 'effector';
+
+import { Contract } from '../../contract/type';
+import { unknownContract } from '../../contract/unknown_contract';
+import { createHeadlessPagination } from '../create_headless_pagination';
+import { Pagination, ParamsAndResult, RequiredPageParams } from '../type';
+
+const baseConfig = {
+  contract: unknownContract,
+  hasNextPage: () => true,
+  hasPrevPage: () => false,
+};
+
+describe('createHeadlessPagination', () => {
+  test('simple creation', () => {
+    const unknownPagination = createHeadlessPagination({
+      ...baseConfig,
+      mapData: ({ result }) => result,
+    });
+
+    expectTypeOf(unknownPagination).toEqualTypeOf<
+      Pagination<RequiredPageParams, unknown, unknown>
+    >();
+
+    const initialDataPagination = createHeadlessPagination({
+      ...baseConfig,
+      initialData: 12,
+      mapData: ({ result }) => result,
+    });
+
+    expectTypeOf(initialDataPagination).toEqualTypeOf<
+      Pagination<RequiredPageParams, unknown, unknown, number>
+    >();
+  });
+
+  test('contract', () => {
+    const numberContract = createHeadlessPagination({
+      ...baseConfig,
+      contract: {} as Contract<unknown, number>,
+      mapData: ({ result }) => result,
+    });
+
+    expectTypeOf(numberContract).toEqualTypeOf<
+      Pagination<RequiredPageParams, number, unknown>
+    >();
+
+    const stringContract = createHeadlessPagination({
+      ...baseConfig,
+      contract: {} as Contract<unknown, string>,
+      mapData: ({ result }) => result,
+    });
+
+    expectTypeOf(stringContract).toEqualTypeOf<
+      Pagination<RequiredPageParams, string, unknown>
+    >();
+  });
+
+  test('mapData', () => {
+    const primitiveCallbackMapData = createHeadlessPagination({
+      ...baseConfig,
+      mapData: ({ result }) => result as string,
+    });
+
+    expectTypeOf(primitiveCallbackMapData).toEqualTypeOf<
+      Pagination<RequiredPageParams, string, unknown>
+    >();
+
+    const objectCallbackMapData = createHeadlessPagination({
+      ...baseConfig,
+      mapData: () => ({ data: 42 }),
+    });
+
+    expectTypeOf(objectCallbackMapData).toEqualTypeOf<
+      Pagination<RequiredPageParams, { data: number }, unknown>
+    >();
+
+    const sourcedMapData = createHeadlessPagination({
+      ...baseConfig,
+      mapData: {
+        source: createStore(0),
+        fn: ({ result }, source) => {
+          expectTypeOf(source).toEqualTypeOf<number>();
+          return result as number;
+        },
+      },
+    });
+
+    expectTypeOf(sourcedMapData).toEqualTypeOf<
+      Pagination<RequiredPageParams, number, unknown>
+    >();
+  });
+
+  test('extended params', () => {
+    const pagination = createHeadlessPagination({
+      ...baseConfig,
+      mapData: (
+        config: ParamsAndResult<RequiredPageParams & { other: number }, unknown>
+      ) => config.result,
+    });
+
+    expectTypeOf(pagination).toEqualTypeOf<
+      Pagination<RequiredPageParams & { other: number }, unknown, unknown>
+    >();
+  });
+});