refactor: move out consts and fetchers

src/app/explorer/components/InfiniteScrollGuilds.tsx

@@ -3,32 +3,20 @@
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
-import { env } from "@/lib/env";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useIntersection } from "foxact/use-intersection";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { searchAtom } from "../atoms";
+import { getGuildSearch } from "../fetchers";
 import { GuildCard } from "./GuildCard";
 
-const pageSize = 24;
-
 export const InfiniteScrollGuilds = () => {
   const search = useAtomValue(searchAtom);
-  const fetchGuilds = useCallback(
-    async ({ pageParam }: { pageParam: number }) =>
-      (
-        await fetch(
-          `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${pageSize}&search=${search}`,
-        )
-      ).json() as Promise<PaginatedResponse<Guild>>,
-    [search],
-  );
-
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     useInfiniteQuery({
       queryKey: ["guilds", search || ""],
-      queryFn: fetchGuilds,
+      queryFn: getGuildSearch(search),
       initialPageParam: 1,
       enabled: search !== undefined,
       getNextPageParam: (lastPage) =>

src/app/explorer/constants.ts

@@ -0,0 +1 @@
+export const pageSize = 24;

src/app/explorer/fetchers.ts

@@ -0,0 +1,12 @@
+import { env } from "@/lib/env";
+import { pageSize } from "./constants";
+
+export const getGuildSearch =
+  (search = "") =>
+  async ({ pageParam }: { pageParam: number }) => {
+    return (
+      await fetch(
+        `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${pageSize}&search=${search}`,
+      )
+    ).json() as Promise<PaginatedResponse<Guild>>;
+  };

src/app/explorer/page.tsx

@@ -13,6 +13,7 @@ import { Suspense } from "react";
 import { GuildCard } from "./components/GuildCard";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
 import { Search } from "./components/Search";
+import { getGuildSearch } from "./fetchers";
 
 const getAssociatedGuilds = async () => {
   const request = `${env.NEXT_PUBLIC_API}/guild/search?page=1&pageSize=24&sortBy=name&reverse=false&search=`;
@@ -36,12 +37,7 @@ export default async function Explorer() {
   await queryClient.prefetchInfiniteQuery({
     queryKey: ["guilds", ""],
     initialPageParam: 1,
-    queryFn: async ({ pageParam }: { pageParam: number }) =>
-      (
-        await fetch(
-          `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${24}&search=`,
-        )
-      ).json(),
+    queryFn: getGuildSearch(""),
   });
 
   return (