So close

aamirazad · Jul 10, 2024 · 486203b · 486203b
1 parent ddd7b86
commit 486203b
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 35 deletions.
diff --git a/package.json b/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"
   },

diff --git a/src/app/api/whishperRecording/route.ts b/src/app/api/whishperRecording/route.ts
@@ -1,12 +1,11 @@
 import { getUserData } from "@/app/actions";
-import { getWhishperRecordings } from "@/app/whishper/page";
 
 export async function DELETE(req: Request) {
   const url = new URL(req.url);
-  const name = url.searchParams.get("name");
+  const id = url.searchParams.get("id");
 
-  if (!name) {
-    return new Response("Name parameter is missing", { status: 400 });
+  if (!id) {
+    return new Response("id parameter is missing", { status: 400 });
   }
 
   const userData = await getUserData();
@@ -16,7 +15,7 @@ export async function DELETE(req: Request) {
   }
 
   const response = await fetch(
-    `${userData.whishperURL}/api/transcriptions/${name}`,
+    `${userData.whishperURL}/api/transcriptions/${id}`,
     {
       method: "DELETE",
     },

diff --git a/src/app/whishper/page.tsx b/src/app/whishper/page.tsx
@@ -46,7 +46,7 @@ import type { WhishperRecordingType } from "@/types";
 
 const queryClient = new QueryClient();
 
-export async function getWhishperRecordings(
+async function getWhishperRecordings(
   query: string,
 ): Promise<WhishperRecordingType[] | null> {
   const userData = await getUserData();
@@ -224,7 +224,7 @@ function DataTable<TData extends WhishperRecordingType>({
       header: "Name",
       cell: ({ getValue, row }) => (
         <OpenInternalLink
-          href={`/whishper/recording/${row.original.fileName}?query=${query}`}
+          href={`/whishper/recording/${row.original.id}?query=${query}`}
         >
           {getValue() as string}
         </OpenInternalLink>

diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx
@@ -17,6 +17,8 @@ import {
 } from "@/components/ui/tooltip";
 import { useState } from "react";
 import { getWhishperRecordings } from "@/app/whishper/page";
+import OpenExternalLink from "./external-link";
+import { SimpleWhishperTranscription, WhishperRecordingType } from "@/types";
 
 const queryClient = new QueryClient();
 
@@ -54,32 +56,45 @@ function SkeletonLoader() {
   );
 }
 
-function AudioInfo(props: { name: string }) {
+async function fetchWhishperRecording(
+  searchId: string,
+  userData: UsersTableType,
+) {
+  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
+  const data = (await response.json()) as WhishperRecordingType[];
+  for (const recording of data) {
+    if (recording.id === searchId) {
+      return recording;
+    }
+  }
+}
+
+function AudioInfo(props: { id: string }) {
   const router = useRouter();
   const [isPlaying, setIsPlaying] = useState(false);
 
-  console.log(getWhishperRecordings(props.name));
-
-  const {
-    data: userData,
-    isLoading: isUserDataLoading,
-    error,
-  } = useQuery({
+  const { data: userData, isLoading: isUserDataLoading } = useQuery({
     queryKey: ["userData"],
     queryFn: fetchUserData,
   });
 
-  const decodedName = decodeURIComponent(props.name);
-  const frontPart = decodedName.split("_WHSHPR_")[1] ?? decodedName;
-  const formattedName = frontPart.replace(".m4a", "") ?? decodedName;
+  const { data: recordingData, isLoading: isRecordingDataLoading } = useQuery({
+    queryKey: ["whishperRecording", props.idgt modify -cam "So close"], // Include id in the query key
+    queryFn: () => fetchWhishperRecording(props.id, userData),
+    enabled: !!userData, // Only fetch recording data when userData is available
+  });
 
-  if (isUserDataLoading) {
+  if (isUserDataLoading ?? isRecordingDataLoading) {
     return <SkeletonLoader />;
   }
-  if (!userData?.whishperURL ?? error) {
-    return <h1>Failed to get whishper url</h1>;
+  if (!userData?.whishperURL ?? !recordingData) {
+    return <h1>Failed</h1>;
   }
 
+  const decodedName = decodeURIComponent(recordingData.fileName);
+  const frontPart = decodedName.split("_WHSHPR_")[1] ?? decodedName;
+  const formattedName = frontPart.replace(".m4a", "") ?? decodedName;
+
   return (
     <div className="flex w-full justify-center">
       <div className="flex h-full justify-center md:w-1/2">
@@ -121,7 +136,9 @@ function AudioInfo(props: { name: string }) {
                     className="cursor-not-allowed opacity-50"
                   >
                     <Button className="w-24">
-                      <ExternalLink /> Open
+                      <OpenExternalLink href={`${userData.whishperURL}`}>
+                        Open
+                      </OpenExternalLink>
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>Comming soon!</TooltipContent>
@@ -146,15 +163,7 @@ function AudioInfo(props: { name: string }) {
                     tabIndex={-1}
                     className="cursor-not-allowed opacity-50"
                   >
-                    <Button
-                      className="w-24"
-                      variant="destructive"
-                      onClick={() => {
-                        fetch("/api/deleteWhishperRecording" + id, {
-                          method: "DELETE",
-                        });
-                      }}
-                    >
+                    <Button className="w-24" variant="destructive">
                       Delete
                     </Button>
                   </TooltipTrigger>
@@ -169,10 +178,10 @@ function AudioInfo(props: { name: string }) {
   );
 }
 
-export default function AudioPreview({ name }: { name: string }) {
+export default function AudioPreview({ id }: { id: string }) {
   return (
     <QueryClientProvider client={queryClient}>
-      <AudioInfo name={name} />
+      <AudioInfo id={id} />
     </QueryClientProvider>
   );
 }
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -95,7 +95,20 @@ export type WhishperRecordingType = {
     }[];
     text: string;
   };
-  translations: [];
+  translations: Translation[];
+};
+
+type Translation = {
+  sourceLanguage: string;
+  targetLanguage: string;
+  text: string;
+  segments: [];
+};
+
+export type SimpleWhishperTranscription = {
+  id: string;
+  duration: number;
+  name: string;
 };
 
 export type AdviceAPIType = {