From 44fcaa09bcf24742c9735382861d57f577e1eef9 Mon Sep 17 00:00:00 2001 From: Aamir Azad Date: Tue, 20 Aug 2024 22:17:27 -0400 Subject: [PATCH] feat: switch whishper modal to its own page --- .../(.)whishper/recording/[id]/page.tsx | 14 - src/app/@modal/default.tsx | 3 - src/app/whishper/recording/[id]/page.tsx | 245 +++++++++++++++++- src/components/audio-preview.tsx | 242 ----------------- 4 files changed, 236 insertions(+), 268 deletions(-) delete mode 100644 src/app/@modal/(.)whishper/recording/[id]/page.tsx delete mode 100644 src/app/@modal/default.tsx delete mode 100644 src/components/audio-preview.tsx diff --git a/src/app/@modal/(.)whishper/recording/[id]/page.tsx b/src/app/@modal/(.)whishper/recording/[id]/page.tsx deleted file mode 100644 index 2d7a01f..0000000 --- a/src/app/@modal/(.)whishper/recording/[id]/page.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Modal } from "@/components/modal"; -import AudioPreview from "@/components/audio-preview"; - -export default function ModalAudioPreview({ - params, -}: { - params: { id: string }; -}) { - return ( - - - - ); -} diff --git a/src/app/@modal/default.tsx b/src/app/@modal/default.tsx deleted file mode 100644 index 7046598..0000000 --- a/src/app/@modal/default.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function DefaultModal() { - return null; - } \ No newline at end of file diff --git a/src/app/whishper/recording/[id]/page.tsx b/src/app/whishper/recording/[id]/page.tsx index 7d8efbe..29ae35d 100644 --- a/src/app/whishper/recording/[id]/page.tsx +++ b/src/app/whishper/recording/[id]/page.tsx @@ -1,13 +1,240 @@ -import AudioPreview from "@/components/audio-preview"; +"use client"; -export default function FullAudioPage({ - params, -}: { - params: { id: string }; -}) { +import { + useQuery, + QueryClientProvider, + QueryClient, +} from "@tanstack/react-query"; +import type { UsersTableType } from "@/server/db/schema"; +import { Button, buttonVariants } from "@/components/ui/button"; +import { useRouter } from "next/navigation"; +import { ChevronLeft } from "lucide-react"; +import { useState } from "react"; +import OpenExternalLink from "@/components/external-link"; +import type { WhishperRecordingType } from "@/types"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { toast } from "sonner"; +import BodyMessage from "@/components/body-message"; +import ky from "ky"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; +import { getUserData } from "@/app/actions"; + +const queryClient = new QueryClient(); + +async function fetchUserData(): Promise { + return await ky.get("/api/getUserData").json(); +} + +function SkeletonLoader() { + return ( +
+
+
+
+ {/* Title Skeleton */} +
+ {/* Audio Skeleton */} +
+
+
+
+
+
+
+ ); +} + +async function fetchWhishperRecording( + searchId: string, + whishperURL: string, +): Promise { + const data = await ky + .get(`${whishperURL}/api/transcriptions`) + .json(); + console.log(data); + return data.find((recording) => recording.id === searchId); +} + +type AudioInfoProps = { + id: string; +}; + +function AudioInfo({ id }: AudioInfoProps) { + const router = useRouter(); + const [isPlaying, setIsPlaying] = useState(false); + + const { + data: userData, + isLoading: isUserDataLoading, + error: userDataError, + } = useQuery({ + queryKey: ["userData"], + queryFn: getUserData, + }); + + const whishperURL = userData?.whishperURL; + + const { + data: recordingData, + isLoading: isRecordingDataLoading, + error: recordingDataError, + } = useQuery({ + queryKey: ["whishperRecording", id, whishperURL], // Include id in the query key + queryFn: () => fetchWhishperRecording(id, whishperURL!), + enabled: !!whishperURL, // Only fetch recording data when userData is available + }); + + if (isUserDataLoading) { + return ; + } + + if (userDataError ?? !userData) { + return Error loading user data; + } + + if (isRecordingDataLoading) { + return ; + } + + if (recordingDataError ?? !recordingData) { + return Error loading recording data; + } + + const decodedName = decodeURIComponent(recordingData.fileName); + const frontPart = decodedName.split("_WHSHPR_")[1] ?? decodedName; + const formattedName = frontPart.replace(".m4a", "") ?? decodedName; + + return ( +
+
+
+
+
+ {formattedName} + +
+ {/* Audio */} +
+ +
+
+ + + + + + Download + + + +

+ To download the audio file, right click and select + "Save as". +

+ + + + + + + + + + + Are you absolutely sure? + + + This action cannot be undone. This will permanently delete + the recording. + + + + Cancel + { + const response = await ky.delete( + `${userData.whishperURL}/api/transcriptions/${id}`, + ); + if (response.ok) { + toast("Recording deleted", { + description: "The recording has been deleted.", + }); + } else { + toast("Error deleting recording", { + description: + "An error occurred while deleting the recording.", + }); + } + router.back(); + }} + > + Continue + + + + +
+
+
+
+
+ ); +} + +export default function AudioPreview({ id }: { id: string }) { return ( -
- -
+ + + + ); } diff --git a/src/components/audio-preview.tsx b/src/components/audio-preview.tsx deleted file mode 100644 index 5b84861..0000000 --- a/src/components/audio-preview.tsx +++ /dev/null @@ -1,242 +0,0 @@ -"use client"; - -import { - useQuery, - QueryClientProvider, - QueryClient, -} from "@tanstack/react-query"; -import type { UsersTableType } from "@/server/db/schema"; -import { Button, buttonVariants } from "@/components/ui/button"; -import { useRouter } from "next/navigation"; -import { ChevronLeft } from "lucide-react"; -import { useState } from "react"; -import OpenExternalLink from "@/components/external-link"; -import type { WhishperRecordingType } from "@/types"; -import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, -} from "@/components/ui/alert-dialog"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; -import { toast } from "sonner"; -import BodyMessage from "@/components/body-message"; -import ky from "ky"; - -const queryClient = new QueryClient(); - -async function fetchUserData(): Promise { - return await ky.get("/api/getUserData").json(); -} - -function SkeletonLoader() { - return ( -
-
-
-
- {/* Title Skeleton */} -
- {/* Audio Skeleton */} -
-
-
- {/* Button Skeletons */} -
- {Array.from({ length: 5 }, (_, index) => ( -
-
-
-
-
- ); -} - -async function fetchWhishperRecording( - searchId: string, - whishperURL: string, -): Promise { - const data = await ky - .get(`${whishperURL}/api/transcriptions`) - .json(); - return data.find((recording) => recording.id === searchId); -} - -type AudioInfoProps = { - id: string; -}; - -function AudioInfo({ id }: AudioInfoProps) { - const router = useRouter(); - const [isPlaying, setIsPlaying] = useState(false); - - const { - data: userData, - isLoading: isUserDataLoading, - error: userDataError, - } = useQuery({ - queryKey: ["userData"], - queryFn: fetchUserData, - }); - - const whishperURL = userData?.whishperURL; - - const { - data: recordingData, - isLoading: isRecordingDataLoading, - error: recordingDataError, - } = useQuery({ - queryKey: ["whishperRecording", id, whishperURL], // Include id in the query key - queryFn: () => fetchWhishperRecording(id, whishperURL!), - enabled: !!whishperURL, // Only fetch recording data when userData is available - }); - - if (isUserDataLoading) { - return ; - } - - if (userDataError ?? !userData) { - return Error loading user data; - } - - if (isRecordingDataLoading) { - return ; - } - - if (recordingDataError ?? !recordingData) { - return Error loading recording data; - } - - const decodedName = decodeURIComponent(recordingData.fileName); - const frontPart = decodedName.split("_WHSHPR_")[1] ?? decodedName; - const formattedName = frontPart.replace(".m4a", "") ?? decodedName; - - return ( -
-
-
-
-
- {formattedName} - -
- {/* Audio */} -
- -
-
- - - - - - Download - - - -

- To download the audio file, right click and select - "Save as". -

- - - - - - - - - - - Are you absolutely sure? - - - This action cannot be undone. This will permanently delete - the recording. - - - - Cancel - { - const response = await ky.delete( - `${userData.whishperURL}/api/transcriptions/${id}`, - ); - if (response.ok) { - toast("Recording deleted", { - description: "The recording has been deleted.", - }); - } else { - toast("Error deleting recording", { - description: - "An error occurred while deleting the recording.", - }); - } - router.back(); - }} - > - Continue - - - - -
-
-
-
-
- ); -} - -export default function AudioPreview({ id }: { id: string }) { - return ( - - - - ); -}