feat: dd whishper table to show data

package.json

@@ -28,6 +28,7 @@
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/react-query": "^5.45.0",
+    "@tanstack/react-table": "^8.19.2",
     "@vercel/postgres": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/whishper/page.tsx

@@ -3,7 +3,7 @@
 import { SignedIn, SignedOut } from "@clerk/nextjs";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { array, z } from "zod";
+import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -27,6 +27,23 @@ import LoadingSpinner from "@/components/loading-spinner";
 import type { WhishperRecordingsType } from "@/types";
 import OpenInternalLink from "@/components/internal-link";
 import OpenExternalLInk from "@/components/external-link";
+import AudioViewer from "@/components/audio-viewer";
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ExternalLink } from "lucide-react";
+import { columns } from "@/types";
 
 const queryClient = new QueryClient();
 
@@ -39,11 +56,27 @@ async function getWhishperRecordings(query: string) {
 
   const data = (await response.json()) as WhishperRecordingsType;
   const lowerCaseQuery = query.toLowerCase();
-  return data.filter(
-    (item) =>
-      item.fileName.toLowerCase().includes(lowerCaseQuery) ||
-      item.result.text.toLowerCase().includes(lowerCaseQuery),
-  );
+  const filteredAndScored = data
+    .filter(
+      (item) =>
+        item.fileName.toLowerCase().includes(lowerCaseQuery) ||
+        item.result.text.toLowerCase().includes(lowerCaseQuery),
+    )
+    .map((item) => {
+      const fileNameOccurrences = (
+        item.fileName.toLowerCase().match(new RegExp(lowerCaseQuery, "g")) ?? []
+      ).length;
+      const textOccurrences = (
+        item.result.text.toLowerCase().match(new RegExp(lowerCaseQuery, "g")) ??
+        []
+      ).length;
+      const score = fileNameOccurrences + textOccurrences;
+      return { ...item, score };
+    });
+  const sortedByScore = filteredAndScored.sort((a, b) => b.score - a.score);
+
+  // Step 4: Return the sorted array without the score
+  return sortedByScore.map(({ ...item }) => item);
 }
 
 function SearchForm() {
@@ -160,22 +193,76 @@ function RecordingsList() {
   return (
     <>
       <h1 className="text-2xl font-bold">Search Results</h1>
-      <ul className="list-disc">
-        {WhishperRecordingsMap.map((recording, index) => (
-          <li className="underline" key={index}>
-            <OpenExternalLInk
-              className="underline hover:text-slate-300"
-              href={`${userData.data?.whishperURL}/editor/${recording.id}`}
-            >
-              {recording.fileName.split("_WHSHPR_")[1]}
-            </OpenExternalLInk>
-          </li>
-        ))}
-      </ul>
+      <DataTable<WhishperRecordingsType, unknown>
+        data={WhishperRecordingsMap as WhishperRecordingsType[]}
+      />
     </>
   );
 }
 
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
 export default function WhishperPage() {
   return (
     <main className="">

src/components/audio-viewer.tsx

@@ -0,0 +1,8 @@
+
+
+
+
+export default function AudioViewer() 
+
+  return ;
+}

src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-slate-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/types/index.ts

@@ -1,3 +1,5 @@
+import type { ColumnDef } from "@tanstack/react-table";
+
 export type PaperlessSearchType = {
   total: number;
   documents: {
@@ -104,3 +106,18 @@ export type AdviceAPIType = {
     advice: string;
   };
 };
+
+export const columns: ColumnDef<WhishperRecordingsType>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+  },
+  {
+    accessorKey: "link",
+    header: "Link",
+  },
+];