Add RN FlatList example

Author: markerikson

examples/query/react/infinite-queries/src/App.tsx

@@ -11,6 +11,7 @@ import LimitOffsetExample from "./features/limit-offset/LimitOffsetExample"
 import { InfiniteScrollMaxPagesExample } from "./features/max-pages/InfiniteScrollMaxExample"
 import PaginationInfScrollExample from "./features/pagination-infinite-scroll/PaginationInfScrollExample"
 import { PaginationExample } from "./features/pagination/PaginationExample"
+import { FlatlistExample } from "./features/rn-flatlist/FlatlistExample"
 
 const Menu = () => {
   return (
@@ -43,6 +44,9 @@ const Menu = () => {
             Pagination Infinite Scroll
           </Link>
         </li>
+        <li>
+          <Link to="/examples/rn-flatlist">RN FlatList</Link>
+        </li>
       </ul>
     </div>
   )
@@ -84,6 +88,7 @@ const App = () => {
               path="pagination-infinite-scroll"
               element={<PaginationInfScrollExample />}
             />
+            <Route path="rn-flatlist" element={<FlatlistExample />} />
           </Route>
         </Routes>
       </div>

examples/query/react/infinite-queries/src/features/infinite-scroll/InfiniteScrollExample.tsx

@@ -3,6 +3,7 @@ import { useInView } from "react-intersection-observer"
 import { Link } from "react-router"
 
 import { apiWithInfiniteScroll } from "./infiniteScrollApi"
+import type { Project } from "./infiniteScrollApi"
 
 export const InfiniteScrollAbout = () => {
   return (
@@ -18,6 +19,22 @@ export const InfiniteScrollAbout = () => {
   )
 }
 
+export const ProjectRow = ({ project }: { project: Project }) => {
+  return (
+    <p
+      style={{
+        border: "1px solid gray",
+        borderRadius: "5px",
+        padding: "5rem 1rem",
+        background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
+      }}
+      key={project.id}
+    >
+      {project.name}
+    </p>
+  )
+}
+
 export const InfiniteScrollExample = () => {
   const {
     data,
@@ -67,17 +84,7 @@ export const InfiniteScrollExample = () => {
           {data?.pages.map(page => (
             <React.Fragment key={page.nextId}>
               {page.projects.map(project => (
-                <p
-                  style={{
-                    border: "1px solid gray",
-                    borderRadius: "5px",
-                    padding: "5rem 1rem",
-                    background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
-                  }}
-                  key={project.id}
-                >
-                  {project.name}
-                </p>
+                <ProjectRow key={project.id} project={project} />
               ))}
             </React.Fragment>
           ))}

examples/query/react/infinite-queries/src/features/infinite-scroll/infiniteScrollApi.ts

@@ -1,6 +1,6 @@
 import { baseApi } from "../baseApi"
 
-type Project = {
+export type Project = {
   id: number
   name: string
 }

examples/query/react/infinite-queries/src/features/rn-flatlist/FlatlistExample.tsx

@@ -0,0 +1,50 @@
+import { ActivityIndicator, FlatList, View, Text } from "react-native-web"
+import { useMemo } from "react"
+
+import { apiWithInfiniteScroll } from "../infinite-scroll/infiniteScrollApi"
+import { ProjectRow } from "../infinite-scroll/InfiniteScrollExample"
+
+export const FlatlistExample = () => {
+  const {
+    data,
+    error,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isFetching,
+    isError,
+    // refetch,
+  } =
+    apiWithInfiniteScroll.endpoints.getProjectsCursor.useInfiniteQuery(
+      "projects",
+    )
+
+  const allProjects = useMemo(() => {
+    return data?.pages.flatMap(page => page.projects) ?? []
+  }, [data])
+
+  return (
+    <>
+      <h2>React Native FlatList Example</h2>
+      <View style={{ width: "100%", maxHeight: "600px" }}>
+        {isLoading ? (
+          <ActivityIndicator />
+        ) : isError ? (
+          <Text>{error?.message}</Text>
+        ) : (
+          <FlatList
+            data={allProjects}
+            keyExtractor={item => item.id.toString()}
+            renderItem={({ item }) => <ProjectRow project={item} />}
+            // onRefresh={refetch}
+            refreshing={isLoading}
+            progressViewOffset={100}
+            onEndReached={() => fetchNextPage()}
+          />
+        )}
+      </View>
+    </>
+  )
+}