From 23ed0abfcc30fefb3b38b3d88d46ca146ff46e55 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 21 Nov 2024 09:09:30 +0100
Subject: [PATCH] refactor: move out consts and fetchers

---
 .../explorer/components/InfiniteScrollGuilds.tsx | 16 ++--------------
 src/app/explorer/constants.ts                    |  1 +
 src/app/explorer/fetchers.ts                     | 12 ++++++++++++
 src/app/explorer/page.tsx                        |  8 ++------
 4 files changed, 17 insertions(+), 20 deletions(-)
 create mode 100644 src/app/explorer/constants.ts
 create mode 100644 src/app/explorer/fetchers.ts

diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx
index b7fdc09301..d35878081c 100644
--- a/src/app/explorer/components/InfiniteScrollGuilds.tsx
+++ b/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) =>
diff --git a/src/app/explorer/constants.ts b/src/app/explorer/constants.ts
new file mode 100644
index 0000000000..f9efd9b7ba
--- /dev/null
+++ b/src/app/explorer/constants.ts
@@ -0,0 +1 @@
+export const pageSize = 24;
diff --git a/src/app/explorer/fetchers.ts b/src/app/explorer/fetchers.ts
new file mode 100644
index 0000000000..38eb89be73
--- /dev/null
+++ b/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>>;
+  };
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index b08e6eb7c8..76bfdcef51 100644
--- a/src/app/explorer/page.tsx
+++ b/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 (