chore: switch from fetch to ky (#128)

Fixes # ### TL;DR ### What changed? ### Why?
aamirazad · Aug 21, 2024 · c01ed64 · c01ed64
1 parent f439e15
commit c01ed64
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 103 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.33.0",
     "geist": "^1.3.0",
+    "ky": "^1.7.0",
     "lucide-react": "^0.414.0",
     "next": "^14.2.4",
     "next-themes": "^0.3.0",

diff --git a/src/app/actions.ts b/src/app/actions.ts
@@ -3,7 +3,6 @@
 import { db } from "@/server/db";
 import type { UsersTableType } from "@/server/db/schema";
 import { users } from "@/server/db/schema";
-import type { PaperlessDocumentsType } from "@/types";
 import { auth } from "@clerk/nextjs/server";
 
 /*

diff --git a/src/app/api/whishperRecording/route.ts b/src/app/api/whishperRecording/route.ts
@@ -1,4 +1,5 @@
 import { getUserData } from "@/app/actions";
+import ky from "ky";
 
 export async function DELETE(req: Request) {
   const url = new URL(req.url);
@@ -13,15 +14,12 @@ export async function DELETE(req: Request) {
   if (!userData) {
     return new Response("Unauthorized", { status: 401 });
   }
-
-  const response = await fetch(
+  
+  const response = await ky.delete(
     `${userData.whishperURL}/api/transcriptions/${id}`,
-    {
-      method: "DELETE",
-    },
   );
 
-  if (!response.ok) {
+  if (!(response.ok)) {
     throw new Error("Network error");
   }
 

diff --git a/src/app/paperless/document/[id]/page.tsx b/src/app/paperless/document/[id]/page.tsx
@@ -27,6 +27,7 @@ import BodyMessage from "@/components/body-message";
 import Link from "next/link";
 import LoadingSpinner from "@/components/loading-spinner";
 import OpenExternalLink from "@/components/external-link";
+import ky from "ky";
 
 const queryClient = new QueryClient();
 
@@ -36,19 +37,15 @@ export async function getPaperlessDocument(
 ): Promise<string | null> {
   try {
     const url = `${userData.paperlessURL}/api/documents/${documentId}/download/`;
-    const response = await fetch(url, {
-      headers: {
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    });
-    if (response.ok) {
-      const blob = await response.blob();
-      const objectUrl = URL.createObjectURL(blob);
-      return objectUrl;
-    } else {
-      console.error("Failed to fetch PDF");
-      return null;
-    }
+    const blob = await ky
+      .get(url, {
+        headers: {
+          Authorization: `Token ${userData.paperlessToken}`,
+        },
+      })
+      .blob();
+    const objectUrl = URL.createObjectURL(blob);
+    return objectUrl;
   } catch (error) {
     console.error("Error fetching PDF:", error);
     return null;
@@ -64,44 +61,36 @@ async function deleteDocument(documentId: number) {
     documents: [documentId],
     method: "delete",
   };
-  const response = await fetch(
-    `${userData.paperlessURL}/api/documents/bulk_edit/ `,
+  const response = await ky.post(
+    `${userData.paperlessURL}/api/documents/bulk_edit/`,
     {
-      method: "POST",
+      json: body,
       headers: {
-        "Content-Type": "application/json",
         Authorization: `Token ${userData.paperlessToken}`,
       },
-      body: JSON.stringify(body),
     },
   );
   return response;
 }
 
-const fetchUserData = async (): Promise<UsersTableType> => {
-  const response = await fetch(`/api/getUserData`);
-  if (!response.ok) {
-    throw new Error("Network error");
-  }
-  const data = (await response.json()) as UsersTableType;
-  return data;
-};
+async function fetchUserData(): Promise<UsersTableType> {
+  return await ky.get("/api/getUserData").json<UsersTableType>();
+}
 
-async function getPaperlessDocumentData(id: number, userData: UsersTableType) {
+async function getPaperlessDocumentData(
+  id: number,
+  userData: UsersTableType,
+): Promise<PaperlessDocumentType | null> {
   try {
     const url = `${userData.paperlessURL}/api/documents/${id}/?truncate_content=true`;
-    const response = await fetch(url, {
-      headers: {
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    });
-    if (response.ok) {
-      const data = (await response.json()) as PaperlessDocumentType;
-      return data;
-    } else {
-      console.error("Failed to fetch PD dataF");
-      return null;
-    }
+    const data = await ky
+      .get(url, {
+        headers: {
+          Authorization: `Token ${userData.paperlessToken}`,
+        },
+      })
+      .json<PaperlessDocumentType>();
+    return data;
   } catch (error) {
     console.error("Error fetching PDF data:", error);
     return null;

diff --git a/src/app/paperless/page.tsx b/src/app/paperless/page.tsx
@@ -28,6 +28,7 @@ import OpenInternalLink from "@/components/internal-link";
 import type { PaperlessDocumentsType } from "@/types";
 import type { UsersTableType } from "@/server/db/schema";
 import Image from "next/image";
+import ky from "ky";
 
 const queryClient = new QueryClient();
 
@@ -36,18 +37,17 @@ async function getPaperlessDocuments(query: string) {
 
   if (!query || query == "null" || query.length < 3 || !userData) return null;
 
-  const response = await fetch(
-    `${userData.paperlessURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${userData.paperlessToken}`,
+  const data = await ky
+    .get(
+      `${userData.paperlessURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Token ${userData.paperlessToken}`,
+        },
       },
-    },
-  );
-
-  const data = (await response.json()) as PaperlessDocumentsType;
+    )
+    .json<PaperlessDocumentsType>();
 
   return data;
 }
@@ -58,19 +58,15 @@ export async function getPaperlessThumbnail(
 ): Promise<string | null> {
   try {
     const url = `${userData.paperlessURL}/api/documents/${documentId}/thumb/`;
-    const response = await fetch(url, {
-      headers: {
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    });
-    if (response.ok) {
-      const blob = await response.blob();
-      const objectUrl = URL.createObjectURL(blob);
-      return objectUrl;
-    } else {
-      console.error("Failed to fetch PDF");
-      return null;
-    }
+    const blob = await ky
+      .get(url, {
+        headers: {
+          Authorization: `Token ${userData.paperlessToken}`,
+        },
+      })
+      .blob();
+    const objectUrl = URL.createObjectURL(blob);
+    return objectUrl;
   } catch (error) {
     console.error("Error fetching PDF:", error);
     return null;
@@ -232,7 +228,7 @@ function DocumentsPage() {
                 alt={document.title}
                 width={40}
                 height={128}
-                className="h-32 w-full rounded object-cover mb-2"
+                className="mb-2 h-32 w-full rounded object-cover"
               />
               {document.title}
             </Link>

diff --git a/src/app/whishper/page.tsx b/src/app/whishper/page.tsx
@@ -43,6 +43,7 @@ import OpenExternalLink from "@/components/external-link";
 import type { UsersTableType } from "@/server/db/schema";
 import { BadgeCheck, Badge, BadgeAlert } from "lucide-react";
 import type { WhishperRecordingType } from "@/types";
+import ky from "ky";
 
 const queryClient = new QueryClient();
 
@@ -53,9 +54,10 @@ async function getWhishperRecordings(
 
   if (!query || query == "null" || query.length < 3 || !userData) return null;
 
-  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
+  const data = await ky
+    .get(`${userData.whishperURL}/api/transcriptions`)
+    .json<WhishperRecordingType[]>();
 
-  const data = (await response.json()) as WhishperRecordingType[];
   const lowerCaseQuery = query.toLowerCase();
   const filteredAndScored = data
     .filter(
@@ -187,7 +189,7 @@ function RecordingsList() {
 
   const WhishperRecordingsMap = WhishperRecordings.data;
 
-  if (!WhishperRecordingsMap ?? WhishperRecordingsMap.length === 0) {
+  if (WhishperRecordingsMap.length === 0) {
     return <h1 className="text-2xl font-bold">No results!</h1>;
   }
 

diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx
@@ -31,17 +31,13 @@ import {
 } from "@/components/ui/tooltip";
 import { toast } from "sonner";
 import BodyMessage from "@/components/body-message";
+import ky from "ky";
 
 const queryClient = new QueryClient();
 
-const fetchUserData = async (): Promise<UsersTableType> => {
-  const response = await fetch("/api/getUserData");
-  if (!response.ok) {
-    throw new Error("Network error");
-  }
-  const data = (await response.json()) as UsersTableType;
-  return data;
-};
+async function fetchUserData(): Promise<UsersTableType> {
+  return await ky.get("/api/getUserData").json<UsersTableType>();
+}
 
 function SkeletonLoader() {
   return (
@@ -68,26 +64,14 @@ function SkeletonLoader() {
   );
 }
 
-async function fetchWhishperRecording(searchId: string, whishperURL: string) {
-  const response = await fetch(`${whishperURL}/api/transcriptions`);
-  const data = (await response.json()) as WhishperRecordingType[];
-  for (const recording of data) {
-    if (recording.id === searchId) {
-      return recording;
-    }
-  }
-}
-
-async function deleteWhishperRecording(url: string) {
-  const response = await fetch(url, {
-    method: "DELETE",
-  });
-
-  if (!response.ok) {
-    throw new Error("Network error");
-  }
-
-  return response;
+async function fetchWhishperRecording(
+  searchId: string,
+  whishperURL: string,
+): Promise<WhishperRecordingType | undefined> {
+  const data = await ky
+    .get(`${whishperURL}/api/transcriptions`)
+    .json<WhishperRecordingType[]>();
+  return data.find((recording) => recording.id === searchId);
 }
 
 type AudioInfoProps = {
@@ -220,7 +204,7 @@ function AudioInfo({ id }: AudioInfoProps) {
                     <AlertDialogCancel>Cancel</AlertDialogCancel>
                     <AlertDialogAction
                       onClick={async () => {
-                        const response = await deleteWhishperRecording(
+                        const response = await ky.delete(
                           `${userData.whishperURL}/api/transcriptions/${id}`,
                         );
                         if (response.ok) {