fix: 🐛 ensure actions will update and delete correctly

neopromic · Nov 11, 2024 · 929e5cd · 929e5cd
1 parent 070bbcd
commit 929e5cd
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 30 deletions.
diff --git a/app/(authenticated)/transactions/page.tsx b/app/(authenticated)/transactions/page.tsx
@@ -15,8 +15,16 @@ const TransactionsPage = async () => {
 
   const transactions = await db.transactions.findMany({
     where: {
-      userId: userId,
+      userId,
     },
+    orderBy: [
+      {
+        date: "desc",
+      },
+      {
+        createdAt: "desc",
+      },
+    ],
   });
 
   return (

diff --git a/app/_actions/upsert-transactions/index.ts b/app/_actions/upsert-transactions/index.ts
@@ -29,18 +29,13 @@ export const upsertTransaction = async (params: UpsertTransactionParams) => {
     throw new Error("Unauthorized");
   }
 
-  // Se não tiver ID, é uma criação
-  if (!id) {
-    await db.transactions.create({
-      data: { ...transactionData, userId },
-    });
-  } else {
-    // Se tiver ID, é uma atualização
-    await db.transactions.update({
-      where: { id },
-      data: { ...transactionData, userId },
-    });
-  }
+  await db.transactions.upsert({
+    create: { ...transactionData, userId },
+    update: { ...transactionData, userId },
+    where: {
+      id: id ?? "",
+    },
+  });
 
   revalidatePath("/transactions");
 };
diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
@@ -1,12 +1,54 @@
+"use client";
+
 import { UserButton } from "@clerk/nextjs";
 import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const Header = ({ isEnabled = true }: { isEnabled?: boolean }) => {
+  const pathname = usePathname();
+
+  const navigation = [
+    {
+      label: "Dashboard",
+      href: "/",
+    },
+    {
+      label: "Transações",
+      href: "/transactions",
+    },
+    {
+      label: "Assinaturas",
+      href: "/subscriptions",
+    },
+  ];
+
+  if (!isEnabled) return null;
+
   return (
-    <header
-      className={`flex h-[72px] items-center justify-between p-4 ${isEnabled ? "block" : "hidden"}`}
-    >
-      <Image src="/logo.svg" alt="logo" width={173} height={32} />
+    <header className="sticky left-0 top-0 z-50 flex h-[72px] items-center justify-between border-b bg-background px-6">
+      <div className="flex items-center gap-8">
+        <Link href="/">
+          <Image src="/logo.svg" alt="logo" width={173} height={32} />
+        </Link>
+
+        <nav className="flex items-center gap-4">
+          {navigation.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`text-sm transition-colors ${
+                pathname === item.href
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </div>
+
       <UserButton showName />
     </header>
   );

diff --git a/app/_components/ui/data-table.tsx b/app/_components/ui/data-table.tsx
@@ -4,6 +4,8 @@ import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
   useReactTable,
 } from "@tanstack/react-table";
 
@@ -26,10 +28,22 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([
+    {
+      id: "date",
+      desc: true,
+    },
+  ]);
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: {
+      sorting,
+    },
   });
 
   return (
@@ -38,18 +52,16 @@ export function DataTable<TData, TValue>({
         <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>
-                );
-              })}
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </TableHead>
+              ))}
             </TableRow>
           ))}
         </TableHeader>
@@ -70,7 +82,7 @@ export function DataTable<TData, TValue>({
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                Nenhum resultado encontrado.
               </TableCell>
             </TableRow>
           )}

diff --git a/app/_components/upsert-transaction-dialog.tsx b/app/_components/upsert-transaction-dialog.tsx
@@ -111,6 +111,7 @@ const UpsertTransactionDialog = ({
       onOpenChange={(open) => {
         setDialogOpen(open);
       }}
+      modal
     >
       <DialogContent className="max-h-[90vh] overflow-y-auto">
         <DialogHeader>

diff --git a/app/subscriptions/page.tsx b/app/subscriptions/page.tsx
@@ -0,0 +1,12 @@
+import Header from "../_components/Header";
+
+const Subscriptions = () => {
+  return (
+    <>
+      <Header />
+      <div>Subscriptions</div>
+    </>
+  );
+};
+
+export default Subscriptions;