feat: add whishper table to show data (#64)

Fixes #63

### TL;DR

### What changed?

### Why?

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"
   },
@@ -28,7 +28,9 @@
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/react-query": "^5.45.0",
-    "@vercel/postgres": "^0.9.0",
+    "@tanstack/react-query-devtools": "^5.50.1",
+    "@tanstack/react-table": "^8.19.2",
+    "@vercel/postgres": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.31.2",
@@ -66,11 +68,8 @@
   "ct3aMetadata": {
     "initVersion": "7.34.0"
   },
-  "packageManager": "[email protected]",
   "trustedDependencies": [
     "@clerk/shared",
-    "bufferutil",
-    "canvas",
     "esbuild",
     "utf-8-validate"
   ]

src/app/@modal/(.)paperless/document/[id]/page.tsx

@@ -1,7 +1,7 @@
 import DocumentViewer from "@/components/document-viewer";
-import { Modal } from "./modal";
+import { Modal } from "../../../../../components/modal";
 
-export default function FullPageDocumentPage({
+export default function ModalDocumentPage({
   params,
 }: {
   params: { id: number };

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

@@ -0,0 +1,14 @@
+import { Modal } from "@/components/modal";
+import AudioPreview from "@/components/audio-preview";
+
+export default function ModalAudioPreview({
+  params,
+}: {
+  params: { name: string };
+}) {
+  return (
+    <Modal>
+      <AudioPreview name={params.name} />
+    </Modal>
+  );
+}

src/app/actions.ts

@@ -3,9 +3,8 @@
 import { db } from "@/server/db";
 import type { UsersTableType } from "@/server/db/schema";
 import { users } from "@/server/db/schema";
-import type { PaperlessDocumentsType, WhishperRecordingsType } from "@/types";
+import type { PaperlessDocumentsType } from "@/types";
 import { auth } from "@clerk/nextjs/server";
-import type { AdviceAPIType } from "@/types";
 
 /*
 Clerk helpers
@@ -41,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),
@@ -81,26 +78,3 @@ export async function getPaperlessDocuments(query: string) {
 
   return data;
 }
-
-/*
-Whishper
-  \ \      / (_)___| |__  _ __   ___ _ __
-  \ \ /\ / /| / __| '_ \| '_ \ / _ | '__|
-   \ V  V / | \__ | | | | |_) |  __| |
-    \_/\_/  |_|___|_| |_| .__/ \___|_|
-                        |_|
-*/
-
-export async function getWhishperRecordings(query: string) {
-  const userData = await getUserData();
-
-  if (!query || query == "null" || query.length < 3 || !userData) return null;
-
-  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
-
-  const data = (await response.json()) as WhishperRecordingsType;
-
-  console.log(data)
-
-  return data;
-}

src/app/api/deleteWhishperRecordingByName/route.ts

@@ -0,0 +1,38 @@
+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");
+
+  if (!name) {
+    return new Response("Name parameter is missing", { status: 400 });
+  }
+
+  const userData = await getUserData();
+
+  if (!userData) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  console.log(getWhishperRecordings(name));
+
+  const response = await fetch(
+    `${userData.whishperURL}/api/transcriptions/${name}`,
+    {
+      method: "DELETE",
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error("Network error");
+  }
+
+  // Assuming the deletion is successful and you want to return a JSON response
+  return new Response(JSON.stringify({ success: true }), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}

src/app/api/getUserData/route.ts

@@ -0,0 +1,14 @@
+import { db } from "@/server/db";
+import { auth } from "@clerk/nextjs/server";
+
+export async function GET() {
+  const { userId } = auth();
+
+  if (!userId) return new Response(`Unauthorized`, { status: 401 });
+
+  const userData = await db.query.users.findFirst({
+    where: (model, { eq }) => eq(model.userId, userId),
+  });
+
+  return Response.json(userData);
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-import OpenExternalLInk from "@/components/external-link";
+import OpenExternalLink from "@/components/external-link";
 
 export default function HomePage() {
   return (
@@ -7,9 +7,9 @@ export default function HomePage() {
         <div>Welcome to Homelab Connector</div>
         <div>
           Check out the{" "}
-          <OpenExternalLInk href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">
+          <OpenExternalLink href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">
             README
-          </OpenExternalLInk>{" "}
+          </OpenExternalLink>{" "}
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>

src/app/paperless/document/[id]/page.tsx

@@ -1,6 +1,6 @@
 import DocumentViewer from "@/components/document-viewer";
 
-export default function ModalDocumentPage({
+export default function FullPageDocumentPage({
   params,
 }: {
   params: { id: number };

src/app/sign-in/page.tsx

@@ -3,7 +3,6 @@
 import OpenInternalLink from "@/components/internal-link";
 import LoadingSpinner from "@/components/loading-spinner";
 import { RedirectToSignIn, SignedIn, SignedOut } from "@clerk/nextjs";
-import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
 export default function SignIn() {