MUK001: Implement RTKQueryInfiniteList

package.json

@@ -25,8 +25,10 @@
     "README.md"
   ],
   "peerDependencies": {
+    "@appello/services": "^0.0.10",
     "@react-navigation/elements": "^1.3.21",
     "@react-navigation/native": "^6.1.9",
+    "@reduxjs/toolkit": "^1.9.7",
     "@storybook/addon-ondevice-actions": "^6.5.6",
     "@storybook/addon-ondevice-controls": "^6.5.6",
     "expo": ">=48.0.0",
@@ -40,6 +42,7 @@
   },
   "devDependencies": {
     "@appello/eslint-config": "^0.1.12",
+    "@appello/services": "^0.0.10",
     "@babel/core": "^7.23.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.22.20",
@@ -48,6 +51,7 @@
     "@babel/runtime": "^7.23.1",
     "@react-native-community/eslint-config": "^3.2.0",
     "@react-navigation/native-stack": "^6.9.17",
+    "@reduxjs/toolkit": "^1.9.7",
     "@rollup/plugin-alias": "^5.0.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",

src/components/common/RTKQueryInfiniteList/RTKQueryInfiniteList.tsx

@@ -0,0 +1,90 @@
+import React, { ReactElement, useState } from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+
+import {
+  BaseUseQuery,
+  ResultOfQuery,
+  RTKQueryInfiniteListPage,
+  RTKQueryInfiniteListPageProps,
+} from './RTKQueryInfiniteListPage';
+
+type Props<TQuery extends BaseUseQuery, TItem, TPaginationParams extends object> = Omit<
+  RTKQueryInfiniteListPageProps<TQuery>,
+  'index' | 'onQuery'
+> &
+  Omit<FlatListProps<TItem>, 'data' | 'onEndReached'> & {
+    getItems: (queryData: ResultOfQuery<TQuery>['data']) => TItem[];
+    getPaginationParams: (pageIndex: number) => TPaginationParams;
+    shouldRequestNext?: (queryResults: ResultOfQuery<TQuery>[]) => boolean;
+  };
+
+export const RTKQueryInfiniteList = <
+  TQuery extends BaseUseQuery,
+  TItem,
+  TPaginationParams extends object,
+>({
+  useQuery,
+  queryArgs,
+  getItems,
+  getPaginationParams,
+  shouldRequestNext: shouldRequestNextProp,
+  ...flatListProps
+}: Props<TQuery, TItem, TPaginationParams>): ReactElement => {
+  const [pagesCount, setPagesCount] = React.useState(1);
+  const [queryResults, setQueryResults] = useState<ResultOfQuery<TQuery>[]>([]);
+
+  const handleQuery = React.useCallback<RTKQueryInfiniteListPageProps<TQuery>['onQuery']>(
+    (index, queryResult) => {
+      setQueryResults(results => {
+        const newResults = [...results];
+        newResults[index] = queryResult;
+        return newResults;
+      });
+    },
+    [],
+  );
+
+  const items = React.useMemo(() => {
+    return queryResults.flatMap(pageData => getItems(pageData.data));
+  }, [queryResults, getItems]);
+
+  const isAnyLoading = React.useMemo(() => {
+    return queryResults.some(result => result.isLoading);
+  }, [queryResults]);
+
+  const shouldRequestNext = React.useMemo(() => {
+    const shouldRequest = shouldRequestNextProp?.(queryResults) ?? true;
+
+    return !isAnyLoading && shouldRequest;
+  }, [isAnyLoading, queryResults, shouldRequestNextProp]);
+
+  const handleEndReached = React.useCallback<NonNullable<FlatListProps<any>['onEndReached']>>(
+    ({ distanceFromEnd }) => {
+      if (distanceFromEnd >= 0 && shouldRequestNext) {
+        setPagesCount(index => ++index);
+      }
+    },
+    [shouldRequestNext],
+  );
+
+  const renderPages = React.useMemo(() => {
+    return new Array(pagesCount)
+      .fill(null)
+      .map((_, index) => (
+        <RTKQueryInfiniteListPage
+          key={index}
+          index={index}
+          useQuery={useQuery}
+          queryArgs={{ ...queryArgs, ...getPaginationParams(index) }}
+          onQuery={handleQuery}
+        />
+      ));
+  }, [pagesCount, useQuery, queryArgs, getPaginationParams, handleQuery]);
+
+  return (
+    <>
+      {renderPages}
+      <FlatList {...flatListProps} data={items} onEndReached={handleEndReached} />
+    </>
+  );
+};

src/components/common/RTKQueryInfiniteList/RTKQueryInfiniteListPage.tsx

@@ -0,0 +1,38 @@
+import { QueryArgFrom, QueryDefinition } from '@reduxjs/toolkit/dist/query/endpointDefinitions';
+import { UseQuery } from '@reduxjs/toolkit/dist/query/react/buildHooks';
+import { UseQueryHookResult } from '@reduxjs/toolkit/src/query/react/buildHooks';
+import React from 'react';
+
+export type BaseUseQuery = UseQuery<QueryDefinition<any, any, any, any>>;
+
+export interface RTKQueryInfiniteListPageProps<TQuery extends BaseUseQuery> {
+  index: number;
+  useQuery: TQuery;
+  queryArgs: ArgumentsOfQuery<TQuery>;
+  onQuery: (pageIndex: number, queryResult: ResultOfQuery<TQuery>) => void;
+}
+
+export type ArgumentsOfQuery<TQuery extends BaseUseQuery> = TQuery extends UseQuery<infer TQueryDef>
+  ? QueryArgFrom<TQueryDef> extends object
+    ? QueryArgFrom<TQueryDef>
+    : never
+  : unknown;
+
+export type ResultOfQuery<TQuery extends BaseUseQuery> = TQuery extends UseQuery<infer TQueryDef>
+  ? UseQueryHookResult<TQueryDef>
+  : unknown;
+
+export const RTKQueryInfiniteListPage = <TQuery extends BaseUseQuery>({
+  index,
+  useQuery,
+  queryArgs,
+  onQuery,
+}: RTKQueryInfiniteListPageProps<TQuery>): null => {
+  const queryResult = useQuery(queryArgs) as ResultOfQuery<TQuery>;
+
+  React.useEffect(() => {
+    onQuery(index, queryResult);
+  }, [queryResult, index]);
+
+  return null;
+};