Finally fixed the werid clerk behavior

package.json

@@ -9,7 +9,7 @@
     "db:migrate": "drizzle-kit migrate",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
@@ -29,7 +29,7 @@
     "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/react-query": "^5.45.0",
     "@tanstack/react-table": "^8.19.2",
-    "@vercel/postgres": "^0.9.0",
+    "@vercel/postgres": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.31.2",
@@ -67,11 +67,8 @@
   "ct3aMetadata": {
     "initVersion": "7.34.0"
   },
-  "packageManager": "[email protected]",
   "trustedDependencies": [
     "@clerk/shared",
-    "bufferutil",
-    "canvas",
     "esbuild",
     "utf-8-validate"
   ]

src/app/@modal/(.)whishper/recording/[name]/page.tsx

@@ -1,13 +1,14 @@
 import { Modal } from "@/app/@modal/(.)paperless/document/[id]/modal";
+import AudioPreview from "@/components/audio-preview";
 
 export default function ModalAudioPreview({
   params,
 }: {
-  params: { id: number };
+  params: { name: string };
 }) {
   return (
     <Modal>
-      <div>Test</div>
+      <AudioPreview name={params.name} />
     </Modal>
   );
 }

src/app/actions.ts

@@ -40,9 +40,7 @@ export async function setUserProperty<K extends keyof UsersTableType>(
 export async function getUserData() {
   const { userId } = auth();
 
-  if (!userId) {
-    return null;
-  }
+  if (!userId) return null;
 
   const userData = await db.query.users.findFirst({
     where: (model, { eq }) => eq(model.userId, userId),

src/app/page.tsx

@@ -1,7 +1,8 @@
 import OpenExternalLink from "@/components/external-link";
-import Link from "next/link";
+import { getUserData } from "./actions";
+
+export default async function HomePage() {
 
-export default function HomePage() {
   return (
     <main>
       <div>
@@ -14,7 +15,6 @@ export default function HomePage() {
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>
-        <Link href="/paperless/document/2024_07_04">testing</Link>
       </div>
     </main>
   );

src/app/whishper/page.tsx

@@ -192,19 +192,25 @@ function RecordingsList() {
   return (
     <>
       <h1 className="text-2xl font-bold">Search Results</h1>
-      <DataTable data={WhishperRecordingsMap} userData={userData.data} />
+      <DataTable
+        data={WhishperRecordingsMap}
+        userData={userData.data}
+        query={query}
+      />
     </>
   );
 }
 
 interface DataTableProps<TData> {
   data: TData[];
   userData: UsersTableType;
+  query: string;
 }
 
 function DataTable<TData extends WhishperRecordingType>({
   data,
   userData,
+  query,
 }: DataTableProps<TData>) {
   const columns: ColumnDef<TData>[] = [
     {
@@ -215,7 +221,9 @@ function DataTable<TData extends WhishperRecordingType>({
       },
       header: "Name",
       cell: ({ getValue, row }) => (
-        <OpenInternalLink href={`/whishper/recording/${row.original.fileName}`}>
+        <OpenInternalLink
+          href={`/whishper/recording/${row.original.fileName}?query=${query}`}
+        >
           {getValue() as string}
         </OpenInternalLink>
       ),

src/components/audio-preview.tsx

@@ -6,11 +6,15 @@ import {
   QueryClientProvider,
   QueryClient,
 } from "@tanstack/react-query";
+import LoadingSpinner from "./loading-spinner";
+import { UsersTableType } from "@/server/db/schema";
 
 const queryClient = new QueryClient();
 
-async function getRecording(name: string) {
-  const userData = await getUserData();
+async function getRecording(
+  name: string,
+  userData: UsersTableType,
+): Promise<string | null> {
   if (!userData) {
     console.error("Error getting user data");
     return null;
@@ -19,31 +23,46 @@ async function getRecording(name: string) {
   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 AudioPreview(props: { name: string }) {
-  const { data: url, isLoading } = useQuery({
+function Player(props: { name: string }) {
+  const user = useQuery({
     queryKey: ["audioURL", props.name],
     queryFn: async () => {
-      return getRecording(props.name);
+      return getUserData;
     },
   });
 
-  return <p>{url}</p>;
+  const url = useQuery({
+    queryKey: ["audioURL", props.name],
+    queryFn: async () => {
+      return getRecording(props.name, user.data);
+    },
+  });
+
+  if (user.isLoading ?? url.isLoading) {
+    return <LoadingSpinner>Loading ...</LoadingSpinner>;
+  }
+
+  return <p>{url.data}</p>;
 }
 
-export default function Page(props: { name: string }) {
+export default function AudioPreview(props: { name: string }) {
   return (
     <QueryClientProvider client={queryClient}>
-      <AudioPreview name={props.name} />
+      <Player name={props.name} />
     </QueryClientProvider>
   );
 }