feat: trigger fetch using observer

guildxyz · Nov 21, 2024 · f5ef465 · f5ef465
1 parent b5a8014
commit f5ef465
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 28 deletions.
diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx
@@ -3,13 +3,17 @@
 import { Button } from "@/components/ui/Button";
 import { env } from "@/lib/env";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import { useIntersection } from "foxact/use-intersection";
+import { useEffect } from "react";
 import { GuildCard } from "./GuildCard";
 
-export const InfiniteScrollGuilds = () => {
+const pageSize = 24;
+
+export const InfiniteScrollGuilds = ({ search = "" }: { search?: string }) => {
   const fetchGuilds = async ({ pageParam }: { pageParam: number }) =>
     (
       await fetch(
-        `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=24&sortBy=name&reverse=false&search=`,
+        `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${pageSize}&sortBy=name&reverse=false&search=${search}`,
       )
     ).json() as Promise<PaginatedResponse<Guild>>;
 
@@ -18,9 +22,24 @@ export const InfiniteScrollGuilds = () => {
       queryKey: ["guilds"],
       queryFn: fetchGuilds,
       initialPageParam: 1,
-      getNextPageParam: (lastPage) => lastPage.page + 1,
+      getNextPageParam: (lastPage) =>
+        lastPage.total / lastPage.pageSize <= lastPage.page
+          ? undefined
+          : lastPage.page + 1,
     });
 
+  const [setIntersection, isIntersected, resetIsIntersected] = useIntersection({
+    rootMargin: "700px",
+  });
+
+  useEffect(() => {
+    if (isFetchingNextPage) return;
+    if (isIntersected && hasNextPage) {
+      fetchNextPage();
+    }
+    resetIsIntersected();
+  }, [isIntersected, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
   const guilds = data?.pages.flatMap((page) => page.items);
 
   return (
@@ -36,6 +55,12 @@ export const InfiniteScrollGuilds = () => {
         <p>Couldn&apos;t fetch guilds</p>
       )}
 
+      <div
+        ref={(element: HTMLDivElement | null) => {
+          setIntersection(element);
+        }}
+        aria-hidden
+      />
       <Button
         className="mt-8"
         onClick={() => fetchNextPage()}

diff --git a/src/app/explorer/components/Search.tsx b/src/app/explorer/components/Search.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export const Search = () => {};
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -9,15 +9,6 @@ import { Suspense } from "react";
 import { GuildCard } from "./components/GuildCard";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 
-const _getGuilds = async () => {
-  const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=24&sortBy=name&reverse=false&search=`;
-  const guilds = (await (
-    await fetch(request)
-  ).json()) as PaginatedResponse<Guild>;
-
-  return guilds;
-};
-
 const getAssociatedGuilds = async () => {
   const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=24&sortBy=name&reverse=false&search=`;
   const guilds = (await (
@@ -36,8 +27,6 @@ const GuildCardSkeleton = () => {
 };
 
 export default function Explorer() {
-  //const { items: guilds } = await getGuilds();
-
   return (
     <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
       <section className="pt-6 pb-8">
@@ -50,19 +39,7 @@ export default function Explorer() {
         <Input placeholder="Search guild.xyz" />
       </section>
 
-      <InfiniteScrollGuilds />
-      {/*<section className="grid gap-2">
-        <h2 className="font-bold text-lg">Explore guilds</h2>
-        {guilds.length > 0 ? (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {guilds.map((guild) => (
-              <GuildCard key={guild.id} guild={guild} />
-            ))}
-          </div>
-        ) : (
-          <p>Couldn&apos;t fetch guilds</p>
-        )}
-      </section>*/}
+      <InfiniteScrollGuilds search="haho" />
     </main>
   );
 }
@@ -102,7 +79,7 @@ async function YourGuildsSection() {
 async function YourGuilds() {
   const { items: myGuilds } = await getAssociatedGuilds();
 
-  return myGuilds.length > 0 ? (
+  return myGuilds && myGuilds.length > 0 ? (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {myGuilds.map((guild) => (
         <GuildCard key={guild.id} guild={guild} />