This clerk issue is being very annoying

src/app/actions.ts

@@ -4,7 +4,7 @@ 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";
+import { auth, clerkMiddleware } from "@clerk/nextjs/server";
 
 /*
 Clerk helpers
@@ -38,6 +38,7 @@ export async function setUserProperty<K extends keyof UsersTableType>(
 }
 
 export async function getUserData() {
+  clerkMiddleware();
   const { userId } = auth();
 
   if (!userId) return null;
@@ -78,3 +79,18 @@ export async function getPaperlessDocuments(query: string) {
 
   return data;
 }
+
+export async function getRecording(name: string): Promise<string | null> {
+  const userData: UsersTableType | undefined | null = await getUserData();
+  if (!userData) {
+    throw new Error("User data is undefined");
+  }
+
+  const url = `${userData.whishperURL}/api/documents/${name}/download/`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error("Failed to fetch recording");
+  }
+  const blob = await response.blob();
+  return URL.createObjectURL(blob);
+}

src/app/page.tsx

@@ -1,5 +1,4 @@
 import OpenExternalLink from "@/components/external-link";
-import { getUserData } from "./actions";
 
 export default async function HomePage() {
 

src/app/whishper/page.tsx

@@ -46,7 +46,9 @@ import { BadgeCheck, Badge, BadgeAlert } from "lucide-react";
 
 const queryClient = new QueryClient();
 
-async function getWhishperRecordings(query: string) {
+async function getWhishperRecordings(
+  query: string,
+): Promise<WhishperRecordingType[] | null> {
   const userData = await getUserData();
 
   if (!query || query == "null" || query.length < 3 || !userData) return null;

src/components/audio-preview.tsx

@@ -7,62 +7,43 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 import LoadingSpinner from "./loading-spinner";
-import { UsersTableType } from "@/server/db/schema";
+import type { UsersTableType } from "@/server/db/schema";
+import { getRecording } from "@/app/actions";
 
 const queryClient = new QueryClient();
 
-async function getRecording(
-  name: string,
-  userData: UsersTableType,
-): Promise<string | null> {
-  if (!userData) {
-    console.error("Error getting user data");
-    return null;
-  }
-
-  try {
-    const url = `${userData.whishperURL}/api/documents/${name}/download/`;
-    const response = await fetch(url);
-    console.log(response);
-    if (response.ok) {
-      const blob = await response.blob();
-      return URL.createObjectURL(blob);
-    } else {
-      console.error("Failed to fetch recording");
-      return null;
-    }
-  } catch (error) {
-    console.error("An error occurred:", error);
-    return null;
-  }
-}
-
 function Player(props: { name: string }) {
-  const user = useQuery({
-    queryKey: ["audioURL", props.name],
+  const {
+    data: userData,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["audioURL"],
     queryFn: async () => {
-      return getUserData;
+      return getUserData();
     },
   });
 
-  const url = useQuery({
-    queryKey: ["audioURL", props.name],
-    queryFn: async () => {
-      return getRecording(props.name, user.data);
-    },
+  const { data: url } = useQuery({
+    queryKey: ["url", props.name],
+    queryFn: getRecording,
   });
 
-  if (user.isLoading ?? url.isLoading) {
-    return <LoadingSpinner>Loading ...</LoadingSpinner>;
+  if (isLoading ?? !userData) {
+    return <LoadingSpinner>Loading...</LoadingSpinner>;
+  }
+
+  if (error instanceof Error) {
+    return <p>Error: {error.message}</p>;
   }
 
-  return <p>{url.data}</p>;
+  return <p>{url}</p>;
 }
 
-export default function AudioPreview(props: { name: string }) {
+export default function AudioPreview({ name }: { name: string }) {
   return (
     <QueryClientProvider client={queryClient}>
-      <Player name={props.name} />
+      <Player name={name} />
     </QueryClientProvider>
   );
 }

src/middleware.ts

@@ -1,7 +1,7 @@
 import { clerkMiddleware } from "@clerk/nextjs/server";
 
-export default clerkMiddleware();
+export default clerkMiddleware({ debug: true });
 
 export const config = {
-  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
-};
+  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
+};